由于官网给出JavaScript例子不是很完整,此文主要简单的记录用JavaScript写Angular 2 的Hello World程序。
安装配置运行环境
本文参照官网实例地址:TypeScript https://angular.cn/docs/ts/latest/quickstart.html
JavaScript https://angular.cn/docs/js/latest/quickstart.html
1.安装nodejs、npm
官网下载地址:https://nodejs.org/en/download/current/
选择安装路径后,next即可。此处安装版本号node:v6.9.1 npm:3.10.8
安装环境:win10
安装好后,可以通过cmd命令行 执行 node -v 和 npm -v来查询版本号。
如果命令找不到,可以通过配置环境变量解决。
2.本章结束后项目文件目录
angular-quickstart
|---app
| |
| |---app.component.js
| |---app.module.js
| |---main.js
|
|---package.json
|---systemjs.config.js
|---index.html
|---style.css
此处与官方简介的JavaScript目录结构不一致,主要是由于尝试systemjs,一个用于web应用程序模块管理的js,支持commonjs标准,与官方TypeScript教程中推荐的一样。之所以使用模块管理,是由于为了支持Angular 2的Component的templateurl需要用到相对路径,如果不用模块管理,则必须写出文件到根目录的全路径。
3.通过npm安装所需依赖lib
以下为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",
"angular-in-memory-web-api": "0.1.3",
"bootstrap": "^3.3.6",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}
在angular-quickstart使用命令 npm install‘
如果出现无法连接国外网站,可以设置国内镜像环境解决 。语句如下语句:
npm config set registry http://registry.cnpmjs.org
4.SystemJs配置文件
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
'app/*':'/app/*.js',
// 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',
// 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'
},
'angular-in-memory-web-api': {
defaultExtension: 'js'
}
}
});
})(this);
systemjs支持模块化,例如下边component、module所用到的require、exports、module等语句。
5.创建起始页面
<html>
<head>
<title>Angular QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required 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/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<h1>hello world module</h1>
<br/>
<my-app>Loading...</my-app>
</body>
</html>
6.创建angular 2 组件
app/app.component.js,组件中的selector属性’my-app’与index.html标签一致。则index.html中的标签,将会被app.component的template内容所替代。
var ng_core = require('@angular/core');
var AppComponent = (function(){
function AppComponent (){
}
AppComponent = ng_core.Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
}).Class({
constructor: function() {}
});
return AppComponent;
}());
exports.AppComponent = AppComponent;
7.创建angular 2 模块
app/app.module.js
var ng_core = require('@angular/core');
var platform_browser_dynamic = require('@angular/platform-browser');
var app_component = require('./app.component');
var AppModule = (function(){
function AppModule(){
};
AppModule = ng_core.NgModule({
imports: [ platform_browser_dynamic.BrowserModule ],
declarations: [ app_component.AppComponent ],
bootstrap: [ app_component.AppComponent ]
})
.Class({
constructor: function() {}
});
return AppModule;
}());
exports.AppModule = AppModule;
8.创建入口
app/main.js
var plantform_browser_dynamic = require('@angular/platform-browser-dynamic');
var app_module = require('./app.module');
var plantform = plantform_browser_dynamic.platformBrowserDynamic();
plantform.bootstrapModule(app_module.AppModule);
9.创建样式CSS
style.css
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
10.运行项目
执行命令npm start
运行成功后,显示如下内容。
hello world module
My First Angular App
备注:javascript初学,不懂太多。