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(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>void</title>

     <link rel="stylesheet" href="css/main.css">

     <script type="text/javascript" src="js/jquery.js"></script>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript" src="js/angular-route.js"></script>

 </head>

 <body ng-app="myApp">

 <div ng-controller="myCtrl">

     <button ng-click="count=count+1">点击加一</button><button ng-click="show_pink_div()">点击/隐藏出现一个粉红色的div</button>

     <p>{{count}}</p>

     <div class="pink" ng-hide="toggle"></div>

 </div>

 <div ng-controller="secondCtrl">

     {{name}}

     <div runoob-directive></div>

 </div>

 <div ng-controller="valueCtrl">

 {{result}}

 </div>

 <h2>AngularJS 路由应用</h2>

 <ul>

     <li><a href="#/">首页</a></li>

     <li><a href="#/computers">电脑</a></li>

     <li><a href="#/printers">打印机</a></li>

     <li><a href="#/phone">手机</a></li>

     <li><a href="#/blabla">其他</a></li>

 </ul>

 <div ng-view></div>

 </body>

 </html>

 <script type="text/javascript">

     var app=angular.module("myApp",['ngRoute']);

     app.controller("myCtrl",function ($scope) {

         $scope.count=0;

         $scope.toggle=false;

         $scope.show_pink_div=function(){

             $scope.toggle=!$scope.toggle;

         }

     });

     app.controller("secondCtrl",function ($scope) {

         $scope.name="name";

     });

     app.directive("runoobDirective",function () {

         return {

             template : "我在指令构造器中创建"

         };

     });

     //创建 value 对象 “defaultInput” 并传递数据

     app.value("defaultInput",5);

     //将 “defaultInput” 注入到控制器

     app.controller("valueCtrl",function ($scope, CalcService, defaultInput) {

         $scope.number = defaultInput;

         $scope.result = CalcService.square($scope.number);

         $scope.square = function() {

             $scope.result = CalcService.square($scope.number);

         }

     });

     //在 service 中注入 factory “MathService”

     app.service("CalcService",function (MathService) {

         this.square = function(a) {

             return MathService.multiply(a,a);

         }

     });

     //创建 factory “MathService” 用于两个数的乘积

     app.factory("MathService",function () {

         var factory = {};

         factory.multiply = function(a, b) {

             return a * b

         }

         return factory;

     });

     app.config(["$routeProvider",function ($routeProvider) {

         $routeProvider

         .when('/',{template:'这是首页页面'})

         .when('/computers',{template:'这是电脑分类页面'})

         .when('/printers',{template:'这是打印机页面'})

         .when('/phone',{template:'这是手机页面'})

         .otherwise({redirectTo:'/'});

     }]);

 </script>

自己很长时间没有弄ng了，好好看了一遍。真是书读百遍，其义自现。

巴特西

AngularJS注入依赖路由总结

最新文章

热门文章