码迷,mamicode.com
首页 > 其他好文 > 详细

Angular 快速入门

时间:2019-01-13 13:44:57      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:lang   angularjs   ide   产生   height   size   编辑器   监测   自定义   

Angular 快速入门


AngularJS 官方网址

Angular:https://www.angular.cn/

Angular官网:https://angularjs.org/

  技术分享图片

AngularJS 1.X 的困境

  1. 饱受诟病的性能问题。
  2. 落后当前web的发展理念(如组件开发方式)
  3.  对手机端支持不够友好

Angular 2.x 特性

16年5月正式发布。

2版本取消了JS的叫法,直接叫做 Angular

2版本不能兼容1版本的代码。

  1. 移除 controller + $scope 设计,改用组件式开发(更易上手)
  2. 性能更好(渲染更快,变化监测效率更高)
  3. 优先为移动端应用设计(angular mobile toolkit)
  4. 更加贴合未来的标准(如/ES67,WebComponent)

  技术分享图片

Angular2 的核心概念

  技术分享图片

组件

  技术分享图片

组件使用案例

  技术分享图片

组件要素

   技术分享图片

组件的通讯机制

  技术分享图片

组件全生命周期

  技术分享图片

组件示例

  技术分享图片

元数据与装饰器

  技术分享图片

模板

  技术分享图片

数据绑定

  技术分享图片

属性绑定-[value]  :把组件类的数据传递到组件模板中。

  技术分享图片

事件绑定-[keyup] :把模板产生的数据通过函数调用传递到组件类。

  技术分享图片

双向绑定-[(ngModel)] :实现数据双向流动。

  技术分享图片

组件渲染

   技术分享图片

组件树

  技术分享图片

 数据流向

  技术分享图片

指令

   技术分享图片

案例

   技术分享图片

自定义指令

  技术分享图片

服务

服务是实现专一目的的逻辑单元,如日志服务。

  技术分享图片

依赖注入

组件一如外部构建(如服务)的一种机制。

  技术分享图片

  技术分享图片

分层注入

   技术分享图片

模块

  1. 框架代码以模块形式组织(文件模块)
  2. 功能单元以模块形式组织(应用模块)

 文件模块

  技术分享图片

文件模块使用

  技术分享图片

应用模块

  应用模块就是对应用类零散的组件、指令、服务等按照功能进行归类包装。

  技术分享图片

  同模块的指令可以相互使用同模块的组件,跨模块的不可以。

  技术分享图片

应用模块

  技术分享图片

  技术分享图片

 

核心概念总览图

  技术分享图片

Angular 快速上手

TypeScript

  技术分享图片

TypeScript 是微软开发的编程语言。

  JavaScript 的超集,兼容 JavaScript。

  运行前需要预编译生成 JavaScript 代码。

  加入类型判断,编译时进行类型检查。

  文件扩展名为 .ts 。

 案例

   技术分享图片

  TypeScript = Type + JavaScript

类与接口

  技术分享图片

装饰器

一种特殊的类型的声明。

能够被附加到类、方法、访问符、属性或参数上。

  技术分享图片

想要了解更多,浏览TypeScript官网:https://www.typescriptlang.org

 开发环境的准备

Node.js :推荐使用6.0以上版本。

webpack:打包工具,可以使用 npm install -g webpack 安装。

开发IDE开发工具(VS Code) :微软推出的免费跨平台编辑器,支持TypeScript 语法及高亮提示。

webpack 原理

  技术分享图片

 

   技术分享图片

 

Angular 快速入门

标签:lang   angularjs   ide   产生   height   size   编辑器   监测   自定义   

原文地址:https://www.cnblogs.com/wjw1014/p/10262309.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!