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

　　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. centOS极简安装并启动ngnix

    我在网上看到过很多种方法在centOS中安装nginx,比如像这样的: 这种方式太麻烦了,看了很恶心. 我在官网看到有这样一种操作,可谓极简.特此记录一下:(官网教程地址:http://nginx.o ...

  2. 十八道JVM面试题总汇（附解析）

    一.Java 类加载过程? Java 类加载需要经历以下7 个过程: 1. 加载 加载是类加载的第一个过程,在这个阶段,将完成以下三件事情: • 通过一个类的全限定名获取该类的二进制流. • 将该二进 ...

  3. android studio节省C盘空间的配置方法

    近期发现C盘空闲空间剩余不多了,经过检查发现在C:\Users\<电脑用户名>\的目录下,有这两个文件夹空间比较大,这两文件夹分别是 .AndroidStudioPreview3.2(不同 ...

  4. RDIFramework.NET敏捷开发框架Web新增邮件中心实现便捷式的邮件收发

    1.引言 邮件收发在很多业务系统中都有这样的需求,是比较正式和常用的功能.在我们的框架中提供了邮件中心功能模块,集内部邮件的收发.邮件归类.邮件星标的标记.邮件的删除与彻底删除等,邮件中心功能模块界面 ...

  5. 微信支付和微信支付通知基于sdk的说明(2)

    前期准备工作 微信商户账户/密码(获取appid等信息) 微信公众号账户/密码(获取cert证书等信息,不做线上退款不需要证书) 下载php支付demo 从商户平台进入的话是以下界面或者直接搜索公众号 ...

  6. docker 网络设置概述

    docker有3种网络: 使用命令docker network ls,执行结果如下. NETWORK ID NAME DRIVER SCOPE 82e8822065c7 bridge bridge l ...

  7. 手工挖掘web常见漏洞时的一些经验总结

    一.前提: 漏洞挖掘原则 所有变量 所有头 cookie中的变量 逐个变量删除 漏洞的本质 数据与指令的混淆 对用户输入信息过滤不严判断失误,误将数据当指令 二.经典漏洞: 1.身份认证 常用弱口令/ ...

  8. 第6次作业--static关键字、对象

    题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参数 ...

  9. LVS 负载均衡——直接路由模式DR

    一.配置的网络拓扑结构图 二.配置lvs服务器 配置虚拟网卡地址(VIP地址) [root@localhost ~]# ifconfig eno16777728: 192.168.200.253 ne ...

  10. HTML连载49-清除浮动的第三种方式（内外墙法）

    一.清除浮动的第三种方式 1.隔墙法有两种​如下:外墙法和内墙法​.​ 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...