AngularJS

优点

  • 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
  • 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
  • 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,我们可以通过阅读源代码来找到某些我们需要的东西,如:在directive使用 $parse;
  • ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助
  • 补充:Angular支持单元测试和e2e-testing。

缺点

  • 双向数据绑过多时,会影响性能(原因:https://github.com/atian25/blog/issues/5
  • ngView路由只能有一个,不能嵌套多个视图,虽然有 angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的,第三方模块;
  • 作用域把Ag的执行环境和浏览器环境隔离开,原生事件影响不了Ag的作用域
  • ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了,如:jQuery File Upload Demo
  • Angular 太笨重了,没有让用户选择一个轻量级的版本,当然1.2.X后,Angular也在做一些更改,比如把route,animate等模块独立出去,让用户自己去选择。

架构

Angular4.0

核心:组件

问题改进

  • 默认绑定改为单向数据绑定
  • TypeScript 2.1 和 2.2 的兼容Angular已更新为更新版本的TypeScript,提高了ngc的速度,并且有更好的类型检查机制。
  • $scope不复存在
  • 表单验证
  • TypeScript 2.1 和 2.2 的兼容Angular已更新为更新版本的TypeScript,提高了ngc的速度,并且有更好的类型检查机制。

新增特性

  • 命令行工具 AngularCLI
  • 服务端渲染(Angular Universal) 
    • 加载速度
    • SEO(单页应用对搜索引擎有很大的限制)
  • 移动和桌面兼容

架构

其他前端框架

React->UI组件(V) 
- React,虚拟DOM,更新DOM次数少,内容也少。速度快 
- FlUX架构(UI组件化和数据单向更新) 
- 服务器渲染(预渲染应用发送客户端,爬虫依赖服务器的响应) 
Vue->雨溪大牛个人主导,只关注WEB,服务器渲染(缺点) 
- 简单 
- 灵活 
- 性能

Ag4开发环境搭建

Amber Cli(模块的构建) -> Angular CLI <- Webpack(打包) 
- Angular CLI (2以上的构建工具) 
- npm install -g @angular/cli (安装) 
- ng version 
- ng new 项目名字 –skip-install(网络不好1) 
- cnpm install(网络不好2) 
- 编译,开发同步 np serve 
- 测试打包 test build

安装报错
constructor(_configPath, schema, configJson, fallbacks = []) {
重装
npm uninstall -g angular-cli
npm cache clean
  • 1
  • 2
  • 3
  • 4
  • 5
C:\Users\null\AppData\Roaming\npm\node_modules\@angular\cli\models\config\config
.js:17
constructor(_configPath, schema, configJson, fallbacks = []) {
^ SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\Users\null\AppData\Roaming\npm\node_modules\@angul
ar\cli\models\config.js:3:18)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

升级Node version 6.x or higher 
Linux

npm install -g n
n stable
  • 1
  • 2

window直接替换就行了

运行报错
The "@angular/compiler-cli" package was not properly installed.
  • 1
  • 2
  1. Global package: 
    rm -rf node_modules dist 
    npm uninstall -g @angular/cli 
    npm cache clean
  2. Reinstall and play (global) 
    npm install -g @angular/cli@latest 
    npm install 
    ng serve 
    https://stackoverflow.com/questions/42925690/angular2-cli-error-angular-compiler-cli-package-was-not-properly-installed/43021209
  • .editorconfig webstrom配置文件
  • karma.conf.js 自动化单元测试配置文件
  • protractor.conf.js 自动化单元测试
  • tslint 代码规范监测
  • src 
    • app 应用的组件和模块

      • 模块
      • 组件
    • assets 静态资源
    • environments 环境配置 (多环境,开发,测试,生产)
    • index 根文件
    • main.ts 脚本执行的入口点(启动项目)
    • polyfills 导入一些必要的库,支持老版本的ag
    • css 全局样式
    • test 自动化测试
    • tsconfig TypeScript编译器

@Component**组件元数据装饰器**可以让开发者通过Angular 的Component创建一个类似Java的class,并同时提供额外的元数据用于定义在运行环境中,根据元数据的值来渲染组件,这个component将如何运行/实例化以及被使用。 
Template 定义组件的外观 
Controller包含组件的所有属性和方法,页面逻辑,处理模板上发生的事件

@NgModule

  • declarations:只能声明组件,指令,管道
  • imports 依赖模块 
    • Browser浏览器模块
    • Form表单模块
    • Http模块 
      • provides 模块提供了什么服务
      • bootstrap 模块主组件

angular启动过程

angular-cli.json 
- 启动加载页面 index.html 
- 启动加载脚本 main.ts 
- 脚本的工作 导入依赖模块,主模块app.module.ts,主模块的依赖模块…….在index.html寻找启动模块的主组件对应的css选择器

Angular Route

路由 - 分配特定的Url - 单页应用(Simple Page App)

利用url分配视图状态 
- 子路由 
- 保护路由 
- 辅助路由

ctrl + 1 导入component 
ng new project routing 生成一个路由模块

app-routing.modul.ts路由配置,不用/开头
const routes : Routes = [
{path:'',component:IndexComponent },
......
] 第一种:
路由使用,使用数组是要解决增加传参的问题,字符串不方便
<a [routerLink] = "['/']" > 主页 </a>
第二种:
<input type="button" value="主页" (click)= "toIndex()" 事件绑定 控制器中定义
export class AppComponent {
constructor(private router: Router){} toIndex(){
this.router.navigate(['/']); } }
404组件,通配符定义 **解决输入未定义路径报错的情况**
{path:'**',component:404Component },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

404组件页要放在最后,因为Ag路由使用先配置,先匹配的原则。

路由传递数据

查询参数传递参数
/product?id=1&name=2 => ActiveRoute.queryParams[id] 路由路径传递参数
{path:/product/:id} => /product/1 => ActivatedRoute.params[id] 路由配置传递参数
{path:/product,component: ProductComponent,data:[{isProd:yrue}]}
=> ActivatedRoute.data[0][isProd]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
查询传递参数

<a [routerLink] = "['/product']" [queryParams]="{id : 1}" > 主页 </a>

子组件:接收参数 

自组件html: 
{{ productId }}

路由传递参数

定义: 
{path:product/:id”,component:ProductComponent }, 
html:

<a [routerLink] = "['/product',1]" > 主页 </a>
  • 1

子组件:prams 替换queryParams

问题:当我们进行相同组件(参数不同)的路由切换时,无法正常切换(不能切换)? 
问题来源:组件只创建一次,创建时constructor,ngOnInit被调用 
问题解决:参数快照(snapshot) -> 参数预定 

重定向路由

子路由

生成子组件=>定义模板内容=>接收路由参数=>添加子组件=>添加子组件连接

辅助路由(所有页面都显示的组件)

主路由(组件只在主路由显示):
outlets:{primary:'home',aux:"chat"}
  • 1
  • 2

路由守卫

通过返回的布尔值判断执行动作。

注意CanDeactivate多了一个泛型,也就是要声明一下要保护的组件

Resolve守卫要解决的问题就是当我们发送一个HTTP请求,要求路由切换时,请求是有延迟的,模板上的{{数据}}不能及时显现出来。可以在进入路由之前读取数据,立刻显现数据(略)

依赖注入(Dependency Injection)

在调用一个类的时候,先要实例化这个类,生成一个对象。 
问题:写一个类,过程中要调用到很多其它类,甚至这里的其它类,也要“依赖”于更多其它的类。手工实例化过于频繁,臃肿。 
依赖注入,全称是“依赖注入到容器”, 容器(IOC容器)是一个设计模式,它也是个对象,你把某个类(不管有多少依赖关系)放入这个容器中,可以“解析”出这个类的实例。 
所以依赖注入就是把有依赖关系的类放入容器(IOC容器)中,然后解析出这个类的实例。

控制反转(Inversion of Control)

代码控制权从代码内部转到代码外部 
在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制。 
传统应用程序是由我们自己在对象中主动控制去直接获取依赖对象,也就是正转;而反转则是由容器来帮忙创建及注入依赖对象;为何是反转?因为由容器帮我们查找及注入依赖对象,对象只是被动的接受依赖对象,所以是反转;哪些方面反转了?依赖对象的获取被反转了。

Angular 注入点只有一个,构造函数

好处:

  • 解耦和
  • 提高可测试性(创建简单硬编码测试组件)

当我们需要重用ProductComponent,而且还需要另一个productService类时

实例:

ng g component product1
ng g service shared/product
  • 1
  • 2

@Injetable()装饰器:把其他服务注入该服务中。将该服务是否能注入其他模块是根据其作用域判断的

提供器声明在模块中

绑定到模板

拥有相同的Token,但是拥有不同的类 
提供器作用域:声明在组件中

ng g component product2
ng g service shared/anotherProduct
  • 1
  • 2

引入控制器:

绑定到模板

工厂方法和值声明提供器

声明提供器,简单的new一下。 
遇到问题:服务对象需要根据条件来决定具体实例化哪个对象,或者实例化对象,也就是调用构造函数时需要传递参数

工厂方法创建的对象是单例对象

问题:方法内部实例化方法,该方法和服务对象紧密的耦合在了一起

问题:用具体值,变量来实现其依赖注入

手工使用注入器(避免使用,错误风格)

数据绑定

允许将组件控制器的属性,方法与组件的模板连接起来

Ag4默认改为单向数据绑定。 
Ag1使用双向(性能问题),在页面维护一个存有所有表达式的列表,事件发生,反复遍历列表,确认数据是否完全同步,耗性能 
组件控制器的属性和方法与组件的模板连接

事件绑定

事件可以是函数调用,属性赋值,DOM事件,自定义事件

属性绑定

差值表达式相当于属性绑定

控制器:
private imgUrl:String="http://placehold.it/320x150";
模板:
<img [src]="imgUrl">
<img src="{{imgUrl}}"> 插值
  • 1
  • 2
  • 3
  • 4
  • 5

event.target.value DOM属性 
event.target.getAttribute(‘value’) HTML 
DOM属性随着输入的改变而改变(指定当前值),HTML属性不变(指定初始值,初始化DOM值,任务完成) 
还有一个,input的disabled的值的改变无法改变disabled的设置(true,false),但是DOM的设置是有效的

<input value="unchanging" (input)="doOnInput($event)"
  • 1


HTML属性绑定

当没有DOM属性绑定时,就使用html属性绑定,比如td

双向绑定

主要使用表单from在, 记忆方法:盒子[ ]里放香蕉( )

[(ngModel)] = ""
  • 1

响应式编程(集成Rx系列)

管道:格式化模板输出的一种可重用对象 |

{{birthday | date:'yyyy-MM-dd HH:mm:ss' | }}
{{name | number:'2.1-4' | }}
整数几位+小数最少几位+小数最多几位
{{name | async}} 流
  • 1
  • 2
  • 3
  • 4

自定义管道

ng g pipe pipe/multiple
{{size | multiple}}
  • 1
  • 2

组件间通信

组件的输入输出属性

  • 方法一:@Input() 输入属性通过属性传递数据

    • 只能在有父子关系的组件中,由父组件传递给子组件
  • 方法二:路由参数输入属性,构造函数
  • @Output() 子组件向父组件传递数据 
    • EventEmitter<泛型>输出属性
    • 捕捉EventEmitter和捕捉原生DOM的事件是一样的,事件绑定
    • 双向数据绑定 输出属性的名字 = 输入属性的名字 + Change

中间人模式传递数据

组件生命周期以及angular的变化发现机制

红色方法调用一次,绿色方法调用多次.共九个方法 
接口对JS或者TS开发者可选,最好添加,优点:IDE的支持和强类型的检查

  • ngOnChanges是当一个父组件修改或者初始化一个子组件的输入属性的时候被调用的。如果没有输入属性,ngOnChanges永远不会被调用
  • ngOnChanges首次调用一定发生在ngOnInit之前

小知识:

  • 父子组件之间应该避免直接访问彼此的内部,而应该通过输入输出属性来通讯
  • 组件可以通过输出属性发射自定义事件,这些事件可以携带任何你想携带的数据
  • 在没有父子关系的组件之间,尽量使用中间人模式通信
  • 父组件可以在运行时投影一个或者多个模板片段到子组件中
  • 每个ag组件都提供了一组生命周期钩子,供你在某些特定的事件中发生时执行相应的逻辑
  • ag的变更检测机制会监控组件属性的变化并自动更新视图,这个检测非常频繁,而且默认是针对整个组件树的,所以实现相关钩子时要谨慎
  • 可以标记你的组件树中的一个分支,使其被排除在变更检测机制之外

表单处理

纯html表单:显示表单项,校验用户输入(required,pattern 验证消息过于模糊,消失时间过快,样式不能修改),提交表单数据(较好的应该是提交数据之前,调用数据处理方法,校验数据合法性,而且还能指定数据提交方法(异步,wobsocket,http)),不能满足特定需求,不够灵活。

模板式表单FormsModule(快速)

  • 模板式表单FormsModule
  • 只能在模板中操作数据模型,不能在代码中操作
  • 不能访问数据模型相关的类,不能拿到类的引用,只能拿到数据,通过模板中给定的变量操作数据 
    • NgForm 自动添加该指令,接管Form指令

      • 隐式创建一个FormGroup类的实例,FormGroup类用来存储数据模型和表单数据
      • 自动发现NgModel的所有子元素,并自动将其添加到表单数据模型中
      • 也可以绑定到其他标签上
      • 如果想使用原生Form,可以在标签添加ngNoForm属性
      • NgForm可以被模板本地变量引用,以便在模板中访问NgForm对象的实例
      • 使用ngSubmit代替submit按钮,阻止跳转
    • NgModel 双向数据绑定,标记一个html元素成为表单的一部分 
      • 隐式创建一个FormControl类的实例,利用FormControl来存储数据的值
    • NgModelGroup 
      • 代表表单的一部分,允许将表单字段组织在一起,形成更清晰的层次关系
      • 隐式创建FromGroup的实例

响应式表单 ReactiveFormsModule(可适配多个渲染器)

  • 响应式表单 ReactiveFormsModule
  • 可以直接访问数据模型相关的类,但是由于不可引用, 只能在代码中操作数据模型,不能在模板中操作
  • 第一步:创建数据模型,用来保存表单数据的数据结构 
    • FormControl
    • FromGroup 
      • 一般用来代表整个表单,或者表单字段固定的子集
      • 如果其中一个FromControl是无效的,那么整个Fo’r’mGroup就是i无效的
    • FrormArray 
      • 一般用来代表可以增长的字段集合
      • 类似FromGroup,但是有一个长度属性
      • 没有key,只能通过序号访问相关的元素
  • 第二部:使用指令将html连接到数据模型
  • 表单验证

与服务器通信(http,socket)

npm init -y 引入带有默认配置的package。j'son
npm i @types/node -save
  • 1
  • 2
  • Http 服务,它来自HttpModule,只有在调用subscribe时才发送请求
  • Websocket协议,更简洁高效,而且时双向的
  • 定义一个流需要定义三件事 
    • 什么时候发射下一个元素
    • 什么时候抛异常
    • 什么时候发射流结束的信号

构建(编译和合并) 部署

构建
ng build -> dist
部署
添加新的部署策略 如图 Ha'shLocationStrategy 解决构建后无法跳转路由的问题 url中出现了一个#号
  • 1
  • 2
  • 3
  • 4
  • 5

多坏境

ng serve ng build + 环境参数
启动参数添加 --env=prod 生产环境 环境文件里面可以生成任意的文件属性,可以去引用

Angular 4.0从入门到实战的更多相关文章

  1. Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...

  2. Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...

  3. Angular4.0从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 路由 简介 接下来学习路由的相关知识 本来是不准备写下 ...

  4. Angular4.0从入门到实战打造在线竞拍网站学习笔记之一--组件

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 最近搞到手了一部Angular4的视频教程,这几天正好 ...

  5. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  6. Gulp4.0入门和实战

    gulp4.0入门和实战 我最近遇到需要优化web的性能的任务,然后就捣鼓了一些对资源文件优化压缩的方案.由于之前的项目中有使用到gulp,所以在需要处理的web项目中也优先使用这个技术. 先聊聊gu ...

  7. 《Angular4从入门到实战》学习笔记

    <Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...

  8. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  9. Angular 2.0 从0到1 (四)

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

随机推荐

  1. Qt Installer Framework 使用说明(三)

    目录 6.Qt Installer Framework 示例 7.参考 Reference 配置文件 Configuration File 配置文件元素的简要说明 Summary of Configu ...

  2. CAP理论中, P(partition tolerance, 分区容错性)的合理解释

    在CAP理论中, 对partition tolerance分区容错性的解释一般指的是分布式网络中部分网络不可用时, 系统依然正常对外提供服务, 而传统的系统设计中往往将这个放在最后一位. 这篇文章对这 ...

  3. 转:开源3D引擎介绍

    Delta3D:Delta3D是一个功能齐全的游戏引擎,可用于游戏,模拟或其他图形应用.其模块化设计集成了其他的开源项目,如‘开放场景图’,‘开放动力学引擎’,‘人物动画库’和‘OpenAL’ .De ...

  4. ios中core Plot (2)

    #import "ViewController.h" @interface ViewController () //指定要画得view @property(nonatomic,as ...

  5. 【DeepLearning】Exercise:Learning color features with Sparse Autoencoders

    Exercise:Learning color features with Sparse Autoencoders 习题链接:Exercise:Learning color features with ...

  6. Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)

    一段PHP程序执行报错: Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 261181 ...

  7. HDU 1258 Sum It Up (DFS)

    Sum It Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  8. magento 得到树形结构的分类列表

    <?php ?> <?php   class Lehui_AllCategoryList_Block_List extends Mage_Core_Block_Template { ...

  9. 【Oracle】浅析Oracle中的事务

    1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个工作单元操作,要么一个也不 ...

  10. Git 远程仓库(分布式版本控制系统)

    前言 远程仓库是指托管在因特网或其他网络中的你的项目的版本库.你可以有好几个远程仓库,通常有些仓库对你只读,有些则可以读写. 1.查看远程仓库 如果想查看你已经配置的远程仓库服务器,可以运行 git ...