我的AngularJs第一课

1.客户端应用框架，适用于SPA单页面网站开发，CRUD应用，适用于前后端数据交互比较频繁的页面。

2.小例子：

<script>
function Aaa($scope){
$scope.name = "hello";
}
</script>

<div ng-controller = "Aaa" //控制器>
<p>{{name}}</p>
</div>

// 输出：holle

3.作用域

scope后带的属性只能在有该函数名的元素内使用rootScope后带的属性能在全部元素内使用

4.

function Aaa($scope,$rootScope){
$scope.name = 'hello';
$scope.age = '40';
$rootScope.age = '20';
}
function Bbb($scope){
$scope.name = 'hi';
$scope.age = '30';
}

<div ng-controller = "Aaa" //控制器>
<p>{{name}}</p>
<p>{{age}}</p>
<div ng-controller = "Bbb" //控制器>
<p>{{name}}</p>
<p>{{age}}</p>
</div>
</div>//如果Bbb中没有age则向上Aaa中先找scope的age，如果没有则显示rootscope中的age

5.依赖注入

自动传入参数；所以scope,rootScope参数不能修改，否则无法知道参数的作用。

6.在元素中中要写入ng-app初始化。才能启动AngularJs；好处：可以在想要用AngularJs得元素中使用。

7.AngularJs的双向数据绑定

数据改变影响视图；

例子：

function Aaa($scope,$timeout){
$scope.name = 'holle';
$timeout(function(){$scope.name =  'hi'},2000);
}

<div ng-controller = 'Aaa'>
<p>{{name}}</P>
</div>

8.ng-click=””

例子：

<script>
function Aaa($scope){
$scope.name = "hello";
}
</script>

<div ng-controller = "Aaa" ng-click="name='hi'">
<p>{{name}}</p>
</div>

//输出：点击将P中的name改成hi

9.视图改变影响数据。

<script>
function Aaa($scope){
$scope.name = "hello";
}
</script>

<div ng-controller = "Aaa" //控制器>
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>//修改input影响p的name值