Angular初探

　　AngularJS是Google开发的一个MVC框架，这是1.0的版本。目前有1.0,2.0,4.0三个版本。2.0之后就是Angular。今年三月份Angular 4.0刚刚推出，所以关于Angular最新版的资料是寥寥无几。初学的话还是从1.0开始学起。
　　推荐两个关于AngularJS的网站：
　　angularjs 1官网 或 angular2.0/4.0官网
　　
AngularJS 通过新的属性和表达式扩展了 HTML。可以构建一个单一页面应用程序（SPAs：Single Page Applications）。AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。在github上提供各个 angular.js 版本下载githubAnglar的学习曲线比较陡，不是一般的技术人员可以掌握，所以学习起来会变得非常有趣。

AngularJS的四大核心特性：

1.MVC
Model:数据模型层
View:视图层，负责展示
Controller:业务逻辑和控制逻辑
2.模块化 Model

3.指令系统（特有）

4.双向数据绑定（特有）

在任何页面中必须包含的关键属性是ng-app，它定义了一个Angular应用。一个页面上有且仅有一个ng-app指令，声明引用，类似于C语言中的main函数。

AngularJS的MVC是借助于$scopr实现的
rootScope处于最顶层的作用域对象
作用域有层次结构，和JS中原型查找的机制是一样的
$scope是一个POJO（Plain Old JavaScript Object），提供了工具

Angular 2 是Google推出的一个跨平台全终端的框架，和目前比较火的React和Vue.js相比，Angular2更适合从原生App开发或后端Java/.Net等转型过来开发前端的程序员，因为其开发模型更接近于传统强类型语言的模式

Angular 2第一个小应用 Hello Angular

1.打开terminal（命令行窗口），输入 ng new hello-angular --skip-install , 然后进入 hello-angular 目录执行 cnpm install。

2.推荐在新建 project 时忽略安装 ( 加 –skip-install 参数)，然后用 cnpm 执行依赖安装

3.新建了一个名为“hello-angular”的工程，进入该工程目录，输入 code

|-- .editorconfig //通用的编辑器配置文件，以后换IDE时可以保持一些设置的平滑迁移
|-- .gitignore //需要Git忽略的文件列表
|-- angular-cli.json //Angular-CLI配置文件
|-- karma.conf.js //Karma单元测试配置文件
|-- package.json //node打包文件
|-- protractor.conf.js //端到端测试配置文件（集成测试）
|-- README.md
|-- tslint.json //代码Lint静态检查的配置
|-- e2e //端到端测试代码目录
| |-- app.e2e-spec.ts
| |-- app.po.ts
| |-- tsconfig.json
|-- src //源码
|-- favicon.ico //站点收藏图标
|-- index.html //入口页面
|-- main.ts //入口ts文件
|-- polyfills.ts //针对浏览器能力增强的polyfills引用文件
|-- styles.css //全局样式文件
|-- test.ts //测试入口文件
|-- tsconfig.json //TypeScript配置文件
|-- typings.d.ts //项目中使用的TypeScript类型定义引用文件
|-- app //应用目录
| |-- app.component.css //引导性组件的样式文件
| |-- app.component.html //引导性组件的HTML模板
| |-- app.component.spec.ts //引导性组件测试文件
| |-- app.component.ts //系统引导性组件
| |-- app.module.ts //应用根模块
| |-- index.ts //应用入口
|-- assets //站点资源文件夹
| |-- .gitkeep
|-- environments
|-- environment.prod.ts //生产环境配置文件
|-- environment.ts //环境配置

4.打开浏览器输入 http://localhost:4200 即可看到程序运行成功

5.所有都是angular自动替我们生成的，所以打开 src/app/app.component.ts 修改title： title = 'Hello Angular';，保存后查看浏览器，结果已经更新了，热装载的特性使得开发变得很方便。

创建第一个组件

1.为app增加一个组件（Component），在命令行窗口输入

ng generate component login --inline-template --inline-style 

