Angular入门02- Module模块、Controller控制器
2017-01-23 17:05
453 查看
AngularJS中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。
即:angular.module() 用来注册一个应用模块
angular.module(‘myApp’, [注入的对象列表]); ——参数必须是两个!!!
作用:在其回调里,通过$rootScope这个对象上挂属性
“$rootScope”是angular的顶级作用域(angular中作用域即$scope对象或“\$rootScope”对象,在它们内用于挂载页面数据属性或方法)
实例:使用angular写一个时间实时刷新
1)、定义: app.controller(“参数一”,“参数二”)
参数一:控制器名称,用于和视图绑定
参数二:控制器初始化的回调函数,可以传入$scope参数来获取当前“控制器”的作用域(局部作用域);
2)、关联控制器,与视图建立联系:
ng-controller指令
2.1 什么是控制器
AngularJS中的控制器就是一个函数,用来向视图的作用域中添加额外的功能。
页面上创建一个新的控制器时,AngularJS会创建一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可。
2.2 控制器的作用
为应用程序创建一个作用域,具体在于$scope对象从VM端向View传递信息;增强视图。
控制器在AngularJS中的作用是增强视图。具体的体现在于$scope对象上面,$scope对象用来从数据模型向视图传递信息。同时,它也可以用来设置事件监听器,同应用的其他部分进行交互,以及创建与应用相关的特定业务逻辑。
2.3 简单使用
多个controller
html中绑定事件
2.4 多个控制器
在angular中每定义一个controller就会创建一个scope作用域,在angular中的作用域其实和JS中的作用域是类似的,可以把$rootScope看成是全局的作用域,而$scope作为局部作用域是可以嵌套的,也有作用域链的存在
例:
即:angular.module() 用来注册一个应用模块
一、模块定义
AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。angular.module(‘myApp’, [注入的对象列表]); ——参数必须是两个!!!
var app=angular.module('app',[]); //注意:注册应用必须写两个参数,即使没有依赖 var app2=angular.module("app"); console.log(app===app2); //true //只写一个参数代表引用模块
run方法
run:初始化模块,运行一个模块作用:在其回调里,通过$rootScope这个对象上挂属性
“$rootScope”是angular的顶级作用域(angular中作用域即$scope对象或“\$rootScope”对象,在它们内用于挂载页面数据属性或方法)
var app=angular.module('app',[]); app.run(function($rootScope){ $rootScope.user={ name:'sophie', age:24 } })
//html中 <div > {{user.name}}--{{user.age}} </div>
实例:使用angular写一个时间实时刷新
//注册应用 var app=angular.module('app',[]); //初始应用 app.run(function($rootScope,$interval){ //使用定时器每秒 $interval(function(){ $rootScope.time=new Date().toLocaleString(); },1000) })
二、Controller控制器
语法:1)、定义: app.controller(“参数一”,“参数二”)
参数一:控制器名称,用于和视图绑定
参数二:控制器初始化的回调函数,可以传入$scope参数来获取当前“控制器”的作用域(局部作用域);
2)、关联控制器,与视图建立联系:
ng-controller指令
2.1 什么是控制器
AngularJS中的控制器就是一个函数,用来向视图的作用域中添加额外的功能。
页面上创建一个新的控制器时,AngularJS会创建一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可。
2.2 控制器的作用
为应用程序创建一个作用域,具体在于$scope对象从VM端向View传递信息;增强视图。
控制器在AngularJS中的作用是增强视图。具体的体现在于$scope对象上面,$scope对象用来从数据模型向视图传递信息。同时,它也可以用来设置事件监听器,同应用的其他部分进行交互,以及创建与应用相关的特定业务逻辑。
补充:
AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。2.3 简单使用
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入Angular框架 --> <script src="../vendor/angular.min.js"></script> </head> <body > <!--关联controller: ng-controller指令 --> <div ng-controller="myCtrl"> {{msg}} </div> <script> //注册应用 var app=angular.module('app',[]); //定义controller app.controller("myCtrl",function($scope){ $scope.msg="hello world" }) </script> </body> </html>
多个controller
<script> //注册应用 var app=angular.module('app',[]); //初始应用 app.controller("myCtrl",function($scope){ $scope.msg="hello world" $scope.handleClick=function(){ console.log("1被点击") } }) app.controller("myCtrl2",function($scope){ $scope.msg="hello u" $scope.handleClick=function(){ console.log("2被点击") } }) </script>
html中绑定事件
<div ng-controller="myCtrl" ng-click="handleClick()"> {{msg}} </div> <div ng-controller="myCtrl2" ng-click="handleClick()"> {{msg}} </div>
2.4 多个控制器
在angular中每定义一个controller就会创建一个scope作用域,在angular中的作用域其实和JS中的作用域是类似的,可以把$rootScope看成是全局的作用域,而$scope作为局部作用域是可以嵌套的,也有作用域链的存在
例:
/* controller.js */ //注册应用 var app=angular.module("app",[]); //定义controller app.controller('myCtrl1',function($scope){ $scope.name="张三"; }) app.controller('myCtrl2',function($scope){ $scope.name="李四"; }) <!--视图部分--> <div ng-controller="myCtrl1"> {{name}} <!--张三--> </div> <div ng-controller="myCtrl2"> {{name}} <!--李四--> </div>
相关文章推荐
- 一、angular:module-Controller-Model-View (模块-控制器-模型-视图);异步请求$http
- Angular入门级教程三 Angular 中的控制器(controller)
- angularjs 模块与控制器 (多个模块module?? 多个控制器controller??)
- Angular快速入门2 ---控制器(controller)
- (三)Angular控制器,Module.controller() 控制器,单向绑定和双向绑定
- angular模块控制器分离入门一
- Ember.js 入门指南——控制器(controller)
- ASP.NET MVC 5 入门教程 (2) 控制器Controller
- ASP.NET MVC 5 入门教程 (2) 控制器Controller
- Sencha Touch 2 快速入门系列(八) -- 控制器(Controller)
- AngularJs angular.Module模块接口配置
- Ember.js 入门指南——控制器(controller)
- Asp.net MVC3.0 入门指南 2.控制器Controller
- angularjs controller控制器注入对象顺序
- Python体验(02)-模块Module
- angular-模块Module
- angularJS controller 控制器获取控制父级标签
- Sencha Touch 2 快速入门系列(八) -- 控制器(Controller)
- AngularJs angular.Module模块接口配置
- Asp.net mvc 3.0入门教程之二------控制器Controller