ionic升华过程3-angularjs2入门

一。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

ionic升华过程3-angularjs2入门

猜你喜欢