03、AngularJs的模块与控制器
2015-05-02 11:01
253 查看
大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序。而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的。同时,模块允许声明来描述应用中依赖关系,以及如何进行组装和启动:
1、AngularJs的模块是组织业务的一个框架,在一个模块中定义多个服务。当引入一个模块的时候,就可以使用这个模块提供的一种或者多种服务。
2、AngularJs本身的一个默认的模块是ng,ng模块提供了$http,$scope等等的服务。
3、服务只是AngularJs提供的多种机制中的一种,其他的还有指令(directive),过滤器(filer)以及其他的配置信息。
4、在AngularJs中,也可以在已有的模块中定义一个服务,也可以先定义一个模块,然后在新模块中定义新的服务。
5、在AngularJs中,服务是需要显示的声明依赖(引入)关系的,让ng自动引入服务中。
上面是模块跟控制器的定义方式。我们使用augularjs的module方法定义一个模块 ngApp,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。
我们使用augularjs的controller方法定义一个控制器firstController。在html页面中ng-app="ngApp"是定义了这个模块的控制位置,而ng-controller="firstController"则是定义了控制器的作用区域。
本篇中的示例代码运行的结果如下:
1、AngularJs的模块是组织业务的一个框架,在一个模块中定义多个服务。当引入一个模块的时候,就可以使用这个模块提供的一种或者多种服务。
2、AngularJs本身的一个默认的模块是ng,ng模块提供了$http,$scope等等的服务。
3、服务只是AngularJs提供的多种机制中的一种,其他的还有指令(directive),过滤器(filer)以及其他的配置信息。
4、在AngularJs中,也可以在已有的模块中定义一个服务,也可以先定义一个模块,然后在新模块中定义新的服务。
5、在AngularJs中,服务是需要显示的声明依赖(引入)关系的,让ng自动引入服务中。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app="ngApp"> <div ng-controller="firstController"> <input type="text" ng-model="name"/> {{name}} </div> </body> <script type="text/javascript" src="../public/javascripts/lib/angular.js"></script> <script type="text/javascript"> angular.module('ngApp', []).controller("firstController",function($scope){ $scope.name="xixi"; }); </script> </html>
上面是模块跟控制器的定义方式。我们使用augularjs的module方法定义一个模块 ngApp,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。
我们使用augularjs的controller方法定义一个控制器firstController。在html页面中ng-app="ngApp"是定义了这个模块的控制位置,而ng-controller="firstController"则是定义了控制器的作用区域。
本篇中的示例代码运行的结果如下:
![](http://images.cnitblog.com/blog2015/337816/201505/021153572405844.png)
相关文章推荐
- angularjs 模块与控制器 (多个模块module?? 多个控制器controller??)
- angularjs的使用:模块,服务,控制器(2)
- 【AngularJs】模块和控制器
- AngularJS 模块与控制器
- angularjs的作用域、ng-repeat、模块、控制器
- AngularJS模块与控制器
- AngularJS系列——作用域、控制器、模块和服务
- AngularJS之基础-3 控制器(基本语法)、模块(使用模块注册控制器)
- AngularJS模块加载
- angularjs中$http模块POST请求request payload转form data
- 03 Python 文件系统 访问权限 函数 类与面向对象 自定义模块
- AngularJS(02)---控制器
- Python进阶03 模块
- AngularJS中控制器之间通信方法
- yii 获取当前模块名、控制器名 、动作名
- AngularJS-6-控制器
- AngularJS 控制器函数
- thinkphp3.2访问后台Admin模块报错,找不到控制器
- AngularJS 模块
- AngularJS 模块