AngularJS2.0 入门教程（一）设置本地开发环境

随着angualr1.xx版本，给大家带来了多的爱好，随着几年的发展angular2.0发布，相信给大家也带了更好更多的新玩意儿，大家也期待已久，在此带领大家一起走入angular2.0的新世界！

首先一起聊聊angular2.0带来的新特性：

1.移动：新的版本将专注于移动应用的开发。依据是它更容易处理桌面方面的事情，一旦挑战涉及到移动（性能、加载时间），注重这方面会使问题得到解决。

2.模块化：各个模块将从Angular的核心中移除，从而获得更好的性能。这意味着你可以选择你需要的零件。

3.现代化：Angular 2.0将把ES6和“常青”现代浏览器（自动更新到最新版本）作为目标。这意味着开发者可以专注于业务领域相关的代码。

4.结合了TypeScript js语法开发。

5.路由的多级嵌套等

看到这里相信大家已经很兴奋了，那就结合实例来跑起官方的demo吧！

随着node js 的越来越火，想跑起来Angular 2.0，我们需要安装本地的node 环境，

具体安装方法请参照node 官方说明，在此不做更多的说明。

Node.js是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时。Node.js使用事件驱动的非阻塞I / O模型，使其轻便且高效。Node.js的包生态系统，npm，是世界上最大的开源图书馆生态系统。

创建一个项目 angular2-quickstart

设置本地开发环境

该快速入门直播编码例子是角操场。这是不是你想建立一个真正的应用程序。你应该在当地发展自己的机器上......这也是我们如何认为你应该学习角。

设置您的机器上的一个新项目是快速和容易与快速入门种子，保持在GitHub上。

请确保您有节点和NPM安装。然后 ...

创建一个项目文件夹（你可以把它quickstart和后来将其重命名）。

克隆或者下载的快速入门种子到项目文件夹。

安装NPM包。
运行npm start启动示例应用程序。

克隆

执行克隆到发射步骤，这些终端命令。
git clone https://github.com/angular/quickstart.git 
cd quickstart
npm install
npm start

是什么在快速入门的种子？

该快速入门种子包含相同的应用程序的快速入门操场，甚至有自己的游乐场这可容纳在一个活的编码环境更丰富的实例发展。

但它的真正目的是提供了坚实的基础当地的发展。因此，有许多文件在项目文件夹你的机器上，其中大部分可以稍后了解。

重点在以下三个打字稿（.ts）文件的/app文件夹。

应用
app/

app.component.ts
app.module.ts
main.ts

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

所有的指南和食谱有至少这三个文件。每个文件都有不同的目的和应用的增长演变独立。

完成以上步骤即可运行浏览：

npm start

本文来源：https://zhuanlan.zhihu.com/p/24075637

如果给你带来帮助，欢迎微信或支付宝扫一扫，赞一下。