AngularJS注入依赖路由总结
| 属性 |
描述
|
|
$dirty
|
表单有填写记录
|
| $valid | 字段内容是合法的 |
|
$invalid
|
字段内容是非法的 |
|
$pristine
|
表单没有填写记录 |
什么事依赖注入？
依赖注入是一种软件设计模式，在这种模式下，一个或者更多的依赖被注入到一个独立的对象中，然后成为该客户端的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变的松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖。
AngularJS提供很好的依赖注入机制。以下五个核心组件用来作为依赖注入：
value:是一个简单的JavaScript对象，用来向控制器传值。
factory:factory是一个函数用于返回值。在service和controller需要时创建。通常我们使用 factory 函数来计算或返回值
service:同上
provider:AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
constant:constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>void</title> 6 <link rel="stylesheet" href="css/main.css"> 7 <script type="text/javascript" src="js/jquery.js"></script> 8 <script type="text/javascript" src="js/angular.js"></script> 9 <script type="text/javascript" src="js/angular-route.js"></script> 10 </head> 11 <body ng-app="myApp"> 12 13 <div ng-controller="myCtrl"> 14 <button ng-click="count=count+1">点击加一</button><button ng-click="show_pink_div()">点击/隐藏出现一个粉红色的div</button> 15 <p>{{count}}</p> 16 <div class="pink" ng-hide="toggle"></div> 17 </div> 18 19 <div ng-controller="secondCtrl"> 20 {{name}} 21 <div runoob-directive></div> 22 </div> 23 24 <div ng-controller="valueCtrl"> 25 {{result}} 26 </div> 27 28 <h2>AngularJS 路由应用</h2> 29 <ul> 30 <li><a href="#/">首页</a></li> 31 <li><a href="#/computers">电脑</a></li> 32 <li><a href="#/printers">打印机</a></li> 33 <li><a href="#/phone">手机</a></li> 34 <li><a href="#/blabla">其他</a></li> 35 </ul> 36 <div ng-view></div> 37 </body> 38 </html> 39 <script type="text/javascript"> 40 var app=angular.module("myApp",['ngRoute']); 41 app.controller("myCtrl",function ($scope) { 42 $scope.count=0; 43 $scope.toggle=false; 44 $scope.show_pink_div=function(){ 45 $scope.toggle=!$scope.toggle; 46 } 47 }); 48 app.controller("secondCtrl",function ($scope) { 49 $scope.name="name"; 50 }); 51 app.directive("runoobDirective",function () { 52 return { 53 template : "我在指令构造器中创建" 54 }; 55 }); 56 57 //创建 value 对象 “defaultInput” 并传递数据 58 app.value("defaultInput",5); 59 60 //将 “defaultInput” 注入到控制器 61 app.controller("valueCtrl",function ($scope, CalcService, defaultInput) { 62 $scope.number = defaultInput; 63 $scope.result = CalcService.square($scope.number); 64 65 $scope.square = function() { 66 $scope.result = CalcService.square($scope.number); 67 } 68 }); 69 70 //在 service 中注入 factory “MathService” 71 app.service("CalcService",function (MathService) { 72 this.square = function(a) { 73 return MathService.multiply(a,a); 74 } 75 }); 76 77 //创建 factory “MathService” 用于两个数的乘积 78 app.factory("MathService",function () { 79 var factory = {}; 80 factory.multiply = function(a, b) { 81 return a * b 82 } 83 return factory; 84 }); 85 app.config(["$routeProvider",function ($routeProvider) { 86 $routeProvider 87 .when('/',{template:'这是首页页面'}) 88 .when('/computers',{template:'这是电脑分类页面'}) 89 .when('/printers',{template:'这是打印机页面'}) 90 .when('/phone',{template:'这是手机页面'}) 91 .otherwise({redirectTo:'/'}); 92 }]); 93 </script>
自己很长时间没有弄ng了，好好看了一遍。真是书读百遍，其义自现。
