ionic昇華過程3-angularjs2入門

阿新 • • 發佈：2019-01-13

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

安裝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獲取資料注入到控制元件屬性中
  }

}

ionic昇華過程3-angularjs2入門

ionic昇華過程3-angularjs2入門

ionic昇華過程7-cordova工具

ionic昇華過程8-cordova外掛+mui小案例

樹莓派(raspberry pi) 3的入門過程遇到的一些問題

Mysql儲存過程3:if語句

Citrix XenServer ? Workload Balancing 7.3 快速入門指南

Zabbix 3.0入門到企業實戰二(zabbix介紹與安裝)

Zabbix 3.0入門到企業實戰三(zabbix監控主機-基礎監控配置)（

zabbix-3.0TLS入門筆記

(5)Jquery1.8.3快速入門

(6)Jquery1.8.3快速入門

(8)Jquery1.8.3快速入門

EventBus 3.0: 入門使用及其使用完全解析

存儲過程3 帶參數修改存儲過程

Kubernetes 1.3 從入門到進階安裝篇（1）

MySQL的儲存過程和函式入門第一篇

AM335x U-boot d程式碼分析過程3

OpenCV2/3基礎入門高清視訊教程

3.RobotFramework入門例項

Kubernetes 1 3 從入門到進階安裝篇（1）

ionic昇華過程3-angularjs2入門

相關推薦