angular之控制器(0)

一、控制器的含义

在angularJS中,controlle是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为

二、控制器的作用

1. 控制 AngularJS 应用程序的数据

2.对$scope对象进行初始化(可以理解为每个控制器都对应一个$scope,每个控制器里面的$scope都是互相封闭的,互不影响。。除了嵌套控制器。留在以后讲$scope的作用域)

三、控制器的意义

通过控制器实现代码的业务逻辑代码。

注意:控制器的设计出发点是封装单个视图的业务逻辑,因此,不要进行以下操作:

  • DOM操作    应当将DOM操作使用指令/directive进行封装。
  • 变换输出形式   应当使用过滤器/filter对输出显示进行转化。
  • 跨控制器共享代码   对于需要复用的基础代码,应当使用服务/service进行封装

四、控制器的一次性

控制器仅在AngularJS对HTML文档进行编译时被执行一次。从这个角度看, 就更容易理解为何将控制器称为对scope对象的增强:一旦控制器创建完毕,就意味着scope对象上的业务模型构造完毕,此后就不再需要控制器了- scope对象接管了一切。

ps:理论是为了更好的理解代码。而不是纯粹的光看。多说无益,亮代码吧!

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>控制器演示</title>
 6 </head>
 7 <body>
 8     <div ng-app="myApp" ng-controller="myCtrol">
 9         {{ name }}
10     </div>
11     <script type="text/javascript" src="js/angular.js"></script>
12     <script type="text/javascript">
13         //定义一个名称为myApp的angular的模块对象app
14         var app = angular.module(‘myApp‘,[]);
15         //通过这个模块对象app创建一个控制器。后面通过数组的方式写法是避免代码压缩存在的问题。
16         //(代码开始写的时候最好使用这种方式。有的人说小项目就不压缩,那小项目还用毛的angular呀,jQuery都能搞定。)
17         app.controller(‘myCtrol‘,[‘$scope‘,function($scope){
18             $scope.name = "cygnet";
19         }]);
20
21         //扩展知识点,其实除了装逼也没有什么卵用
22         var version = angular.version;
23         console.log("当前angular的主版本号:" +version.major);
24         console.log("当前angular的次版本号:" +version.minor);
25         console.log("当前angular的小版本号:" +version.dot);
26         console.log("当前angular的代码名称:" +version.codeName);
27         console.log("当前angular的版本号:" +version.full);
28     </script>
29 </body>
30 </html>
时间: 2024-10-12 21:05:17

angular之控制器(0)的相关文章

Angular Js 控制器

在Angularjs中用ng-controller指令定义了应用程序中的控制器:例如: <div ng-app="myApp" ng-controller="myCtrl"> 姓: <input type="text" ng-model="firstName"><br> 名: <input type="text" ng-model="lastName&qu

Angular 2 从0到1 (三)

作者:王芃 [email protected] 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular

angular(05)---控制器

5.0控制器 控制器在AngularJS中的作用是增强视图. 当我们在页面上创建一个新的控制器时,AngularJS会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope.由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,一起存储数据模型之外的状态维护操作. 他是视图和scope之间的桥梁. 5.1控制器嵌套 Angu

angular js模块,angular js控制器

AngularJS 模块 var app = angular.module('myApp', []); AngularJS 控制器 app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); AngularJS 实例 <div ng-app="myApp" ng-controller="myCtr

angular.js小知识总结

angular-watch.html 代码如下: <script> var app = angular.module('app',[]); app.controller('ctrl',function($scope){ $scope.init = { price : 20,//单价 count : 5, //数量 money : 3 //运费 }; $scope.a = 0; $scope.$watch('init.count',function(newVal,oldVal){ console

angular input标签只能单向传递数据的问题

angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px " ng-init = "init()"> <ion-pane> <ion-content zooming = "true" class = "no-header"> <

angular checkbox 全选和反选功能

最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用在一起,实现新一代的技术完美结合.废话就不多说了,下面看代码: 1.html 页面: <table class="table" >    <!--主机组主机列表-->    <tr style="background-color: #555555;c

bootstrap 有些控件需要调用锚点,会与angular 路由 冲突

最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 angular的控制器中添加这两个方法. bootstrap的轮播图部分代码 <!-- Controls --> <a class="left carousel-control" href="" ng-click="prev()" rol

Angular2 Hello World 之 2.0

最近angular2正式版发布了,现在就趁热接着记录一下2.0版的Hello World.据说由RC6升级到2.0代码改动不是很大,在写的时候也感觉改动不是很大,这次记录还是以asp.net core 空项目模板为基础,本着在此基础上添加最少的代码来实现Hello World,没用的代码全部清掉(用的时候再引入). 一.准备工作. 首先,创建一个asp.net core空项目,并在Startup.cs类中添加“静态文件支持”:然后,在项目根目录下添加NPM配置文件.Gulp配置文件和typesc