作用域和控制器的交互情况：

　　1、控制器通过作用域对模板暴露一些方法供其调用

　　2、控制器中定义的一些方法可改变注册在作用域下的数据模型

　　3、控制器在某些场合可能需设置监听器来监听作用域中的数据模型；这些监听器在控制器的相关方法被调用时立即执行

注：用 $watch 进行脏值检查时，一定不要做任何的 DOM 操作，因为 DOM 操作拖慢甚至是拖垮整体性能的能力比在 JavaScript 对象上做属性操作高好几个数量级！！

　　Angular 中对作用域进行脏值检查实时跟踪数据模型的变化是一个非常频繁的操作

指令分类：

监测型指令：需要在 $watch() 方法中注册一个监听处理器来监听控制器或别的操作引起的表达式值改变，进而更新视图

监听型指令：像 ng-click，这种是在 HTML 标签属性中直接写好当 ng-click 发生什么时调用什么处理器，

当 DOM 监听到1 ng-click 被触发时，这个指令就会通过 $apply() 方法执行相关的表达式操作或是别的操作更新视图

注：在编译阶段，编译器在 HTML 解析器解析页面遇到非传统的或自己不能识别的标签或别的表达式时，

　　Angular 编译器就将这些 HTML 不懂的东西（指令）在当前 DOM 环境下解析出来

　　无论哪种指令，当外部事件发生时，相关的表达式必须通过 $apply() 作用于相应的作用域，这样所有的监听器才能被正确更新，然后进行后续操作

大多数情况下，指令和作用域相互作用，但并不会创建作用域的新实例

==》但一些特殊的指令（如 ng-controller、ng-repeat 等）则会创建新的下级作用域，并把这些新建的作用域和拥有相应的 DOM 元素相关联

依赖注入（DI）：

　　1、含义：是一种让代码管理其依赖关系的设计模式

　　2、三种获取依赖对象的方式：

　　　　a、创建依赖，通常是通过 new 操作符

　　　　b、查找依赖，在一个全局的注册表中查阅它

　　　　c、传入依赖，需要此依赖的地方等待依赖对象注入进来

注：a 和 b 不理想，c 中 当 app 的某处声明需要用到某个依赖时，Angular 会调用这个依赖注入器去查找或是创建所需的依赖，然后返回回来给你使用

依赖注入的三种风格：

　　1、推断依赖：最简单的获取依赖的方法是让你的函数的参数名直接使用依赖名

function MyController($scope, greeter){

  ...

}

注：给 injector 一个函数，它可通过检查函数声明并抽取参数名可以推断需要注入的服务名，上述 $scope 和 greeter 是两个需要被注入到函数中的服务

　　它对压缩的 JavaScript 代码不起作用，因为压缩后会重命名函数的参数，这种风格只对 pretotyping 和 demo 级应用有用

　　2、$inject 注释：为了让重命名了参数的压缩版的 JavaScript 代码能够正确地注入相关依赖服务，函数需通过 $inject 属性进行标注（存放需要注入的服务的数组）

注：$inject 数组中的服务名顺序必须和函数参数名顺序一致

var myController = function (renamed$scope, renamedGreeter) {

    ...

}

myController['$inject'] = ['$scope', 'greeter'];

注：$inject 有时会导致代码膨胀（如标志指令时）

　　3、someModule.factory('greeter', ['$window', function(renamed$window){

　　             ...

　　      }]);

注：最好的一种方式，千万不要将中括号外的 ‘greeter’ 和括号内的 ‘$window’ 混淆，前者是声明创建依赖，后者是注入依赖

Angular 模板：

　　是一个声明式的视图，它指定信息从模型、控制器变成用户在浏览器上可以看见的视图

　　静态的 DOM ==》动态的 DOM

　　

　　1、指令：一个可扩展已有 DOM 元素或代表可复用的 DOM 组件，用可扩展属性标记

　　2、表达式：用双括号 {{expression}} 给元素绑定表达式

　　3、过滤器：格式化数据显示在界面上

　　4、表单控件：验证用户输入

在 Angular 中，以上元素属性可直接在模板中使用，除了在模板中声明元素外，可在 JavaScript 代码中访问这些元素

Angular 使用大的 CSS 类：

　　1、ng-scope：把这个类附加到所有创建了新作用域的 HTML 元素上

　　2、ng-binding：把这个类附加到所有通过 ng-bind 或绑定了任何数据的元素上

