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

    题目传送门 题目大意:给定一棵K叉树,一个节点下的K个节点的分数为i,求包含大于等于D的边的总分数为N的方案总数,mod 1e9+7. 这是一道很好的树形DP题,首先看N和K两个条件,可以轻易的得到方 ...

  2. AOSP 设置编译输出目录

    export OUT_DIR=/media/caoxinyu/TomasYu/out 注意:export OUT_DIR= OUT_DIR 后面直接跟= ,不要有空格.否则报错.

  3. GitHub 配置指南

    Git和GitHub的区别 GitHub术语解析 配置使用 注册GitHub帐号 创建Git 创建库 复制库 社交化 Git和GitHub的区别 Git是一个分布式的版本控制系统,与SVN类似:最初由 ...

  4. python之Queue

    一.多进程的消息队列 “消息队列”是在消息的传输过程中保存消息的容器 消息队列最经典的用法就是消费者和生成者之间通过消息管道来传递消息,消费者和生成者是不通的进程.生产者往管道中写消息,消费者从管道中 ...

  5. SpringCloud Eureka 服务注册与服务发现

    一.Eureka简介 spring Cloud Netflix技术栈中,Eureka作为服务注册中心对整个微服务架构起着最核心的整合作用.有了服务发现与注册,你就不需要整天改服务调用的配置文件了,你只 ...

  6. InnoDB意向锁和插入意向锁

      Preface       Last night one buddy in tech wechat group asked "what's intention locks of Inno ...

  7. Python3.5+selenium(11)脚本模块化&参数化

    mail126.py脚本如下 from selenium import webdriver from time import sleep from model1 import Login driver ...

  8. C 关键字 标示符 注释

    一 关键字 1. 什么是关键字 关键字就是C语言提供的有特殊含义的符号 也叫做"保留字" C语言一共提供了32个关键字 这些关键字都被C语言赋予了特殊含义 auto double ...

  9. 初学DirectX(1)

    初学Direct X (1) Direct3D设备用于访问视频卡的帧缓冲区,以及后台缓冲区.由于IDE是vs2013,默认安装了direct 9,只需要在使用头文件(1)并像使用库文件(2)即可 #i ...

  10. Solr与Elasticsearch区别

    Elasticsearch Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据. 它可以用于全文搜索,结构化搜索以及分析. 优点 Elastics ...