Angular介绍1

时间 2019-12-18

标签 angular 介绍栏目 AngularJS 繁體版

原文原文链接

Angular简介

什么是AngularAngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。 AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。这是一个很是好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护他。 AngularJS的设计初衷是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展现设计语言，但要构建WEB应用的话它就显得乏力了。因此我作了一些工做（你也能够以为是小花招）来让浏览器作我想要的事。其核心就是经过指令扩展了 HTML，经过表达式绑定数据到 HTML。 Angular不推崇DOM操做，也就是说在Angular中几乎不去使用DOM操做一般，咱们是经过如下技术来解决静态网页技术在构建动态应用上的不足：类库和框架。jquery
什么是类库和框架git
- 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导做用的是你的代码，由你来决定什么时候使用类库。类库有：jQuery等程序员
- 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只须要对它填充具体的业务逻辑。这里框架是起主导做用的，由它来根据具体的应用逻辑来调用你的代码。angularjs
为何不介绍其余的框架和库github
- 公司背景web
- 维护能力npm
- 中国企业使用范围api
- 上手难易程度数组
Angular网站浏览器
- 官网
- AngularJS 1.x 官方网站
  - AngularJS 2.x 官方网站
  - Google Material Design for Angular
- Angular UI（Angular最大的第三方社区）
- AngularJS中文社区
- [AngularJS中文社区提供的文档]
- http://docs.angularjs.cn/api
- http://www.apjs.net/
如何下载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.可以有多个控制器