目录
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 ); } };