目录
1.hello world!
2.配置开发环境
源代码下载
链接: https://pan.baidu.com/s/1i5pGloT 密码: g7ub
注意:这一小节的内容，并非生产环境的做法，读者可以不必操作，看演示就好了。
为了简单快速的运行ng2程序，那么引入直接angular2版本和页面的基本框架。
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <app></app> <!--使用app组件--> <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.min.js"> </script> <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.umd.min.js"> </script> <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-all.umd.min.js"> </script> <script src="./app.js"></script> </body> </html>
app.js:
var App=ng.core.Component({ //定义了名称为App的组件。 selector:"app", //匹配所有的app标签 template:"<h1>hello {{target}}</h1>" }) .Class({ //Class函数传递了一个对象字面量，只有constuctor方法 constructor:function(){ this.target="world"; } }); ng.platform.browser.bootstrap(App); //ng.platform.browser是命名空间
直接打开index.html，那么html显示为:
结论:并没有用到typescript，所以它不是必须的，但ng2强烈推荐使用。
二: 配置开发环境和angular2的typescript实现
1.通过git克隆项目
step1:安装git
到网站下载exe文件，https://github.com/git-for-windows/git/releases/download/v2.13.2.windows.1/Git-2.13.2-64-bit.exe。安装的过程我只是改了一下安装目录。
安装目录:
检测git是否安装正确:
首先在开始菜单里找到git cmd(也可以吧快捷方式发送到桌面)，然后输出命令git --version。
step2:进入自己的项目目录，运行命令 git clone https://github.com/mgechev/switching-to-angular2.git 。
已经克隆下来。good!
step3:进入项目目录，模块安装，然后启动Server。
$ npm install ;
$ npm start;//启动server
浏览器显示结果为:
success！
step4:上手试玩(optional)
内容替换，switching-to-angular2/app/ch4/ts/hello-world/app.ts:
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'app',
templateUrl: './app.html'
})
class App {
target:string;
constructor() {
this.target = 'world';
}
}
bootstrap(App);
浏览器显示结果为:
2.hello-world深度解析
注意:代码位于switching-to-angular2/app/ch4/ts/hello-world目录)
首先，看一下一共有4个文件。
index.html负责hello-world的首页(默认)文件的显示，app.html负责app模板的内容，meta.json是一些元信息，app.ts负责js代码逻辑。
接下来详细看index.html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><%= TITLE %></title> <!--TITLE变量注入--> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- inject:css --> <!-- endinject --> </head> <body> <app>Loading...</app> <!--app组件--> <!-- inject:js --> <!-- endinject --> <%= INIT %> <!--INIT是变量注入--> </body> </html>
app标签有文本内容，"Loading"一直处于可见状态，直到应用启动好、主组件渲染完毕为止。而 <%= TITLE %> 和 <%= INIT %> 是用来注入变量的。这些变量是在哪里定义的呢？
另，传授一个全局搜索文本的方法:
step1:文件目录右键，选择find in path
step2:搜索"TITLE"。
所以，它的定义在switching-to-angular2/tools/tasks的build.index.ts文件中。
build.index.ts:
import {join, sep} from 'path';
import {APP_SRC, APP_DEST, DEPENDENCIES, SYSTEM_CONFIG, ENV} from '../config';
import {transformPath, templateLocals} from '../utils';
export = function buildIndexDev(gulp, plugins) {
return function () {
return gulp.src(join(APP_SRC, '**', 'index.html'))
// NOTE: There might be a way to pipe in loop.
.pipe(inject())
.pipe(plugins.template(
require('merge')(templateLocals(), {
TITLE: 'Switching to Angular 2',
INIT: `
<script>
System.config(${JSON.stringify(SYSTEM_CONFIG)});
System.import("./app")
.catch(function () {
console.log("Report this error to https://github.com/mgechev/switching-to-angular2/issues", e);
});
</script>`
})
))
.pipe(gulp.dest(APP_DEST));
};
function inject() {
return plugins.inject(gulp.src(getInjectablesDependenciesRef(), { read: false }), {
transform: transformPath(plugins, 'dev')
});
}
function getInjectablesDependenciesRef() {
let shims = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === 'shims');
let libs = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === 'libs');
let all = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === true);
return shims.concat(libs).concat(all).map(mapPath);
}
function mapPath(dep) {
let prodPath = join(dep.dest, dep.src.split(sep).pop());
return ('prod' === ENV ? prodPath : dep.src );
}
};