1.第一个小例子(双向数据绑定)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script> </head> <body ng-app> <input ng-model="name" value=""/>{{name}} </body> </html>
ng-app是告诉angularjs哪一块开始归angularjs去解析，管理
ng-model是数据模型绑定，是双向的绑定，modle和view改变任何一个，都会变化
2.控制器 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body ng-app> <div ng-controller="firstController"> <input type="text" ng-model="username"/>{{username}} </div> </body> </html>
ng-controller是控制器，表示控制该模块
index.js
var firstController=function($scope){ //申明一个model $scope.username="suncj"; }
参数必须是$scope，这是一个作用域
3.ng-bind是为了解决{{}}取值加载慢时，会出现{{}}，例如{{username}}，如果angularjs加载慢的话，页面会先出现{{username}}，这样很不好看，为了解决这个问题可以用ng-bind
<div ng-bind="username"></div>
这样的话，如果没加载完，页面什么也不会显示，有数据才会显示。
如下，效果是一样的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body ng-app> <div ng-controller="firstController"> <input type="text" ng-model="username"/> <span ng-bind="username"></span> </div> </body> </html>
4.$apply的运用
$apply可以触发脏检查，让变量改变时通知修改
例如时间的动态显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../angular-1.3.0-beta.4/angular.min.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body ng-app> <div ng-controller="firstController"> {{date}} </div> </body> </html>
index.js
var firstController=function($scope){ $scope.date=new Date(); setInterval(function(){ $scope.$apply(function(){ $scope.date=new Date(); //会去触发脏检查，时间会动态改变 }) },1000) }
这样页面就会动态显示时间，如果不用$apply则不会动态改变
如下就不会变化（时间改变时，页面确没变化）
var firstController=function($scope){ $scope.date=new Date(); setInterval(function(){ $scope.date=new Date(); },1000) }