AngularJS2
2024-08-29 21:53:54
//package.json 用来标记本项目所需的npm依赖包
{ "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 定义了TS编译器如何生成JS代码 { "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镜像,安装如下:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install
如果不受网络限制,可以直接npm install
创建Angular组件
组件(Component)是构成Angular应用的基础,一个组件包含一个特定功能,组件之间协同工作组成完整的应用程序。
每个Angular应用至少包含一个组件:根组件,这里名叫AppComponent
app/app.component.ts:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' }) export class AppComponent { }
创建Angular模块(应用的入口点)
每个Angular应用至少包含一个模块:根模块,这里叫AppModule
app/app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
加载AppModule
//app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);
定义应用的宿主页面:
index.html
<html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <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> <my-app>Loading...</my-app> </body> </html>
编译并运行应用
npm start
最新文章
- 移除HTML5 input在type=";number";时的上下小箭头
- Windows server 2012远程桌面会话主机和远程桌面授权,server2012
- berkeley db 内存池 LRU算法
- 基于RequireJS和JQuery的模块化编程——常见问题解析
- Android TabHost 动态修改图标或者动态改变标题
- MSBuild编译扩展
- URL编码 URLEncoder 示例
- Python 一路走来 DOM &; Jquery
- hdu 4740 The Donkey of Gui Zhou(dfs模拟好题)
- 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
- Cocos2D:塔防游戏制作之旅(二)
- AtomicInteger类的使用
- vivado 下安装modelsim
- C# 套接字编程:Scoket,我用Scoket做的C# Windows应用程序如下:
- walsh矩阵
- hibernate中多对多的注解配置
- 旧文备份:CANopen协议中SDO服务
- c#写一个网站后台扫描器
- Centos6.8/7.0搭建Git服务http访问方式
- sublime text 2windows下常用快捷键