AngularJS2 JavaScript 环境配置:
C:\Program Files (x86)\nodejs\node_modules\npm
本章节使用到的文件目录结构如下所示:
创建配置文件
创建目录
$ mkdir angular-quickstart $ cd angular-quickstart
C:\Program Files (x86)\nodejs\node_modules\npm\angular-quickstart
载入需要的库
这里我们推荐使用 npm 来作为包的管理工具,如果你还没安装npm或者不了解 npm 可以查看我们的教程:NPM 使用介绍。
创建 package.json 文件,代码如下所示:
package.json 文件:
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0" } }
由于 npm 官网镜像国内访问太慢,这里我使用了淘宝的npm镜像,安装方法如下:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
执行后我们就可以使用 cnpm 命令来安装模块:
$ cnpm install
执行成功后,angular-quickstart 目录下就会生成一个 node_modules 目录,这里包含了我们这个实例需要的模块。
创建 Angular 组件
组件(Component)是构成 Angular 应用的基础和核心,一个组件包装了一个特定的功能,并且组件之间协同工作以组装成一个完整的应用程序。
一般来说,一个组件就是一个用于控制视图模板的JavaScript类。
接下来我们在 angular-quickstart 创建一个 app 的目录:
$ mkdir app $ cd app
C:\Program Files (x86)\nodejs\node_modules\npm\angular-quickstart\app
并添加组件文件 app.component.js ,内如如下:
app.component.js 文件:
(function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>我的第一个 Angular 应用</h1>' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));
添加 NgModule
Angular 应用由 Angular 模块组成,该模块包含了 Angular 应用所需要的组件及其他任何东西。
接下来我们创建 app/app.module.js 文件,内容如下:
app.module.js 文件:
(function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));
启动应用
添加 app/main.js 文件:
app/main.js 文件:
(function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {}));接下来创建 index.html,代码如下所示:
index.html 文件:
<html> <head> <meta charset="utf-8"> <title>Angular 2 实例 - 菜鸟教程(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. 载入库 --> <!-- IE 需要 polyfill --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/@angular/core/bundles/core.umd.js"></script> <script src="node_modules/@angular/common/bundles/common.umd.js"></script> <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script> <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script> <!-- 2. 载入 'modules' --> <script src='app/app.component.js'></script> <script src='app/app.module.js'></script> <script src='app/main.js'></script> </head> <!-- 3. 显示应用 --> <body> <my-app>Loading...</my-app> </body> </html>
添加一些样式
styles.css 文件代码为:
styles.css 文件:
h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } body { margin: 2em; }
C:\Program Files (x86)\nodejs\node_modules\npm\angular-quickstart
打开终端,输入以下命令:
$ npm start
访问 http://localhost:3000/,浏览器显示结果为:
这样我们的第一个 Angular2 的应用就算创建完成了,本文所使用的源码可以通过以下方式下载,不包含 node_modules。
详细了解:http://www.runoob.com/angularjs2/angularjs2-javascript-setup.html