ng
1, AngularJS四大特性 (1)MVC模型 (2)双向数据绑定 (3)DI(依赖注入) (4)模块化编程 一,声明,ng的作用范围:<html ng-app> 2,Angular表达式 提示:angular表达式的本质是一段JS代码,先调用eval()执行出式子的值,再输出在当前位置上。 <ANY>{{ 式子 }}</ANY> 总结: (1){{}}可以输出各种数学/比较/逻辑/三目运算/调用string对象的方法/模型变量的值; (2)但不能调用全局函数、不能创建对象、普通JS页面变量的值如:new Date()。 (3){{}}会发生元素内容闪动现象,可以使用ngBind指令解决此问题 如:<h1 ng-Bind="'hello'.length"></h1> //模块控制器 <body ng-controller="cont"> {{counter}} <script> angular.module('myApp',['ng']) .controller('cont', [ '$scope', function($scope){ $scope.counter='Tom'; } //$scope和$rootScope,$scope覆盖rootScope ]) </script> </script> </body> //模型遍历 <h1 ng-init="pel={name:'tom',age:23}"></h1> <ul> <li ng-repeat="d in pel"><span>{{d}}</span></li> </ul> <hr/> <ul> <li ng-repeat="(k,v) in pel"><span>{{k}}</span>--------------<span>{{v}}</span></li> </ul> <hr/> <h1 ng-init="many=[{name:'tom',age:23},{name:'angla',age:64}]"></h1> <ul> <li ng-repeat="d in many"><span>{{$index}}</span>-----<span>{{d.name}}</span><span>----</span><span>{{d.age}}</span> </li> </ul> 3,常见dome操作指令,ng-show,ng-hide 4,Angluar模块中的组件——service (1)$http:提供异步的AJAX请求服务 .controller('名称', function($http){ $http.get('xx.php').success(fn) }) (2)$interval:提供周期性定时器服务 .controller('名称', function($interval){ $interval(fn, delay); }) 5,数据双向绑定 (1)方向1:把Model数据绑定到View(Model=>View):只要模型数据此后再改变,View会同步改变。可以实现此绑定的方法: 1){{ 模型数据名 }} 2)ngBind、ngRepeat、ngShow...指令 (2)方向2:把View中数据绑定到Model(View=>Model):只要View中的数据一改变(各种表单输入项),Model中的数据也会同步改变。可以实现此绑定的方法: 1) ngModal指令 6.Angluar模块中的组件——filter——掌握 filter:对数据的呈现格式进行过滤和筛选 (1)number:把数字格式化为数字字符串 {{ 数字 | number : 小数位数 }} (2)currency:把数字格式化为货币字符串 {{ 数字 | currency : '货币符号' }} (3)lowercase:把字符串格式化为小写 {{ 字符串 | lowercase }} (4)uppercase:把字符串格式化为小写 {{ 字符串 | uppercase }} (5)date:把数字格式化为日期格式 {{ 数字 | date : 'yyyy-MM-dd HH:mm:ss'}} 7.AngularJS中的DI Dependency Injection,依赖注入 .controller('控制器名', function($http, $scope, $interval){ }) 控制器声明函数中,形参是必需的几个Angular对象,Angular会根据形参的名称,查找对应的提供者,创建该对象并传递进来(称为“依赖注入”)——依赖的形参先后顺序无所谓,但不能声明AnguarJS不认识的形参。 依赖注入,符合“最少知识原则/迪米特法则”设计原则。 若JS文件被压缩了,形参名会被简化为类似a、b、c的名称,会导致Angular无法根据形参进行注入!解决方法: .controller('控制器名', [ '$scope', '$http', '$interval', function(a, b, c){ a.ename='Tom'; b.get('1.php'); } ]) 8.AngularJS提供的模块——ngRoute Route:路由 ngRoute模块:负责解析RouteURL,发起AJAX请求,把返回的HTML片段加载到当前页面。 在SPA应用中的“伪页面切换”效果的原理: 整个应用只有一个“完整”的页面,其中有个空的容器元素; 使用JS解析客户端请求的URL后面的“#/”部分的内容,根据值发起异步的AJAX请求,服务器返回对应的页面(HTML片段),XHR对象将这些响应数据加载到“完整”页面的空容器中。 “伪页面切换”比传统的页面切换的优势: (1)伪页面切换底层使用的是AJAX技术,不会产生客户端惨白等待问题; (2)服务器返回的是HTML片段,不再是完整HTML,从而减少了数据传输量; (3)伪页面切换本质是同一个页面中不同的DIV之间切换,可以实现动画效果。 使用ngRoute模块的步骤: (1)项目目录中导入JS文件 angular.js + angular-route.js (2)创建一个“完整”的页面,导入 angular.js + angular-route.js (3)自定义JS文件中,声明angular.module,依赖于ng和ngRoute模块;模块中需要配置路由映射信息:哪个#/xxx对应哪个HTML片段页面;页面中声明ngView指令——用于盛放模板页 ngRoute会自动解析客户端请求地址中的#/xxx,发起AJAX请求,加载对应的HTMLL片段页面,到当前容器中。 angular.module('', ['ng', 'ngRoute']) .config(function($routeProvider){ $routeProvider .when('/route1', { templateUrl: 'xx.html' }) .otherwise({ redirectTo: '/route1' }) }) 为每个模板页面声明Model数据,有两种方式: (1)在module声明controller,在每个模板页面的根元素上,声明ngController指令,使用特定的controller (2)在配置路由地址映射时,指定每个地址所用的controller: .when('/xx', { templateUrl: 'xx.html', controller: 'xx' }) 如何在不同的模板页面("伪页面")之间跳转: (1)使用LINK <a href="#/route1"> (2)使用JS .controller('', function($scope, $location){ $scope.jump = function(){ $location.path( '/xx' ); } }) <button ng-click="jump( )"> 5.AngularJS提供的模块——ngAnimate ngAnimate:可以为很多的指令(ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass)添加动画效果。 使用步骤: (1)项目目录中导入JS文件 angular.js + angular-route.js + angular-animate.js (2)创建一个页面,导入 angular.js + angular-route.js + angular-animate.js (3)自定义JS文件中,声明angular.module,依赖于ng、ngRoute、ngAnimate模块 (4)手工编写要使用的动画效果: JS /CSS3 Transition / CSS3 Keyframes 注意:ngAnimate模块本身没有编写任何的动画效果,只是为即将要离开的ngView添加了.ng-leave.ng-leavea-active,为即将要进入的ngView添加了.ng-enter.ng-enter-active。需要程序员为这四个claas指定需要样式 .ng-leave: 要离开的元素,动画刚要开始时的样式 .ng-leave.ng-leave-active:要离开的元素,动画结束时的样式 .ng-enter: 要进入的元素,动画刚要开始时的样式 .ng-enter-active:要进入的元素,动画结束时的样式
.main-view-animate {
width: 100%;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.main-view-animate.ng-enter {
z-index: 999;
position: relative;
background-color: #f9f9f9;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0
}
.main-view-animate.ng-enter.ng-enter-active {
position: relative;
z-index: 2;
background-color: #f9f9f9;
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1
}
.main-view-animate.ng-leave {
background-color: #f9f9f9;
position: absolute;
top: 0
}
.main-view-animate.ng-leave-active {
opacity: .6
}