AngularJS学习笔记(1)
1.angularjs特性
mvc模式
模块系统
指令系统
依赖注入
双向数据绑定
2.$scope与$rootscope
$scope是局部作用域，$rootscope是全局作用域。 配合ng-controller使用，查找变量时会先从当前作用域（$scope）找到全局作用域（$rootscope）。
函数的形参$scope, $rootScope是不能修改的，testScope是在angular内部自动调用，这两个参数在内部调用时自动依赖注入了。这两个参数统一叫服务，一般服务以$开头。
function testScope($scope, $rootScope){ $scope.name = 'test'; $rootScope.age = 1; } <div ng-controller="testScope"> <p>{{name}}</p> </div> <p>{{age}}</p>
3.数据绑定
{{}}用于数据绑定，也可以使用ng-bind。
<p>{{txt}}</p>
或
<p ng-bind="txt"></p>
两者的却别在于{{}}html没有加载完毕{{txt}}回直接显示到页面，直到angular渲染该绑定数据（这种行为有可能将{{binding}}让用户看到）；而ng-bind则是在angular渲染完毕后将数据显示
4.ng-controller与ng-app
ng-controller 控制器 链接视图与模型数据之间的桥梁，可以根据需要引入多个控制器 ng-app 类似于初始化调用angular的指令，可以写到html任何标签，对相应标签的范围内angular起作用。 html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制； <html ng-app>
5.双向数据绑定
类似MVVM设计模式，当M(Model 数据)发生改变会自动让V(view 视图html)生改变，当v发生改变,也会自动改变M。 M->V: $timeout指令：类似setTimeout function testTimeout($scope,$timeout){ $scope.name = 'first'; $timeout(function(){ $scope.name = 'second'; },2000) } ng-click指令：类似onclick function testClick($scope){ $scope.name = 'first'; $scope.change = function(){ $scope.name = 'third'; } } <div ng-controller="testClick" ng-click="name='third'"> <p>{{name}}</p> </div> 或 <div ng-controller="testClick" ng-click="change()"> <p>{{name}}</p> </div> V->M: ng-model:讲值绑定到表单元素上 <input type="text" ng-model="yourName" placeholder="Enter a name here"/> <p>{{yourName}}</p>
5.currrency:过滤器
表达式|currency 格式化为美元：$表达式的值 表达式|currency:"￥" 格式化为人民币 ：￥表达式的值 function testCurrency($scope){ $scope.iPhone = { price : 50, num : 3 }; $scope.count = function(){ return $scope.iPhone.price * $scope.iPhone.num; } } <div ng-controller="testCurrency"> <p>价格：<input type="text" ng-model="iPhone.price"/></p> <p>数量：<input type="text" ng-model="iPhone.num"/></p> <p>{{ iPhone.price * iPhone.num}}</p> <p>{{ count()}}</p> <p>{{ iPhone.price * iPhone.num |currency}}</p> <p>{{ iPhone.price * iPhone.num |currency:'￥'}}</p> </div>
6.当前学习Demo
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script type="text/javascript" src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> <script type="text/javascript"> function testScope($scope, $rootScope){ $scope.name = 'test'; $rootScope.age = 1; } function testTimeout($scope,$timeout){ $scope.name = 'first'; $timeout(function(){ $scope.name = 'second'; },2000) } function testClick($scope){ $scope.name = 'first'; $scope.change = function(){ $scope.name = 'third'; } } function testCurrency($scope){ $scope.iPhone = { price : 5, num : 3, free : 10 }; $scope.newVal = ""; $scope.oldVal = ""; $scope.count = function(){ return $scope.iPhone.price * $scope.iPhone.num + $scope.iPhone.free; }; } </script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <br> <h1 ng-bind="yourName"></h1> <h1>Hello {{yourName}}!</h1> </div> <br/> <div ng-controller="testScope"> <p>{{name}}</p> </div> <p>{{age}}</p> <div ng-controller="testTimeout"> <p>{{name}}</p> </div> <div ng-controller="testClick" ng-click="change()"> <p>{{name}}</p> </div> <input type="text" ng-model="testName" placeholder="Enter a name here"> <p>{{testName}}</p> <div ng-controller="testCurrency"> <p>价格：<input type="text" ng-model="iPhone.price"/></p> <p>数量：<input type="text" ng-model="iPhone.num"/></p> <p>运费：<input type="text" ng-model="iPhone.free"/></p> <p>{{ iPhone.price * iPhone.num + iPhone.free}}</p> <p>{{ count()}}</p> <p>{{ iPhone.price * iPhone.num + iPhone.free |currency}}</p> <p>{{ iPhone.price * iPhone.num + iPhone.free |currency:'￥'}}</p> </div> </body> </html>
