参考连接？不如说是照搬链接。 AngularJs官网地址快速起步地址 。
对于一个一直只是用jq，偶尔学习点Knockout js，了解一点mvvm结构的前端来说，学习Angular2还是有点困难的。好了，废话少说。开始快速起步Demo案例的学习
首先选择一个编写前端代码的IDE.选择的有很多，比如SublimeText,JetBrains WebStorm等，我选择的是VsCode，这个更贴近我。一些智能提示，插件，对各个语言的支持比较广泛，当然开发AngularJs2也是合适的。
环境准备
首先下载安装vscode。下载地址http://code.visualstudio.com/.
下载按照Node.js,https://nodejs.org/en/ 为什么要安装它，因为要安装包，而它,Node.js 的包管理器 npm，是全球最大的开源库生态系统。安装好之后NPM也安装好了。在cmd中输入node -v命令可以查看版本
输入npm -v 命令也可以查看npm的版本。这就为下面的安装包打好了基础。
步骤 1 ：创建并配置本项目
这一步我们将：
创建项目目录
创建配置文件
安装包
创建项目目录 angular-quickstart。
创建配置文件
典型的 Angular 项目需要一系列配置文件
package.json 用来标记出本项目所需的 npm 依赖包。 就是该项目需要哪些包 tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。 systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。 就是先安装很多包，需要用的时候导入到项目中就行在你的项目目录中创建这些文件，并从下面的例子框中拷贝粘贴文本来填充它们。
package.json
{
" name " : " angular-quickstart " ,
" version " : " 1.0.0 " ,
" scripts " : {
" start " : " tsc && concurrently \"tsc -w\" \"lite-server\" " ,
" lite " : " lite-server " ,
" tsc " : " tsc " ,
" tsc:w " : " tsc -w "
},
" licenses " : [
{
" type " : " MIT " ,
" url " : " https://github.com/angular/angular.io/blob/master/LICENSE "
}
],
" dependencies " : {
" @angular/common " : " ~2.1.1 " ,
" @angular/compiler " : " ~2.1.1 " ,
" @angular/core " : " ~2.1.1 " ,
" @angular/forms " : " ~2.1.1 " ,
" @angular/http " : " ~2.1.1 " ,
" @angular/platform-browser " : " ~2.1.1 " ,
" @angular/platform-browser-dynamic " : " ~2.1.1 " ,
" @angular/router " : " ~3.1.1 " ,
" @angular/upgrade " : " ~2.1.1 " ,
" angular-in-memory-web-api " : " ~0.1.13 " ,
" core-js " : " ^2.4.1 " ,
" reflect-metadata " : " ^0.1.8 " ,
" rxjs " : " 5.0.0-beta.12 " ,
" systemjs " : " 0.19.39 " ,
" zone.js " : " ^0.6.25 "
},
" devDependencies " : {
" @types/core-js " : " ^0.9.34 " ,
" @types/node " : " ^6.0.45 " ,
" concurrently " : " ^3.0.0 " ,
" lite-server " : " ^2.2.2 " ,
" typescript " : " ^2.0.3 "
}
}
tsconfig.json
{
" compilerOptions " : {
" target " : " es5 " ,
" module " : " commonjs " ,
" moduleResolution " : " node " ,
" sourceMap " : true ,
" emitDecoratorMetadata " : true ,
" experimentalDecorators " : true ,
" removeComments " : false ,
" noImplicitAny " : false
}
}
systemjs.config.js
/* *
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function ( global ) {
System.config({
paths: {
// paths serve as alias
' npm: ' : ' node_modules/ '
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: ' app ' ,
// angular bundles
' @angular/core ' : ' npm:@angular/core/bundles/core.umd.js ' ,
' @angular/common ' : ' npm:@angular/common/bundles/common.umd.js ' ,
' @angular/compiler ' : ' npm:@angular/compiler/bundles/compiler.umd.js ' ,
' @angular/platform-browser ' : ' npm:@angular/platform-browser/bundles/platform-browser.umd.js ' ,
' @angular/platform-browser-dynamic ' : ' npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js ' ,
' @angular/http ' : ' npm:@angular/http/bundles/http.umd.js ' ,
' @angular/router ' : ' npm:@angular/router/bundles/router.umd.js ' ,
' @angular/forms ' : ' npm:@angular/forms/bundles/forms.umd.js ' ,
' @angular/upgrade ' : ' npm:@angular/upgrade/bundles/upgrade.umd.js ' ,
// other libraries
' rxjs ' : ' npm:rxjs ' ,
' angular-in-memory-web-api ' : ' npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js '
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ' ./main.js ' ,
defaultExtension: ' js '
},
rxjs: {
defaultExtension: ' js '
}
}
});
})( this );
安装依赖包
使用 npm 命令来安装 package.json 中列出的依赖包。请在 Windows 的 cmd 窗口(或者git的bash) 中输入下列命令：npm install
在安装期间可能出现红色的错误信息，你还会看到 npm WARN 信息。不过不用担心，只要末尾处没有 npm ERR! 信息就算成功了。
Error messages—in red—might appear during the install, and you might see npm WARN messages. As long as there are no npm ERR! messages at the end, you can assume success.
NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件，以得到较小的文件体积。
每个 Angular 应用都至少有一个模块： 根模块 ，在这里它叫做 AppModule 。
** 在应用的根目录下创建 app 子目录：
使用下列内容创建 app/app.module.ts 文件：
1 import { NgModule } from ' @angular/core ' ;
2 import { BrowserModule } from ' @angular/platform-browser ' ;
3
4 @NgModule({
5 imports: [ BrowserModule ]
6 })
7 export class AppModule { }
View Code
查看更多关于记一次Angular2环境搭建及My First Angular App小demo呈现的详细内容...