-
什么是AngularAngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。 AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护他。 AngularJS的设计初衷是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。 Angular不推崇DOM操作,也就是说在Angular中几乎不去使用DOM操作通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:类库和框架。
-
什么是类库和框架
-
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
-
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。
-
-
为什么不介绍其他的框架和库
-
公司背景
-
维护能力
-
中国企业使用范围
-
上手难易程度
-
-
Angular网站
-
[AngularJS中文社区提供的文档]
-
如何下载Angular
-
官网下载
-
npm: npm install angular
-
bower: bower install angular
-
如何学习Angular
-
打开使用 webstorm打开
-
淘宝购买书籍
-
多练
Angular使用
-
先来对比js、jquery、angular同时做一个加法计算器
-
程序员惯例 Hello World 的Angular版本
表达式
-什么是表达式
-
表达式的形式有很多种都是通过{{}}包裹起来,最后将运算结果返回出去
-
字符串 {{string}}
-
数字 {{number}}
-
布尔 {{boolean}}
-
三元表达式 {{?:}}
-
数组 {{arrary}}
-
对象 {{object}}
-
-
指令
-
什么是指令指令就是Angular对原有HTML的拓展属性,并且以ng-开头
-
ng-app: 表示Angular程序从这里开始,里面所有与Angular有关的代码将被执行
-
ng-init:初始化参数
-
ng-model:用来将参数绑定到value中
-
ng-bind:相当于innerHTML绑定到标签中
-
ng-click:相当于click事件
Angular特性
-
指令
-
双向数据绑定
Angular全局Api使用
-
数据比较API
-
angular.isArray() 判断给定的对象是否为数组。
-
angular.isDate()判断给定的对象是否为日期类型。
-
angular.isDefined()判断给定的对象是否定义过。
-
angular.isElement()判断给定的对象是否为一个DOM元素。
-
angular.isFunction()判断给定的对象是否为一个函数。
-
angular.isNumber()判断给定的对象是否为数字。
-
angular.isObject()判断给定的对象是否为object类型。
-
angular.isString()判断给定的对象是否为字符串。
-
angular.isUndefined()判断给定的对象是否没有定义过(与angular.isDefined()相反)。
-
angular.equals()判断给定的两个对象是否相等。
-
-
-
其他API使用
-
angular.lowercase() 将字符串转换为小写形式。
-
angular.uppercase()将字符串转换为大写形式。
-
angular.copy()深拷贝一个对象或数组。
-
angular.forEach()遍历对象或数组中的每一个元素并执行一个函数。
-
-
-
什么是类库和框架
-
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
-
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。
-
库和框架最大的区别是 1.库中的方法是由开发者调用,框架是由框架本身来调用开发者写好的方法2.使用框架的时候需要对框架有一定认识才能使用
-
-
JqLite使用
-
Angular的dom操作
-
在Angular对于宏观的dom处理非常不错但是对于细小的操作Angular就需要借助内置的JqLite进行操作
-
JqLite分两种情况
-
有Jquery时,作为Angular检测到Jquery时候会将其引用过来
-
无Jquery时,作为Angular就会启用自身的JqLite使用,使用方法基本一样
-
-
-
杂项
-
com 商业性质的网站
-
org 非营利性质的网站
-
edu 教育性质
-
cn 中国的网站
angular的特性:
1.双向数据绑定
解决angular闪一闪的问题解决办法
+ 1.把angularjs的引用写在上面(不推荐) + 2.添加ng-cloak隐藏代码 + 3.自己添加 [ng-cloak]{ display:none } 样式 + 4.通过指令的方式写angular代码,不考虑使用表达式的形式
以后写angular代码的顺序
-
1.引用angularjs的包
-
2.创建模块和控制器
-
3.暴露参数和暴露行为
-
4.划定angular的管理范围需要配合指令ng-app加模块的名称,ng-controller加控制器的名称
-
5.将暴露的行为或者参数绑定到对应的位置
-
angular的执行顺序
-
1.如果没有模块,在angular内部会帮我们创建模块
-
2.如果由模块就加载模块中的内容和控制器中的内容
-
3.将模块中的内容加载到angular中去
-
4.angular就会去寻找ng-app(可以看作是angular的起点,同时也是angular的管理范围)
-
5.这时候angular才回去解析ng-app中有关angular的代码
-
模块和控制器的注意:
-
1.如果在没有特殊的情况下angular处理模块只会处理第一个,后面的将不会被执行
-
2.控制器需要放在指定的模块范围内才会进行处理
-
3.能够有多个控制器
-