AngularJS.pptx

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;使用ngRoute模块需要注意的问题： (1)由于模板页面被客户端请求后挂载在index.htmlDOM树上，所以其中所有的图片等 外部资源文件的路径必须相对于index.html，而不是模板页面。 (2)使用ngRoute模块时，无需为模板页面中的某个元素单独设置ngController，只需要 在声明路由字典时设置整个模板页面所需要的控制器即可 .when(/路由地址, { templateUrl: xxx.html, controller: 控制器名 }) (3)在不同的模板页面间跳转可以采用两种方式：·超链接方式：a href=#/路由地址/a ·JS编程方式：button ng-click=jump( )/button $scope.jump = function(){ $location.path(/路由地址); } (4)index.html中，由于所有模板页面都是在ngView中切换，ngView外面的内容会始终 呈现。 ;官方提供的模块——ngAnimate ngAnimate可以支持JS、Transition、Keyframes动画，但它本身未提供任何的动 画效果，而是为上面三种技术提供了相应的“动画钩子(Hooks)” ng模块中提供的指令：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 和 ngClass默认都提供了动画钩子。 使用ngAnimate模块调用其CSS Transition动画钩子的步骤： (1)index.html引入angular.js和angular-animate.js。 (2)自定义模块中声明依赖于ngAnimate模块——特定的指令就会产生动画钩子。 (3)为ngView声明class，样式中指定transition动画； ;可以看到ngAnimate为即将要离开的ngView添加了 ng-leave和ng-leave-active 两个class， 为即将要进入的ngView添加了 ng-enter和ng-enter-active两个class。为这四个class编写 特定的样式即可。 .page { transition: all 3s linear; position: absolute; width: 100%;} /*要离开的ngView元素动画开始时的样式*/ .page.ng-leave { left: 0; opacity: 1;} /*要离开的ngView元素动画结束时的样式*/ .page.ng-leave.ng-leave-active { left: -100%; opacity: 0;} /*要进入的ngView元素动画开始时的样式*/ .page.ng-enter { left: 100%; opacity: 0;} /*要进入的ngView元素动画结束时的样式*/ .page.ng-enter.ng-enter-active { left: 0; opacity: 1;} ;项目补充知识点：页面包含 一个项目中的多个页面中可能包含完全相同的内容，如京东商城中的很多页面都有 完全相同的header和footer部分，若每个HTML都拷贝一遍相同的内容，就违反了DRY 设计原则(“不要重复你自己的代码”)，造成代码的维护困难 解决方法有如下几种： (1)使用Web服务器的SSI（ServerSideInclude）——修改Web服务器的配置文件 (2)使用服务器端动态编程语言进行页面的包含，如PHP: include(header.php); include(footer.php); 三个PHP页面会组成一个大的响应消息，一次性返回给客户端 (3)纯前端解决方案：用frameset或iframe——尽量少使用 (4)纯前端解决方案： 使用AJAX异步请求： 产品详情页.html: div id=header/div div主体内容/div div id=footer/div $(document).ready(function(){ $(#header).load(header.html); //XHR $(#footer).load(footer.html); //XHR }) AngularJS中提供了一个类似于方案4的AJAX解决方案——ngInclude指令： div ng-include= header.html 注意：ngInclude指令必须赋值为一