AngularJS注入依赖路由总结

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30328063

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量82

点赞数

文章标签： javascript 设计模式 ViewUI

原文链接：http://www.cnblogs.com/liubeimeng/p/5684792.html

版权

属性	描述
$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>