2.参数generate是用来生成文件的，参数component是说明我们要生成一个组件，login是组件名称可以自定义。最后两个参数是告诉angular-cli：生成组件时，请把组件的HTML模板和CSS样式和组件放在同一个文件中

3.可以简化命令改写成

 ng g c login -it -is

4.angular-cli为我们在\src\app目录下生成了一个新文件夹login，在login目录下生成了2个文件，其中 login.component.spec.ts 是测试文件

5.另一个是 login.component.ts 是新建的Component

6.Angular提倡的文件命名方式是这样的：组件名称.component.ts

7.组件的HTML模板命名为： 组件名称.component.html

8.组件的样式文件命名为： 组件名称.component.css

9.新生成的Login组件源码如下：

import { Component, OnInit } from '@angular/core'; //@Component是Angular提供的装饰器函数，用来描述Compoent的元数据 //其中selector是指这个组件的在HTML模板中的标签是什么 //template是嵌入（inline）的HTML模板，如果使用单独文件可用templateUrl //styles是嵌入（inline）的CSS样式，如果使用单独文件可用styleUrls @Component({ selector: 'app-login', template: ` <p> login Works! </p> `, styles: [] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } }

10.组件建成后，进行使用。注意上面的代码中@Component修饰配置中的 selector: ‘app-login’，这意味着可以在其他组件的template中使用 <app-login></app-login>来引用的这个组件。

11.打开 hello-angular\src\app\app.component.html 加入我们的组件引用

<h1>
  {{title}}
</h1>
<app-login></app-login>

12.保存后返回浏览器，第一个组件显示

模块的概念

1.模块就是提供相对独立功能的功能块，每块完成特定的工作领域。

2.Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了Http的处理等等。

3.每个Angular应用至少有一个模块类 —— 根模块。如同Java的主方法一样，通过引导根模块来启动应用。

4.根模块的类名叫做AppModule，放在 hello-angular\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; @NgModule({ declarations: [ AppComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

5.@NgModule装饰器用来为模块定义元数据。

6.declarations列出了应用中的顶层组件，包括引导性组件AppComponent和创建的LoginComponent。

7.在module里面声明的组件在module范围内都可以直接使用，也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件，就像在AppComponent的模板末尾加上 一样。

8.imports引入了个辅助模块：

• BrowserModule提供了运行在浏览器中的应用所需要的关键服务（Service）和指令（Directive），所有需要在浏览器中跑的应用都必须引用
• FormsModule提供了表单处理和双向绑定等服务和指令
• HttpModule提供Http请求和响应的服务

9.providers列出会在此模块中“注入”的服务（Service）

10.bootstrap指明哪个组件为引导性组件。当Angular引导应用时，它会在DOM中渲染这个引导性组件，并把结果放进index.html的该组件的元素标签中

<!doctype html> <html> <head> <meta charset="utf-8"> <title>HelloAngular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> </body> </html>

引导过程

1.Angular2通过在main.ts中引导AppModule来启动应用。

2.不同的平台，Angular提供了不同的引导选项。

3.下面是通过即时（JiT）编译器动态引导，一般在进行开发调试时，默认采用这种方式。

//main.ts import './polyfills.ts'; // 连同Angular编译器一起发布到浏览器 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { environment } from './environments/environment'; import { AppModule } from './app/'; if (environment.production) { enableProdMode(); } //Angular编译器在浏览器中编译并引导该应用 platformBrowserDynamic().bootstrapModule(AppModule);

4.还有一种是通过使用预编译器（AoT - Ahead-Of-Time）进行静态引导，静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。

5.使用static选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的

6.AppModuleNgFactory的语法和动态引导AppModule类的方式很相似。

// 不把编译器发布到浏览器 import { platformBrowser } from '@angular/platform-browser'; // 静态编译器会生成一个AppModule的工厂AppModuleNgFactory import { AppModuleNgFactory } from './app.module.ngfactory'; // 引导AppModuleNgFactory platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

主要参考资料：
[1]. 王芃著，《Angular》，机械工业出版社，2017-02-11
[2]. ［美］Phil Ballard著，《JavaScript入门经典 第6版》，人民邮电出版社，2016-06-01