Angular2 入门详解

　　AngularJS 2 快速入门

npm是什么？   npm其实是Node.js Package Manager的简称，是Node.js包管理工具（package manager）

安装Node.js之后配置npm：

配置npm的全局模块的存放路径以及cache的路径:

查看全局模块路径：npm config get prefix

查看全局cache路径：npm config get cache

在NodeJs下建立"node_global"及"node_cache"两个文件夹:

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

　　　　安装相关环境:

设置淘宝镜像：

npm config set registry https://registry.npm.taobao.org -g

安装淘宝的npm镜像，安装之后可以使用cnpm替换npm执行命令：

npm install cnpm --registry=https://registry.npm.taobao.org -g

更新npm:    npm install npm@latest -g

键入命令： npm install express 回车等待安装express

键入命令： npm install jade 回车等待安装jade

键入命令： npm install mysql回车等待安装mysql

安装cli:    npm install -g angular-cli

更新cli先卸载再安装：  npm uninstall -g angular-cli    npm cache clean

npm install -g angular-cli@latest

查看已安装全局包： npm list -g --depth 0

　　第一个Angular 组件

组件是Angular中最基本的一个概念。 一个组件包含一个视图-我们用来展示信息或者完成用户交互的页面。

技术上来讲， 一个组件就是一个控制模板试图的类。

　　在Angular2中有三种类型的指令（Directive）

1. 组件 — 拥有模板的指令。

2. 结构型指令 － 通过添加和移除DOM元素来改变DOM结构的指令。例如：NgFor, NgIf

3. 属性型指令 - 改变元素显示和行为的指令。例如：NgStyle

　　指令的输入（Input）属性

如果属性出现在了模板表达式等号(=)的右侧，它就是一个源。如果它出现在了方括号([ ])中，并且出现在等号(=)的左侧，它就是一个目标。

　　组件详解：

exports使一个文件转变成一个模块。 文件名（不包含扩展名）通常就是这个模块的名称。

import：当我们需要引入其他模块的时候，直接import进来就可以使用。

Componet：方法来定义一个组件的注解，这个方法需要引入 angular2/core 才可以使用

import {Component} from 'angular2/core';

@Component：告诉Angular这个类是一个组件。里面的参数有两个selector 和 template.

selector:   创建的组件的名字，就像HTML标签的名字一样

template：控制这个组件的视图，告诉Angular怎么去渲染这个视图。

templateUrl: HTML模板，使用相对路径，./表示这个组件文件所在的当前目录，../表示上一级目录

styleUrls:  HTML模板使用的样式表，可以有多个

样例：

@Component({

selector: 'my-app',

template: '<h1>My First Angular 2 App</h1>'，

templateUrl: './app.component.html',

styleUrls: ['app/app.component.css']，

})

在 html 中，用 <a> 标签指定路由的写法为:

// 主动路由跳转：路由名称，路由参数

<a href="#/user/88">Tom</a>

　　模块详解：module

在顶部使用import语句，导入模块或者组件需要使用的外部模块。在模块中需要使用自己创建的组件或者其他服务、指令，也需要import。import语句之后，使用@NgModule()语句描述本模块的元数据。

declarations：声明属于本模块的组件，每个组件必须在且仅在一个模块中声明。

imports:引入本模块中用到的模块，该模块是处于import语句引入的模块中。

providers:声明模块中使用的服务的提供者。

bootstrap:根模块中的引导组件，应用启动过程中，会创建这个数组中的组件并插入到HTML中，一般只有一个引导组件。

最后，使用export语句，创建模块的类并暴露出去。模块、组件只有暴露出去，其他的模块才能引用。

　　事件响应详解：

添加事件格式如下：(click)="onClickMe()"

<button (click)="onClickMe()" [ngClass]=”getMethod”>点击我!</button>

　　Angular用法：

1.数据绑定：ng-bind=""

2.Ng-click 点击事件   Ng-mouseover 鼠标移入事件

3.Ng-show:显示元素      Ng-hide隐藏元素

4.双向绑定：{{}}        {{msg}}

5.页面元素显示与隐藏：  ng-show  　　ng-hide

6.响应事件：ng-click　　ng-change

　　Appendices(附录)：

Appendix: Browser ES6 support

在index.html 文件的其他脚本之前加载垫片库

<script src="node_modules/es6-shim/es6-shim.js"></script>

Appendix: package.json      (注：JSON文件不支持注释，引用时请清除注释)

在npm的package.json文件中，指定我们需要使用的包，包列在dependencies和 devDependencies中。

 {

   "dependencies": {

     "angular2": "2.0.0-beta.0",

     "systemjs": "0.19.6",

     "es6-promise": "^3.0.2",

     "es6-shim": "^0.33.3",

     "reflect-metadata": "0.1.2",

     "rxjs": "5.0.0-beta.0",

     "zone.js": "0.5.10"

   },

   "devDependencies": {

     "concurrently": "^1.0.0",

     "lite-server": "^1.3.1",

     "typescript": "^1.7.3"

   }

 }

在package.json中，包含可选的scripts配置节，我们可以定义一些有用的命令来执行开发和构建任务。建议的package.json中包含了一些常用脚本命令。

{

"scripts": {

"tsc": "tsc",

"tsc:w": "tsc -w",

"lite": "lite-server",

"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "

}

}

Appendix: TypeScript configuration

添加一个TypgeScript配置文件tscofnig.json到我们的项目，在编译生成JavaScript的时候来指导编译器。

当noImplicitAny标志为false的时候，如果编译器不能根据变量的使用来推断变量的类型，直接默认为any 类型。这就是为什么称为"implicitly any"。

当noImplicitAny 标志为true的时候，TypeScript 编译器不能推断类型，它仍然生成JavaScript 文件，但是报告一个错误。

可以使用下面的标志来抑制它们：  "suppressImplicitAnyIndexErrors":true

Appendix: SystemJS Configuration

SystemJS 加载应用和库模块，在index.html添加SystemJS配置

System.import 调用告诉SystemJS 导入boot文件boot是我们告诉Angular启动应用的地方我们同时也捕获和记录启动中的错误信息到控制台中。其它的模块或者由 Angular 自身或者由前面的模块加载。

Appendix: boot.ts

从 angular2/platform/browser 中导入 bootstrap 函数，bootstrap 用于引导Module启动应用。

Angular2教程资料：

　　  http://angular2.axuer.com/

　　  https://www.angular.cn/

W3cSchool:  　　https://www.w3cschool.cn/angular2/

菜鸟教程： 　　  http://www.runoob.com/angularjs2/angularjs2-tutorial.html