　　3、ng-invalid、ng-valid：附加到进行了验证操作的所有 input 组件元素上

　　4、ng-pristine、ng-dirty：angular 的 input 指令给所有新的、还未与用户交互的 input 元素附加上 ng-pristine；当用户有任何输入时，则附加上 ng-dirty

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>class test</title>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <!--当无效输入时为红色，有效输入为绿色，没有输入为黄色-->

    <style>

        .ng-invalid.ng-dirty {

            border-color: red;

        }

        .ng-valid.ng-dirty {

            border-color: green;

        }

        .ng-pristine {

            border-color: yellow;

        }

    </style>

</head>

<body>

<form name="myForm" ng-app="myApp" ng-controller="myCtrl" ng-submit="myForm.$valid" novalidate>

    <input name="myName" ng-model="name" required>

    <span ng-show="myForm.myName.$invalid" ng-hide="myForm.myName.$pristine || myForm.myName.$valid">

        Your name must be required!

    </span><br>

    <input name="myAge" ng-model="age" type="number" max="50" min="10" required>

    <!--根据年龄是否有效来确定是否显示该 span-->

    <span ng-hide="myForm.myAge.$pristine || myForm.myAge.$valid" ng-show="myForm.myAge.$invalid">

        The age range must be between 10 to 50

    </span><br>

    <label>Hello, my name is {{name}}, I am {{age}} years old</label><br>

    <input type="submit" onclick="alert('submit me')" value="提交">

</form>

<script>

    angular.module("myApp", []).controller("myCtrl", ["$scope", function ($scope) {

        $scope.name = "Lemon";

        $scope.age = 18;

    }]);

</script>

</body>

</html>

Angular 学习笔记（四）的更多相关文章

  1. angular学习笔记(四)- input元素的ng-model属性

    input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> < ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  5. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  6. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  7. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  8. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  9. Typescript 学习笔记四：回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  10. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

随机推荐

  1. Create a Solution using the Wizard 使用向导创建解决方案

    In this lesson, you will learn how to create a new XAF solution. You will also be able to run the ge ...

  2. 【ASP.NET Core】AddMvc和AddMvcCore的区别

    AddMvcCore() method only adds the core MVC services. AddMvc() method adds all the required MVC servi ...

  3. [转]Workbook.SaveAs method (Excel) Password

    本文转自:https://docs.microsoft.com/en-us/office/vba/api/excel.workbook.saveas Saves changes to the work ...

  4. 创建密钥并使用密钥ssh登录linux

    创建密钥并使用密钥ssh登录linux 使用密钥对登录ssh简介 通过ssh_keygen胜场公钥和私钥,公钥放在要登录的目标的机器上,私钥放登录发起的机器上. 生成密钥 我是在ubuntu上生成的密 ...

  5. [转载] Java 遍历 Map 的 5 种方式

    目录 1 通过 keySet() 或 values() 方法遍历 2 通过 keySet 的 get(key) 获取值 3 通过 entrySet 遍历 4 通过迭代器 Iterator 遍历 5 通 ...

  6. Acwing 14. 不修改数组找出重复的数字

    题目地址  https://www.acwing.com/problem/content/description/15/ 来源:剑指Offer 给定一个长度为 n+1n+1 的数组nums,数组中所有 ...

  7. luoguP3649 [APIO2014]回文串

    题意 关于回文自动机的讲解见这里 由于回文串个数是\(O(n)\)的,直接回文自动机上统计并比较即可. code: #include<bits/stdc++.h> using namesp ...

  8. React: React的复合组件

    一.介绍 不论Web界面是多么的复杂,它都是由一个个简单的组件组合起来实现的,既然会创建一个简单的组件,那么复杂的组件就有了下手的切入点了.现在来实现一个简单的复合组件.一个颜色面板,一共三部分组成. ...

  9. swoole client有什么用

    PHP常用socket创建TCP连接,使用CURL创建HTTP连接,为了简化操作,Swoole提供了Client类用于实现客户端功能,并增加了异步非阻塞模式,让用户在客户端也能使用事件循环. 作为客户 ...

  10. 05Shell循环语句

    循环语句 for 语法结构 for 变量名 [ in 取值列表 ] do 循环体 done 注意 当for对文件内容进行逐行处理时,会忽略空行 示例 例1 ping 主机的脚本(初始版):缺点执行过程 ...