• 1. Angular2 介绍与应用zhaolei 10/12/2015
  • 2. 概要Angular1 vs Angular2 Angular2 核心特性 学习资料
  • 3. Angular1 vs Anuglar 2vs
  • 4. Angular1
  • 5. Angular2
  • 6. Angular2 现状当前最新版本为 2.0.0-alpha.40, 2015年10月9日发布,不兼容Anguar 1.x 开发时不再依赖Traceur或者Babel, 推荐使用TypeScript进行编译为ES5 功能基本稳定,但缺乏相关文档和样例 支持Chrome,Firefox以及IE 10+
  • 7. Angular2 核心特性基于注解的组件化 依赖注入 模板及指令 属性绑定 过滤器(Pipe) 表单 路由 HTTP访问
  • 8. 基于注解的组件化Angular2中,一个最基本的组件由3个部分组成: Component: 定义组件的名称,以及要注入的服务 View: 定义组件的试图,即UI展现 Class: 组件的逻辑实现,基于ES6的class语法
  • 9. 依赖注入Angular2中,注入一般在Component完成,使用viewBindings属性。该属性是一个数组,可以注入多个服务。
  • 10. 模板及指令Angular2中,模板一般在View中完成,使用template或者templateUrl,前者是一大堆串字符,后者指向本地的文件url地址 类似于Angular1, Angular2也存在指令,不过相比Angular1少了很多,常见的指令为: ng-if: 条件判断,用于控制DOM是否生成 ng-for: 循环遍历数据,用于控制生成重复的DOM ng-switch: 类似于switch语法,匹配到数据才显示对应的DOM ng-model: 双向数据绑定语法糖。
  • 11. ng-if 指令
  • 12. ng-for 指令
  • 13. ng-switch 指令
  • 14. 属性绑定Angular2去掉了Angular1中诸如ng-click, ng-show等属性,提供了两种基本的属性 DOM自带属性或者自定义属性,如src,disabled,hidden等,用中括号括起 DOM事件或者自定义事件,如click等,用圆括号括起
  • 15. 自定义属性自定义属性一般在Component中,用properties定义,它是一个数组
  • 16. 自定义事件自定义属性一般定义在Directive中,用events定义,也是一个数组。
  • 17. 过滤器类似于Angular1,Angular2中也存在过滤器,不过它有一个新的名字:Pipe Angular2 有 uppercase, date, json, number, slice, async等内置过滤器。
  • 18. 自定义过滤器
  • 19. 表单Angular2中的Form相对比较复杂,存在ng-control, ng-control-group, ng-form-model, ng-form-control等指令。ng-control和ng-control-group必须位于Form控件下,否则无法正常运行。 ng-form-group指令可以对表单控件进行分组,一般嵌套ng-control组件 ng-form-model指令一般位于顶级,可以嵌套ng-control-group和ng-ctrol,同时支持表单校验
  • 20. Form + ng-control
  • 21. Form + ng-control-group
  • 22. Form + ng-control-model
  • 23. 路由Angular2中的路由也是基于注解来完成的,主要是@RouteConfig来配置路径和映射,[route-link]配置指向路由的地址。核心代码如下:
  • 24. HTTP访问Angular2中的HTTP服务封装了XMLHttpRequest对象,同时支持JSONP调用,可以非常方便地使用
  • 25. 学习资料https://github.com/timjacobi/angular2-education http://www.hubwiz.com/course/5599d367a164dd0d75929c76/ https://github.com/thelgevold/angular-2-samples 官方源码以及angular2.d.ts文件,里面包含最新的样例代码
  • 26. Thank You!!