Ⅰ.AngularJS的点点滴滴--引导
AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧
###页面引导实例化
* * *
######1.自动实例化
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-app="app">1+2={{1+2}}</body>
<script>angular.module('app',[])</script>
</html>
```
>如果不写*app*这个值那么script的内容可以不写
######2.手动实例化(主要通过js来引导)
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body>1+2={{1+2}}</body>
<script>
angular.module('app',[])
.conifg(function(){})
.run(function(){alert('start');});
angular.bootstrap(document, ['app']);
</script>
</html>
```
>* 为什么声明一个模块后面有一个中括号?
>* 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块,否则就声明失效啦
>* config的方法可以配置模块,run是在模块执行前所执行的方法
###模块的依赖调用
* * *
```javascript
angular.module('route',[]);
angular.module('app',['route']);
```
>就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块
###模块的控制器(*$scope*这个参数即为控制器的上下文)
* * *
######1.调用模块的*controller*方法即可声明一个控制器而且返回当前模块所以可以用级联,
```html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-controller="a">{{data}}</body>
<script>
angular.module('app.controller',[])
.controller('a',['$scope',function($scope){
$scope.data=1;
}]);
angular.module('app',['app.controller']);
angular.bootstrap(document, ['app']);
</script>
</html>
```
>* 为什么声明一个*$scope*这个变量?
>* 因为当进行压缩js代码的时候变量名称改变,为了第一个参数为*$scope*这个变量而设计的,
>* 所以可以写成
```javascript
angular.module('app.controller',[])
.controller('a',['$scope',function(c){
c.data=1;
}]);
```
######2.直接声明一个全局方法
```javascript
function a(a){c.data=1;}
a.$inject = ['$scope'];
angular.module('app',[]);
angular.bootstrap(document, ['app']);
```
>*controller*的*$inject*对象也是同上原因声明第一个参数为*$scope*,如果不压缩可以忽略
###数据绑定
* * *
>数据绑定是用了2个大括号,并且获取*controller*中的数据,如果使用指令则{{}}可以省略直接写属性
* * *
* 本文链接地址:[Ⅰ.AngularJS的点点滴滴--引导](http://www.cnblogs.com/cnlj/p/3436309.html)