AngularJS入门和进阶

构建此应用！

环境准备： Node.js

在终端窗口运行 node -v 和 npm -v ，来确认你的 node 版本为 v5.x.x ， npm 版本为 3.x.x 。 老版本会出错。

创建并配置项目

创建项目文件夹

mkdir angular2-quickstart
cd    angular2-quickstart

添加包定义与配置文件

往项目目录下添加下列包定义与配置文件：
package.json 列出了“快速起步”应用的依赖，并定义了一些有用的脚本。
tsconfig.json 是 TypeScript 的编译器配置文件。
typings.json 指定 TypeScript 定义文件。
systemjs.config.js 是 SystemJS 的配置文件。

安装依赖包

使用 npm 命令来安装 package.json 中列出的依赖包。请在终端窗口 ( 或 Windows 的 cmd 窗口 ) 中输入下列命令：

npm install

在 npm install 之后， typings 目录也可能不会出现。如果是这样，请手动安装它们。
npm run typings install

用 npm 添加需要的库和依赖包

Angular 应用开发者依靠 npm 包管理器来安装应用所需的库和依赖包。 Angular 开发组建议的那组初学者包是通过 dependencies 和 devDependencies 指定的。
这些脚本的用途如下：

npm start - 同时运行编译器和一个服务器，它们都工作在“监视模式”下。

npm run tsc - 运行一次 TypeScript 编译器

npm run tsc:w - 在“监视模式”下运行 TypeScript 编译器，进程持续运行，等待 TypeScript 文件的变化，一旦变化，就重新编译它们。

npm run lite - 运行 lite-server ——一个轻量级、静态的文件服务器，对使用路由的 Angular 应用提供了优秀的支持。

npm run typings - 单独运行 typings 工具

npm run postinstall - 当 npm 安装完当前包时，它会被自动调用。这里的这个脚本会安装 typings.json 中定义的 TypeScript 定义文件

我们的第一个 Angular 组件

创建一个文件夹，用于保存应用程序，并且添加一个超级简单的 Angular 组件。

Let’s create a folder to hold our application and add a super-simple Angular component.

在项目的根目录下 创建一个 app 子目录 ：

mkdir app

创建组件文件 app/app.component.ts ( 在新建的这个目录中 ) ，内容如下：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

最终的项目目录结构是这样的：

angular2-quickstart/
├── app/
│   ├── app.component.ts
│   ├── main.ts
├── node_modules .../
├── typings .../
├── index.html/
├── package.json/
├── styles.css/
├── systemjs.config.js/
├── tsconfig.json/
├── typings.json/

Angular
一套框架，多种平台
AngularJS中文社区
AngularJS 教程
阿里懒懒交流会AngularJS