angular2入门-第一个angular2 App
来源:互联网 发布:数据响应200 编辑:程序博客网 时间:2024/06/05 15:23
建立一个angular包括以下步骤:
* 运行环境:安装Node.js* Step 1: 创建一个app项目,定义好包依赖和指定项目设置* Step 2: 创建Angular App的根组件(Component)* Setp 3: 创建一个Angular模块(Module)* Step 4: 添加`main.ts`,标识Angular的根组件* Step 5: 添加网页应用`index.html`* Step 6: 构建并运行App
安装运行环境Node.js
如果你的机器上没有安装Node.js和npm,要先安装,如果已经安装,需要检查一下,Node运行版本是否为4.x和Npm版本为3.x以上。Node下载地址:https://nodejs.org/en/download/ ,如果需要源代码可以自行访问github下载。
$ node -v$ npm -v
Step 1:创建和配置项目
(1)建立文件夹
$ mkdir angular2$ cd angular2
(2) 添加包定义和配置文件至angular2目录
- package.json 列出了本Demo依赖的脚本(scripts).更多细节可以查看[Npm包配置](https://angular.io/docs/ts/latest/guide/npm-packages.html)- tsconfig.json 这里定义了TypeScript编译器的配置。TypeScript是Angular2的主要语言,但由于浏览器不能直接使用TypeScript。详细[TypeScript配置](https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig)可以查看。- typings.json 标识TypeScript 的定义文件。- systemjs.config.js 系统配置文件。
package.json:
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.5", "@angular/compiler": "2.0.0-rc.5", "@angular/compiler-cli": "0.5.0", "@angular/core": "2.0.0-rc.5", "@angular/forms": "0.3.0", "@angular/http": "2.0.0-rc.5", "@angular/platform-browser": "2.0.0-rc.5", "@angular/platform-browser-dynamic": "2.0.0-rc.5", "@angular/router": "3.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.5", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "systemjs": "0.19.27", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.17", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^1.8.10", "typings":"^1.3.2" }}
tsconfig.json:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }}
typings.json
{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160807145350" }}
systemjs.config.js
/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */(function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Individual files (~300 requests): function packIndex(pkgName) { packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config);})(this);
(3) 安装包(package)
这里使用npm来安装package.json里定义的依赖包。
$npm install$npm run typings install
angular应用开发者依赖npm包管理工具安装和打包所需依赖。
工具类脚本
我们已经在package.json文件中添加一些npm脚本来处理公共的开发任务。
{ "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }}
我们在使用npm run
方式执行npm脚本加上一个脚本名作为参数可以执行指定的脚本,而有些方法并不需要run关键字。(比如: start,只需npm start即可)
npm start - 同时启动编译器和服务器,启动后处于
监视模式
(watch mode)npm run tsc - 运行一次TyppeScript编译器
npm run tsc:w - 使用监视模式运行TypeScript编译器,此时进程将保持运行,等待TypeScript文件更改并重新编译它们
npm run lite - 启动
lite-server
,这是一个轻量级的,静态文件服务器,支持Angular App应用npm run typings - 分别运行
typings
工具npm run postinstall - 在成功安装完依赖包后自动被调用
Step 2: 建立我们第一个Angular组件
在angular2文件夹中建立子文件夹
mkdir app
在新创建的app文件夹中创建组件文件app/app.component.ts
:
import { Component } from '@angular/core';@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>'})export class AppComponent { }
AppComponent是应用的根(root)
每个Angular应用至少有一个根组件,通常命名为AppComponent
,用以主持用户的访问。组件是Angular应用的基本构建单元。一个组件通过关联的模板控制屏幕的一部分。本例只写一个简单的组件,但它有每一个组件都有的基本结构:
- 一个或多个import 表述,用于导入我们需要引用的类。- 一个@Component 声明,告诉Angular使用哪个模板和如何创建组件。- 一个 component类,用于控制一个视图(View)的表面和行为。
import
Angular应用是模块化的。它们由很多个功能专一的文件组成。Angular本身就是模块化的,它是几个相关的用于构造我们应用的模块库集合。
当我们需要使用一个模块或库时,我们可以引入(import)它。上面代码中,我们引入了Angular2的核心库,我们使用的@Component注解就是来自于这个库。
@Component 声明
Component
是一个装修器函数,需要元数据(metadata,比如一个dom对象)对象作为参数。我们需要在类的顶部使用@
符号和传入元数据对象。这类似于java等语言中的注解。参数是一个元数据对象,告诉Angular如何创建和使用该组件。
app/app.compoent.ts(metadata)
@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>'})
上面指定了一个元数据,有两个域,selector
选择器和template
模板。
selector代表组件使用CSS选择器指定了一个HTML元素。这个元素名为my-app
。Angrular无论在主HTML的任何位置都创建和展示同一个my-app.
template域指定了这个组件对应的模板,模板写法拓展自HTML语法,告诉Angular如何去渲染组件的视图。这里模板的定义和后端语言的模板相似。如FreeMarker. 一个高级模板包括绑定组件属性的数据,可以标识其它模板,这样,一个Angular应用程序就成了一棵组件树。
Component 类
export class AppComponent{}
当我们要去创建一个实质性的应用时,我们可以用属性和程序逻辑拓展此类。我们使用了export
关键字,所以我们可以import
这个组件在我们程序中的任何一个位置。
Step 3:编写app.module.ts
建立名为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 { }
使用NgModule
修饰的方法参数如下:
imports - 引入其它模块,每个应用程序都需要引入
BrowserModule
.declarations - 这个模块的组件和指令。
bootstrap - 标识根组件,Angular在启动应用程序时应当先启动这些组件。
我们上面编写的app.component.ts
被添加到了declarations和bootstrap数组中。
Angular模块引入其他模块
请注意,我们添加BrowserModule
至imports
数组中。这个模块包含所有Angular在浏览器运行我们的应用所需要代码片段。在Angular众多的模块中,我们最常用的一个是FormModule
和下面要介绍的RouterModule
,HttpModule
.
Step 4: 添加 main.ts
创建文件app/main.ts
,添加如下代码:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';platformBrowserDynamic().bootstrapModule(AppModule);
请注意我们引入platformBrowserDynamic
方法是从@angular/platform-browser-dynamic
,而不是@angular/core
。Bootstrapping 不是core,因为启动App的方式不止一种。事实上,大部分应用都是运行在浏览器中的。
但是在不同环境加载不同模块是可行的,我们可以在带有Apache Cordova或者 NativeScript的移动设备上加载App组件。
为什么要分离出main.ts
,为什么要分离应用模型和应用组件?而不放在一起?在本文教程中,由于只是简单的应用引导,main.ts和app.module.ts代码量都比较少,完全可以很轻松的合并起来,但是应用复杂时,会增加开发难度。分离还有一个好处是,可以使用不同的环境运行程序,而只需要修改main.ts即可。
Step 5:添加 inex.html
在项目的根目录创建文件index.html,添加如下代码:
<html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 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>
这个HTML文件值得注意的是
使用的JavaScript库
SystemJS配置
标签的使用
库(Libraries)
经过生产实践的测试,达到最短的加载时间我们最先引入core-js
,接着是zone.js
和reflect-metadata
,最后是SystemJS
SystmeJS
SystemJS加载应用和库模块。我们在开始前创建了文件systemjs.config.js
,在这个配置文件中,我们首先创建了一个map,对需要用到的模块进行名字的映射,然后注册所有的SystemJS使用到的package.
当Angular在main.ts
中调用bootstrapModule
方法时,它会读到AppModule
元数据,发现AppComponent
是一个启动组件,找到my-app
选择器,定位到名为my-app
的元素标签,在标签中渲染我们应用的View
添加样式
创建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;
}
Step 6:构建和运行应用
运行命令:
npm start
这个命令运行两个平行的node进程
监视模式运行TypeScript编译器
一个名为
lite-server
静态的Server加载index.html在浏览器,并且当文件有修改自动刷新浏览器。
- angular2入门-第一个angular2 App
- angular2的第一个项目
- 第一个Angular2的样例
- angular2
- angular2
- Angular2
- angular2
- angular2.0--my first angular2 app
- Angular2(Beta)入门
- Angular2入门导向笔记
- Angular2之入门示例
- 【Angular2】基础入门
- Angular2 入门详解
- angular2入门简介
- 编写你的第一个Angular2 Web应用
- Angular2入门必备Angular-CLI
- Angular2入门系列教程-服务
- angular2基础入门(一)
- 造就-2016.08.28-溯源
- 【POJ】Balance
- k8s源码分析-----kubelet启动流程分析
- COM组件技术在Linux C++下的使用例子
- 正向代理和反向代理的区别
- angular2入门-第一个angular2 App
- 8月英语—始于足下
- 【C#MVC】搭建.netMVC4工程(四)错误详解-ErrorGeneratingOutput
- 年终总结——驻足赏风景
- 所有节点对之间的最短路问题(All Pair Shortest Path)--《算法导论》
- 字符串匹配
- 对大一的总结
- layer的iframe弹窗,parent.(操作父页面)的使用限制
- Android WebView使用