angularJs 常用知识点总结 自定义模块 ngRoute 单页面 代码片段进行传参 动态引入页头页尾 Animation 动画 表单
ng四大特征：
①采用了MVC的设计模式
②双向数据绑定（view和model）
③依赖注入
④模块化设计
一、如何自定义模块并进行调用？？
自定义模块：angular.module()
模块之间如何相互之间的调用： angular.module('myApp02',['ng','myApp01']);
模块化好处：体现“高内聚低耦合”的设计原则，提高代码的复用率，降低测试难度。
模块分类：
①ng官方提供的模块
ng\ngAnimate\ngRoute\ngTouch...
②用户自定义的模块
angular.module();
二、ng包含哪些模块
一个angularJS的模块可以包含哪些组件？？
①controller：维护模型数据
②directive：用在view中 输出/绑定Model数据
③function：forEach\toJson\fromJson
④filter：结果的筛选、过滤、格式化
⑤service：提供变量或者方法的服务
。。。
三、SPA应用以及通过ngRoute来实现的方式
单页面应用的工作原理：
①url
http://127.0.0.1/index.html#/路由地址
②浏览器请求index.html,解析路由地址
③查找路由词典，#/start ==>tpl/start.html
④获取当前路由地址 对应的真实模板的地址 start.html
⑤发起ajax请求，获取目标模板页面，将服务器返回的代码片段，插入到当前的DOM树，实现局部刷新
使用ngRoute模块来实现SPA应用的基本步骤：
①创建完整的HTML页面 index.html,引入angular.js,angular-route.js
②创建自定义的模块，指定依赖于ng\ngRoute
③指定容器，盛放代码片段 ngView
④创建模板页面
⑤配置路由词典
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'startCtrl'})
⑥测试在地址栏中 输入不同的路由地址的时候，能否将代码片段加载进来。
四、代码片段之间的跳转
模板页面之间 执行跳转的3种方式：
①直接修改地址栏中的url
②使用超链接 <a href='#/路由地址'></a>
③$location.path('/路由地址')
如果有多个代码片段，都需要通过js的方式来跳转，为每个代码片段去创建控制器 去定义jump方法，这个是不合理的，可以这么处理：借助父控制器定义方法，然后让子控制器去调用。
配置代码片段的控制器的方式：
①ng-controller
②配置路由词典设置
$routeProvider.when('/myLogin',{
templateUrl:'tpl/login.html',
controller:'loginCtrl'
});
使用ngRoute来实现一个SPA应用。
创建一个完整的html--》index.html;创建2个代码片段 --》start.html register.html
start.html --> 点击按钮跳转到register,
register.html -->a 跳转到start.html
从register跳转到start
index.html 代码如下：
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <script src="js/angular-route.js"></script> 7 <title></title> 8 </head> 9 <body ng-controller="myCtrl2"> 10 <!-- 指定盛放代码片段的容器 --> 11 <div ng-view> 12 13 </div> 14 <script> 15 // 创建模块时指定依赖 ng和nhRoute 16 var app = angular.module('myApp',['ng','ngRoute']); 17 // 配置路由词典 18 app.config(function ($routeProvider) { 19 $routeProvider 20 .when('/myLogin', { 21 templateUrl: 'tpl/start.html', 22 controller:'myCtrl' 23 }) 24 .when('/myMain', { 25 templateUrl: 'tpl/register.html' 26 }) 27 .otherwise({redirectTo: '/myLogin'}); 28 }); 29 app.controller('myCtrl',['$scope','$location',function($scope,$location){ 30 $scope.numb = 10; 31 $scope.jump = function () { 32 $location.path('/myMain'); 33 } 34 }]) 35 app.controller('myCtrl2',['$scope','$location',function($scope,$location){ 36 $scope.jump = function(target){ 37 $location.path(target); 38 } 39 }]) 40 </script> 41 </body> 42 </html>
start.html 代码如下：
1 <!--<div ng-controller="myCtrl">--> 2 <h1>页面1</h1> 3 <p>{{numb}}</p> 4 <a href="#/myMain">跳转带哦页面二</a> 5 <p><button ng-click="jump()">跳转带哦页面二</button></p> 6 <p><button ng-click="jump('/myMain')">跳转带哦页面二(带参数跳转)</button></p> 7 <!--</div>-->
register.html代码如下：
1 <h1>页面2</h1> 2 <p><button ng-click="jump('/myLogin')">跳转带哦页面一(带参数跳转)</button></p>
五、代码片段进行传参
使用ngRoute进行参数的传递：
①明确发送方和接收方
发送方：register
接收方：start
②配置接收方的路由以及接受参数
.when('/myStart',{
templateUrl:'tpl/start.html'
})
.when('/myStart/:id',{
templateUrl:'tpl/start.html'
})
如果接受id，
借助ngRoute服务
$routeParams.id
③发送参数
<a href='#/myStart/123'></a>
$location.path('/myStart/123')
实现SPA应用
完整：manager.html
代码片段：check.html pay.html send.html
要求：
①能够实现不同页面的跳转
②check.html-->超链接跳转到pay.html，传入price,
pay.html接受参数并显示在页面中
pay.html--》按钮 点击跳转到send.html
send.html-->超链接跳转到check.html
HTML代码如下：
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <script src="js/angular-route.js"></script> 7 <title></title> 8 </head> 9 <body ng-controller="myCtrl"> 10 <div ng-view></div> 11 <script> 12 var app = angular.module('myApp',['ng','ngRoute']); 13 app.config(function($routeProvider){ 14 $routeProvider 15 .when('/check',{ 16 templateUrl: 'tpl/check.html' 17 }) 18 .when('/pay',{ 19 templateUrl: 'tpl/pay.html' 20 }) 21 .when('/pay/:price',{ 22 templateUrl: 'tpl/pay.html', 23 controller:'myCtrl2' 24 }) 25 .when('/send',{ 26 templateUrl: 'tpl/send.html' 27 }) 28 .otherwise({redirectTo:'/check'}); 29 }); 30 app.controller('myCtrl', 31 ['$scope','$location',function($scope,$location){ 32 $scope.jump = function(target){ 33 $location.path(target); 34 } 35 }]); 36 app.controller('myCtrl2', 37 ['$scope','$routeParams',function($scope,$routeParams){ 38 $scope.getPrice = $routeParams.price; 39 console.log($scope.getPrice); 40 }]); 41 </script> 42 </body> 43 </html>
check代码如下：
1 <h1>check页面</h1> 2 <p><button ng-click="jump('/pay')">跳转到pay页面</button></p> 3 <p><a href="#/pay">跳转到pay页面</a></p> 4 <p><a href="#/pay/123455">跳转到pay页面 传参</a></p> 5 <p><button ng-click="jump('/pay/123455')">跳转到pay页面 传参</button></p>
pay 代码如下：
1 <div ng-include="'tpl/include/header.html'"></div> 2 <h1>pay页面</h1> 3 <p><button ng-click="jump('/send')">跳转到send页面</button></p> 4 <p>{{getPrice}}</p> 5 <div ng-include="'tpl/include/footer.html'"></div>
send 代码如下：
1 <h1>send页面</h1> 2 <p><button ng-click="jump('/chexk')">返回到check页面</button></p>
六、动态引入页头页尾
ngInclude：
<ANY ng-include="'tpl/include/header.html'"></ANY>
注意：引入页头/页尾文件路径时： 双引号 单引号 文件路径
七、其他模块
ngAnimate 支持js动画和css动画
①通过script 引入angular-animate.js到工程中
②指定自定义的模块，要依赖于ngAnimate
③设置cssngAnimate模块为ngView添加ng-leave和ng-leave-active、ng-enter和ng-enter-active.
HTML示例代码
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/test.css"/> 6 <script src="js/angular.js"></script> 7 <script src="js/angular-animate.js"></script> 8 <title></title> 9 </head> 10 <body> 11 12 <div class="page" ng-view> 13 14 </div> 15 16 </body> 17 </html>
相关css代码如下：
1 body{ 2 overflow: hidden; 3 } 4 .page { 5 position: absolute; 6 width: 100%; 7 } 8 .page.ng-enter, 9 .page.ng-leave { 10 -webkit-transition: .5s linear all; 11 -moz-transition: .5s linear all; 12 -ms-transition: .5s linear all; 13 -o-transition: .5s linear all; 14 transition: .5s linear all; 15 } 16 /*准备离开*/ 17 .page.ng-leave { 18 left: 0; 19 opacity: 1; 20 } 21 /*离开完成*/ 22 .page.ng-leave.ng-leave-active { 23 left: -100%; 24 opacity: 0; 25 } 26 /*刚开始进入*/ 27 .page.ng-enter { 28 left: 100%; 29 opacity: 0; 30 } 31 /*进入完成*/ 32 .page.ng-enter.ng-enter-active { 33 left: 0; 34 opacity: 1; 35 }
八、表单
在ng中，专门针对表单和表单中的控件，提供了一些属性，用于验证控件值的状态。
$pristine 未输入过
$dirty 已输入过
$valid 验证通过
$invalid 验证未通过
$error 验证时的错误信息
示例代码如下：
1 <!DOCTYPE html> 2 <html ng-app="myForm"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="formCtr"> 10 <form name="my_form" ng-submit="print()"> 11 <div> 12 <h1>欢迎登录</h1> 13 <p> 14 <label for="uname">用户名：</label> 15 <input type="text" ng-model="uname" name="uname" id="uname" required/> 16 <span ng-show="my_form.uname.$error.required && my_form.uname.$dirty"> 17 用户名不能为空！！！ 18 </span> 19 </p> 20 <p> 21 <label for="upwd">密码：</label> 22 <input type="password" ng-model="upwd" name="upwd" id="upwd" required/> 23 <span ng-show="my_form.upwd.$error.required && my_form.upwd.$dirty"> 24 密码不能为空！！！ 25 </span> 26 <br/> 27 <input type="checkbox" id="check" name="check"/> 28 <label for="check">记住密码</label> 29 </p> 30 <p> 31 <input type="submit" value="提交" ng-disabled="my_form.$invalid"/> 32 </p> 33 </div> 34 </form> 35 </div> 36 <script> 37 var app = angular.module('myForm',['ng']); 38 app.controller('formCtr',['$scope',function($scope){ 39 $scope.print = function(){ 40 var coieUser = check.checked 41 console.log('name is '+$scope.uname+' password is '+$scope.upwd+ ' is remember user? '+coieUser); 42 } 43 44 }]); 45 </script> 46 </body> 47 </html>
浙公网安备 33010602011771号