一。angular2js简介
Angular2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。Angular2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。Angular2 发布于2016年9月份,它是基于ES6来开发的。
angularjs2中的模块定义标记(NgModule)
NgModule的主要属性如下:
- declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员
- providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
- imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
- exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
- bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
- entryCompoenents: 不会在模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。
每个Angular2的应用都至少有一个模块即根模块。
具体angularjs2架构参考
https://angular.io/guide/architecture
http://www.runoob.com/angularjs2/angularjs2-architecture.html
官方文档参考:https://angular.io/guide/quickstart
二。angularjs2安装
安装angularjs的客户端
cnpm install -g @angular/cli
安装完成后 安装一个ng命令 ng帮助
ng --help
ng new --help 新疆项目
E:\nodejs\my-app>ng new --help
usage: ng new <name> [options]
options:
--collection (-c)
Schematics collection to use.
--directory
The directory name to create the workspace in.
--dryRun (-d)
Run through without making any changes.
--force (-f)
Forces overwriting of files.
--inline-style (-s)
Specifies if the style will be in the ts file.
--inline-template (-t)
Specifies if the template will be in the ts file
--new-project-root
The path where new projects will be created.
--prefix (-p)
The prefix to apply to generated selectors.
--routing
Generates a routing module.
--skip-git (-g)
Skip initializing a git repository.
--skip-install
Skip installing dependency packages.
--skip-tests (-S)
Skip creating spec files.
--style
The file extension to be used for style files.
--verbose (-v)
Adds more details to output logging.
--view-encapsulation
Specifies the view encapsulation strategy.
创建angularjs项目 (这里注意 如果直接生成项目 会使用npm去下js模块 非常慢 创建项目 直接生成文件 后面使用cnpm安装)
ng new my-app --skip-install
执行结果如下(后面会使用git 没安装不影响)
E:\nodejs>ng new my-app --skip-install
CREATE my-app1/angular.json (3557 bytes)
CREATE my-app1/package.json (1312 bytes)
CREATE my-app1/README.md (1023 bytes)
CREATE my-app1/tsconfig.json (408 bytes)
CREATE my-app1/tslint.json (2805 bytes)
CREATE my-app1/.editorconfig (245 bytes)
CREATE my-app1/.gitignore (503 bytes)
CREATE my-app1/src/favicon.ico (5430 bytes)
CREATE my-app1/src/index.html (293 bytes)
CREATE my-app1/src/main.ts (370 bytes)
CREATE my-app1/src/polyfills.ts (3194 bytes)
CREATE my-app1/src/test.ts (642 bytes)
CREATE my-app1/src/styles.css (80 bytes)
CREATE my-app1/src/browserslist (375 bytes)
CREATE my-app1/src/karma.conf.js (964 bytes)
CREATE my-app1/src/tsconfig.app.json (166 bytes)
CREATE my-app1/src/tsconfig.spec.json (256 bytes)
CREATE my-app1/src/tslint.json (314 bytes)
CREATE my-app1/src/assets/.gitkeep (0 bytes)
CREATE my-app1/src/environments/environment.prod.ts (5
CREATE my-app1/src/environments/environment.ts (642 by
CREATE my-app1/src/app/app.module.ts (314 bytes)
CREATE my-app1/src/app/app.component.html (1141 bytes)
CREATE my-app1/src/app/app.component.spec.ts (998 byte
CREATE my-app1/src/app/app.component.ts (211 bytes)
CREATE my-app1/src/app/app.component.css (0 bytes)
CREATE my-app1/e2e/protractor.conf.js (752 bytes)
CREATE my-app1/e2e/tsconfig.e2e.json (213 bytes)
CREATE my-app1/e2e/src/app.e2e-spec.ts (303 bytes)
CREATE my-app1/e2e/src/app.po.ts (208 bytes)
'git' 不是内部或外部命令,也不是可运行的程序
进入 my-app目录 执行 cnpm install (自动根据package.json的依赖自动下载包) 时间会略长 之后就可以拷贝修改
cd my-app && cnpm install
打开静态web服务 并使用浏览器打开测试
ng serve --open
自动打开浏览器访问(f12切换成手机模式)
http://localhost:4200/
使用vscode打开 my-app目录 编辑即可
四。angularjs2案例
为了快速进入angularjs2,了解开发过程,建议完整模拟官方的 英雄之旅案例(https://angular.io/tutorial)
实现动态图:
大概理解一下 一个项目分为很多模块(module 有个主模块app.module) 访问的首页是index.html
每个模块下有多个控件 默认(app.component) 控件由模板,样式,数据组成最后生成html 比如控件的注解
@Component({
selector: 'app-root',//控件的代码展示在父组件的哪个位置 用各种css选择器
templateUrl: './app.component.html',//控件指定的模板的位置
styleUrls: ['./app.component.css']//控件指定的样式的位置
})
表示将来模板的代码 生成在父容器下 selector是app-root(标签选择器)中 查看 index.html
<app-root></app-root>
将来比如有其他控件 显示在 app.component中 只需要在 app.componnet中添加一个标签 制定选择器到这个标签即可
1》了解控件
生成一个英雄的控件
C:\tttt\my-app>ng generate component heroes
CREATE src/app/heroes/heroes.component.html (25 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (269 bytes)
CREATE src/app/heroes/heroes.component.css (0 bytes)
UPDATE src/app/app.module.ts (396 bytes)
自动在app目录下创建heroes目录 生成控件
修改 默认主控件 app.component 将标题数据修改为 :
title = '英雄之旅';
将app.components.html只留下标题和一个父标签用于插入 hero控件内容
<h1>
{{ title }}!
</h1>
<app-heroes></app-heroes>
ng serve自动监控 文件修改,开启一次不用关了 直接访问
分析一下 生成的代码结构 查看控件文件 heroes.component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-heroes',//选择之前app.html中定义的那个标签名
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
constructor() { }
ngOnInit() { //控件被实例化 自动调用
}
}
因为新的控件 生成在app这个模块中 打开模块文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//导入了英雄模块 引入了类
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent //不定义这个控件 如果app.component.html加了标签 就会报错
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2》编辑英雄数据
因为英雄可能存在多个属性 比如id 和name 所以可以heroes目录定义一个英雄的class
export class Hero{
id:number;
name:string;
}
在控件中heroes.component.ts 定义该hero的实际数据
import { Hero } from './hero';//导入Hero类
export class HeroesComponent implements OnInit {
hero:Hero={
id:1,
name:"zs"
};
//添加一个数据 数据+模板=html
}
显示英雄数据 并且将数据和编辑器绑定
<h2>{{hero.name}} 详细</h2>
<div><span>编号: </span>{{hero.id}}</div>
<div><span>姓名: </span>{{hero.name|uppercase}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
[(ngModel)]是绑定控件模型数据 该功能位于FormsModule控件中 模块中(app.module.ts)引入 并导入
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,FormsModule
],
最终效果(编辑文本框名字都跟着改变):
3》显示多个英雄数据
显示多个英雄数据 并且点击某个英雄 自动编辑该英雄
控件中heroes.component.ts定义数组的Hero
heros:Hero[]=[{
id:1,
name:"张三"
},{
id:2,
name:"李四"
},{
id:1,
name:"王五"
}];
修改模板 heroes.component.html 展示所有的数据
<h2>所有英雄</h2>
<ul>
<!--
*ngFor="let hero of heros" 表示循环模型 heros数组 循环一次到临时变量hero中下面就可以hero.属性了
class.样式表=“满足什么条件就会自动添加该样式表”
(click)="onSelect(hero)" 表示点击时触发事件 事件全部定义在控件中 选中了就将当前的hero赋值给 selectedHero对象
-->
<li *ngFor="let hero of heros"
[class.selected]="hero==selectedHero"
(click)="onSelect(hero)"
>
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!--
*ngIf判断是否存在selectedHero属性 点击行就有了
-->
<div *ngIf="selectedHero">
<h2>英雄:{{selectedHero.name}} 详细</h2>
<div><span>编号: </span>{{selectedHero.id}}</div>
<div><span>姓名: </span>{{selectedHero.name|uppercase}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
</div>
heroes.component.ts添加事件和选中的hero
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
最终效果 初始化
点击任意一个英雄(文本框修改 列表数据跟着修改)
4》将英雄数据放入service
之前将数据直接定义在components中 组建应该更加关注的view层 service负责读取数据
生成service 文件 hero.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HeroService {
constructor() { }
}
Injectable注解表示 将它添加到提供者中 root表示随处都可以装配
修改源代码 service 将数据放在service中 将来发起http连接
import { Injectable } from '@angular/core';
import { Hero } from './heroes/hero';
@Injectable({
providedIn: 'root'
})
export class HeroService {
heros:Hero[]=[{
id:1,
name:"张三"
},{
id:2,
name:"李四"
},{
id:3,
name:"王五"
}];
getHeroes():Hero[]{
return this.heros;
}
constructor() { }
}
修改控件类 注入service
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heros:Hero[];
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
constructor(private helloService:HeroService) { }//注入service
ngOnInit() {
this.heros=this.helloService.getHeroes();//初始化时调用service获取数据注入到控件属性中
}
}
其中还有关于同步异步 路由 http相关参考官方文档(后续文章给出)
https://angular.io/tutorial/toh-pt4
关于所有模板中 事件 属性 样式等设置参考
http://www.runoob.com/angularjs2/angularjs2-template-syntax.html