角企业级开发——MVC之控制器详解

　　

　　

AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端剩余的服务中,就可以开发轻量级AngularJS应用。

　　

涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。

　　

　　

在AngularJS的控制器中,构造函数会有<代码>美元范围> ng-controller> )将被创建,并作为一种可注入的参数传递给控制器& # 8203;& # 8203;的构造函数为<代码>美元范围。

　　

如果控制器使用<代码>控制器作为语法附加到DOM上,那么控制器实例将被分配给新美元的范围范围,并且多了一个和作为同名的属性,然后把自己指向这个属性,就方便我们访问了。

　　

　　

<强> 3.1在控制器中初始化模型(添加属性)

　　

创建控制器并将它附加到DOM元素之后,AngularJS会创建一个子作用域。子作用域保存着对应控制器的数据模型。子作用域可以通过<代码> 范围美元来获取。

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”ng-app=癿yApp”比; 　　 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> AngularJS控制器Demo 　　& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/angular.min.js "比; 　　 　　& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/app.js " charset=皍tf - 8”祝辞& lt;/script> 　　& lt;/head> 　　 　　& lt;身体ng-controller=癕ainController”比; 　　& lt; p> {{username}} & lt;/p> 　　& lt; p>{{年龄}}& lt;/p> 　　& lt;/body> 　　 　　& lt;/html> 　　之前 　　 　　 　　 　　(函数(){ 　　使用严格的; 　　角。模块(“myApp”, []) 　　范式(“MainController”,[美元范围,函数(范围美元){ 　　$ scope.username=發eeli”; 　　scope.age=28美元; 　　})); 　　})(); 　　 　　

<强> 3.2在控制器中附件行为(添加事件或方法)

　　

附加行为的方式是把方法或事件添加到<代码> 对美元范围象上,以便在控制器对应的视图中使用到改方法。也有很多方法是处理业务的,也是附加到<代码> 对美元范围象上。
　　<代码> ng-click> addItem> addItem 方法。

　　

视图上的<代码> ng-click ,<代码> ng-model 和<代码> ng-repeat> 　　

　　

因为控制器是附加到DOM元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。

　　

<强> 4.1视图中控制器并列

　　

各个控制器从附加DOM元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的<代码> 对美元范围象只能访问和调用该控制器范围内的属性和方法。

　　

<强> 4.2视图中控制器嵌套

　　

默认情况下,AngularJS在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性,子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过<代码>父> 　　

　　

AngularJS提供<代码> 范围美元方式来处理控制器。代码如下:

　　 　　 　　& lt; div ng-app=癿yApp”比; 　　& lt; div ng-controller=癕ainController”比; 　　& lt; p>你好{{名称}}& lt;/p> 　　& lt;/div> 　　& lt;/div> 　　 　　应用var=角。模块(“myApp”, []); 　　app.controller (“MainController”,[美元范围,函数(范围美元){ 　　$ scope.name=笆澜纭！? 　　})); 　　之前 　　 　　

AngularJS处理控制器提供一种作用域别名的方式,其实就是将模型直接绑定控制器的实例上。
　　

　　

,代码如下:

　　 　　 　　& lt; div ng-app=癿yApp”比; 　　& lt; div ng-controller=癕ainController mainCtrl”比; 　　& lt; p>你好{{名称}}& lt;/p> 　　& lt;/div> 　　& lt;/div> 　　 　　应用var=角。模块(“myApp”, []); 　　app.controller (MainController,函数(){ 　　this.name="世界。”; 　　}）; 　　

角企业级开发——MVC之控制器详解