【Angular】——Angular mvc

来源：互联网发布：淘宝内部优惠券可信吗编辑：程序博客网时间：2024/05/21 06:48

之前学习的简单总结——

没有找到AngularJs关于mvc太多的资料，只有简单的实例初步的了解一下AngularJS中的mvc，所以自己对这一块目前只停留在简单使用上。

首先看一下html页面的代码：

<!doctype html><html ng-app="mvcHTMLModule">    <head>        <meta charset="utf-8">    </head>    <body>        <div ng-controller="CommonController">            <div ng-controller="Controller1">                <input ng-model="greeting.text"> <p>{{greeting.text}},Angular</p>                <button ng-click="test1()">test1</button>            </div>            ------------------------------------            <br>            <div ng-controller="Controller2">                <input ng-model="greeting.text"> <p>{{greeting.text}},Angular</p>                <button ng-click="test2()">test2</button>            </div>            ------------------------------------            <br>            <button ng-click="commonFn()">通用</button>        </div>    </body>    <script src="js/angular-1.3.0.js"></script>    <script src="MVC3.js"></script></html>

页面中引用的HelloAngular_MVC.js代码：

var mvcModule=angular.module("mvcHTMLModule",[])//定义模块名为mvcHTMLModule//在该模块中添加controllervar mvcModule=angular.module("mvcHTMLModule",[])//定义模块名为mvcHTMLModule//在该模块中添加controllermvcModule.controller("CommonController",function ($scope){    $scope.commonFn=function(){        alert("这里是通用功能！");    };})mvcModule.controller("Controller1",function ($scope) {    $scope.greeting = {        text: 'Hello1'    };    $scope.test1=function(){        alert("test1");    };})mvcModule.controller("Controller2",function($scope) {    $scope.greeting = {        text: 'Hello2'    };    $scope.test2=function(){        alert("test2");    }})

指令认识：

ng-app：指令告诉Angular 应该管理页面中的哪一块。本实例中Angular管理整个html页。默认可以不赋值，本实例中在js中定义了自己的模块mvcHTMLModule，可以在页面中使用。

ng-controller：可以指定页面中某一块元素使用的controller，本实例中在模块中定义了三个controller，在页面上使用的范围不同，只要在controller指定的范围内容就可以使用controller中定义的属性和方法。

ng-model：将输入域的值与在对应范围内的controller中$scope创建的变量绑定。（输入域一般指：input、text、select等）

ng-click：定义点击事件，本实例中调用的是在不同controller中的$scope定义的方法。

作用范围示意图：

效果示意图：

分析：ng-model虽然都绑定的是greeting.text，但是显示在页面上的是不同的值，因为绑定的是不同Controller中的属性。

小结：

MVC是Angular四大核心之一，目前对Angular中mvc 的认识仅限于几个指令，后续学习中再深入。

初步接触AngularJS实现自己写俩个实现一样功能的demo，使用Angularjs使用ng-model指令就可以了，如果用jquery需要手动的写很多代码。

类似ng-model这样的就是指令，Angular中自带了很多指令，我们也可以自己定义指令来完成我们指定的前台功能，后续博客中简单的认识一下指令。

阅读全文

0 0