属性
描述
$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. 关于iOS开发的各种证书

    关于iOS开发的各种证书 最近在接推送服务的时候,被各种证书弄得不亦晕乎,这里记录一下一些基本的证书作用: 1. App IDs appID分明确的和通配的两种,如果要使用推送功能,只能用明确的. 2 ...

  2. idea前端页面不刷新----springboot

    修改这里就好了

  3. （C#）代理模式

    1.代理模式 为其他对象提供代理以控制对这个对象的访问. 远程代理:为一个对象在不同的地址空间提供举报代表.这样可以隐藏一个对象在不同地址空间的事实. 虚拟代理:是依据需要创建开销很大的对象.通过它来 ...

  4. [SHELL]退出脚本

    一,退出状态码 1,范围:0~255 2,查看退出状态码:必须在命令执行之后立即执行 ,显示的是脚本最后一条命令的退出状态码 echo $? 若f返回值为0,则表示正常 有异常为正值 二,exit 脚 ...

  5. 【halcon】算子

    算子 rgb1_to_gray  灰度化 threshold:英文是阈的意思    二值化算子 Connection Compute connected components of a region. ...

  6. Map Reduce Application(Partitioninig/Binning)

    Map Reduce Application(Partitioninig/Group data by a defined key) Assuming we want to group data by ...

  7. scatter注记词

    say illness thumb ginger brass atom twenty omit fine thought staff poverty

  8. 使用Response.Write实现在页面的生命周期中前后台的交互

    Response.Write()方法非常的常见,也很普通,就是向http output中输出一string.其输出的内容位于页面的最顶端,常用来实现显示一些页面消息框等逻辑. 一般来说,在页面的整个生 ...

  9. 欢迎来怼--第二十一次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/11/2 17:05~17:15,总计10min. 地点: ...

  10. 感谢信——Alpha版

    作为Thunder团队的leader,当时担任组长,说实话,确实是头脑一热,可后来,在确定选题时,看着大家都有自己的想法,看着大家都那么踊跃,而我因为性格的原因,总是难以做决定,导致选题这件事就开了几 ...