01Angular 4 概述.docxVIP

Angular的概述Angular是什么Angular?是由谷歌开发与维护一个开发跨平台应用程序的Web前端开发框架，同时适用于手机与桌面。发展史Angular是Google推出的Web前端开发框架，从12年发布起就受到了强烈的关注，他首次提出了双向绑定的概念，让人耳目一新，就在2016年9月中旬，时隔4年，Google正式发布了Angular的第二代开发框架Angular 2，2017年3月推出了Angular4。Angular的故事：首先是Angular的发家史，首先在09年的时候，这两位帅哥Misko和Adam在业余时间创造了Angular，当时Misko接受了一个叫做Feedback的项目，经过6个月的迭代，代码量已经达到了17000行，维护起来非常的艰难，所以Misko就想用他手上的Angular去重写这个项目，那么重写的结果怎么样呢？代码量从17000行，惊人的减少到了1500行，并且前后也只花了3周的时间。所以可以看出这个Angular的开发效率是非常非常的高。那么这次事件之后呢，Misko的主管就十分看好这个项目，决定正式立项，并且组件专职的团队来开发和维护，而且把Angular这个开发框架正式命名为AngularJS。从这里，Angular就开始进入了快速迭代。AngularJS的痛点Angular 2特性令人兴奋的是，早在14年3月份，官方博客就有提及新Angular的开发计划，而且很快，就在同年的9月份，在NG-Europe大会上，Angular 2 正式亮相。这里值得一提的是，官方不再用AngularJS来命名新的的框架，而是直接采用Angular，把后面的JS去掉了。Angular 2经过两年的迭代开发，经过了α版本，也经过了β版本，在2016年9月正式对外发布了，真的是千呼万唤始出来。Angular的版本更新的非常快，2017年3月发布了Google团队又发布了最新的Angular 4，现在Angular 4的热乎气还没过呢，Angular 5 又要出来了，不过你也不用太过担心，因为不论是Angular 4 还是Angular 5，其内核依然是Angular 2。SPA单页应用（Single Page Application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。Angular架构概览Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架。该框架包括一系列库，有些是核心库，有些是可选库。我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML?模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。当然，这只是冰山一角。后面我们将学习更多的细节。不过，目前我们还是先关注全景图吧。这个架构图展现了 Angular 应用中的 8 个主要构造块：模块 (module)组件 (component)模板 (template)元数据 (metadata)数据绑定 (data binding)指令 (directive)服务 (service)依赖注入 (dependency injection)接下来我按顺序并结合图来讲解一下。模块 (module)Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为?Angular 模块或?NgModules。Angular 或者 Ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModul