属性
描述
$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. 在线接口文档工具——ShowDoc

    ShowDoc:https://www.showdoc.cc/ --待更.

  2. 北京Uber优步司机奖励政策(2月7日)

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

  3. 武汉Uber优步司机奖励政策(8月31日~9月6日)

    ·奖励前提 *必须满足当周平均评分4.7星及以上,且当周接单率70%及以上,当周在线5小时且完成5单,才有资格获得奖励 * 各组别必须满足当周要求的成单率才有资格获得奖励,成单率由当周 滴滴快车单单2 ...

  4. Ubuntu adb 报错：no permissions (user in plugdev group; are your udev rules wrong?);

    Ubuntu 下 adb 报错: caoxinyu@caoxinyu-ThinkPad-T470p:~/Android/Sdk/platform-tools$ ./adb devices List o ...

  5. Selenium WebDriver（Python）API

    1.通过示例介绍Selenium-WebDriver 一个简单的入门方法就是这个例子,它在Google上搜索术语“Cheese”,然后将结果页面的标题输出到控制台. java csharp pytho ...

  6. katalon系列四：使用Katalon Studio录制WEB自动化脚本

    一.点击图1工具栏中的+号,选Test Case,新建一个用例. 图1 二.接着点图1录制按钮(地球上有个红点图标),打开的Web Recorder中URL输入百度的地址,浏览器选择Chrome,点击 ...

  7. FU-A方式分包

    当 NALU 的长度超过 MTU 时, 就必须对 NALU 单元进行分片封包. 也称为 Fragmentation Units (FUs).  0 1  2 3 0 1 2 3 4 5 6 7 8 9 ...

  8. linux学习总结----mongoDB总结

    dbhelper.py 用户登录和注册(加密算法) 加密导包 import hashlib 或者使用Md5 加密 MongoDB ->JSON service mysql start servi ...

  9. leetcode-生成括号（回溯算法）

     转载出处:https://blog.csdn.net/yanerhao/article/details/68561290 生成括号     给出 n 代表生成括号的对数,请你写出一个函数,使其能够生 ...

  10. 孤荷凌寒自学python第八十二天学习爬取图片2

    孤荷凌寒自学python第八十二天学习爬取图片2 (完整学习过程屏幕记录视频地址在文末) 今天在昨天基本尝试成功的基础上,继续完善了文字和图片的同时爬取并存放在word文档中. 一.我准备爬取一个有文 ...