属性
描述
$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注入依赖路由总结的更多相关文章

  1. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  2. AngularJS DI(依赖注入)实现推测

    AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...

  3. [Angularjs]视图和路由（二）

    写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

  4. 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

  5. 前端MVC学习笔记（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

  6. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  7. [Angularjs]视图和路由（四）

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  8. [Angularjs]视图和路由（三）

    写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...

  9. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

随机推荐

  1. 北京Uber优步司机奖励政策（1月1日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. JavaScript---复选框反选全选

    Script <script type="text/javascript"> /*直接使用document.getElementsByName("c1&quo ...

  3. java nio之channel

    一.通道(Channel):由 java.nio.channels 包定义的.Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的“流”.只不过 Channel本身不能直接访问 ...

  4. NB-IOT连接移动onenet平台流程

    1. 先创建账号,然后创建产品 2. 创建设备,用AT+CGSN和AT+CIMI查询NB-IOT的IMEI和IMSI填写上去. 3. 创建好的设备.

  5. C++ 基础面试题-2

    请写出一下程序的输出内容 /* ** 2018/03/21 22:02:03 ** Brief: ** Author:ZhangJianWei ** Email:Dream_Dog@163.com * ...

  6. tpo-09 C1 Advice on a term paper's topic

    第 1 段 1.Listen to a conversation between a student and her professor. 请听一段一名学生和教授讨论的对话. 第 2 段 1.Befo ...

  7. Java开发工程师(Web方向) - 01.Java Web开发入门 - 第1章.Web应用开发概述

    第1章--Web应用开发概述 Web应用开发概述 浏览器-服务器架构(BS-architecture) browser/ App    ---- request ---->    server ...

  8. Maven编译Java项目

    Spring在线参考文档: http://spring.io/guides/gs/maven/ 下载安装 Downloadand unzip the source repository for thi ...

  9. 用 splice 函数分别实现 push、pop、shift、unshift 的方法

    主要需要注意的是不同方法他们本身返回的值应该是什么,是数组当前的长度,还是取出的元素的值,再在splice函数里面进行相应的return就可以了.具体如下: 用 splice函数实现 push方法 f ...

  10. 国内版Office365实现MFA的方案(未完）

    现在二十一世纪互联版也可以实现了MFA,现在也就是2017年3月份,支持了PC,但是对移动端应用还是不支持的,请了解. 具体方法如下: 登录国内版Office365(事例为高级商业版 https:// ...