Angular 2.x折騰記：(2)初步認識angular2，不同的開發模式

時間 2019-11-16

標籤 angular 2.x 折騰初步認識 angular2 不同開發模式欄目 AngularJS 简体版

原文原文鏈接

前言

想來想去，概念這些東西不怎麼想講，更多的是想講點實戰性的內容。css

因此有些東西跳過去了，小夥伴們請去看官方文檔哈；跳躍性的前進，寫的很差多包涵。html

基礎概念

官方中文社區一把梭: 你想要的都概念基本能夠在這裏找到。json

angular-cli 啓動

src是開發目錄，生產打包後會產生一個dist目錄；初步說下你從啓動到瀏覽器看到app works!依賴了哪些文件，有哪些做用bootstrap

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NgTestdemo</title>
  
  <!--規定全部url的默認目標由誰開始-->
  <base href="/"> 
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    
 <!--根組件-->
  <app-root>Loading...</app-root>
</body>
</html>

複製代碼

main.ts

// 引入生產模式，控制關閉開發模式的，函數來的
import { enableProdMode } from '@angular/core';

// app啓動引導模塊，必須引入
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


// 根模塊
import { AppModule } from './app/app.module';

// 環境配置文件，能夠寫入接口路徑什麼的。。dev,prod各一份
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 引導程序啓動
platformBrowserDynamic().bootstrapModule(AppModule);


複製代碼

polyfill.ts : 要兼容到ie10,安裝裏面對應的膩子（polyfill），文件內有詳細的註釋
typings.d.ts : 全局變量聲明的文件
testconfig.*.json: 不一樣模式下調用的tsconfig配置文件

app目錄下(分的很完全，寫起來跟常規基本同樣)

app.component.css : 根樣式文件，配置了scss就是.scss數組

app.component.html : 根html瀏覽器

<!--Mustache包括的是雙向數據綁定-->
<h1>
  {{title}}
</h1>

複製代碼

app.component.spec.ts: 測試用例，夠繁瑣，之後再說app

app.components.ts：組件邏輯處理ide

// 導入裝飾器：裝飾器能夠理解爲一些函數的封裝，使其書寫起來很是簡潔明瞭
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',  // 自定義元素
    templateUrl: './app.component.html', // 組件關聯的html頁面
    styleUrls: ['./app.component.css'] // 組件自身的樣式
  })
  
  // 導出對應的組件
  export class AppComponent {
    title = 'app works!';  // 聲明一個public的變量而且賦值
  }
  ``` 複製代碼

app.module.ts：模塊函數

// 瀏覽器的NG模塊
    import { BrowserModule } from '@angular/platform-browser';
    
    // 這也是一個裝飾器，用來定義模塊和組件相關的，好比服務，組件元素，指令，導入導出模塊的識別
    // 每一個模塊的定義必須有這個才能生效，ng2的開發模式就是相似一個樹，從根節點無限發散
    import { NgModule } from '@angular/core';
    // 表單模塊，好比你要在組件內用到一些表單元素或者數據綁定，否則會報錯
    import { FormsModule } from '@angular/forms';
    
    // rest風格的請求模塊
    import { HttpModule } from '@angular/http';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [ // 指令和組件的放在這裏
        AppComponent
      ],
      imports: [ // 好比你要引用那些模塊的功能就要引入
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [], // 服務
      bootstrap: [AppComponent] // 啓動的模塊，一個app通常只有一個啓動模塊！！通常！！
    })
    export class AppModule { }
    ``` 複製代碼

常見模板指令用法解釋

{{item | SliceStr:1:2:'...' }}: 能夠響應組件內對應的item字段值變化， |是管道，支持多個管道，支持內置管道和自定義管道，:跟隨是管道的參數，後續文檔我寫一個如何自定義管道的文章
[]="":綁定組件內的值[單向，數據流向視圖]，指令，原生html控件的自身屬性[value,src,class,style]等，雙引號內支持條件表達式[不徹底等同於js條件表達式]或者方法亦或者變量，
(click)="": 事件綁定[視圖觸發改變數據源]，同上，支持表達式和方,特殊之處後面解釋。
[(target)]: 雙向數據綁定，視圖和數據源同步改動，通常用於表單比較多。

綁定賦值的條件表達式的特殊之處：性能

不支持：
賦值 (=, +=, -=, ...)
new運算符
使用;或.的鏈式表達式
自增或自減操做符 (++和--)
不支持位運算|和&
支持：
邏輯運算(|| , &&)
三目運算符( true ? true : false )
直接賦值運算(item = 2);
變量傳遞
空值保護運算符(?.)
- item?.a?.b : 會判斷item是否有a這個值，防止undefined或者null讓視圖渲染報錯

最經常使用的內置指令

樣式綁定(ngClass)
- [ngClass]或者[ngStyle]:能夠傳遞一個對象，用來動態判斷增長多個樣式
- [class.a]或者[style.font-size]:單一操做類或者某個行內樣式
數據遍歷(*ngFor)
*ngFor="let i of item; let index = index": 能夠用這個來遍歷數組對象，let index = index意思是建立一個局部遍歷把當前遍歷的索引保存到你的自定義變量index
動態渲染(*ngIf)
*ngIf="item" : 好比loading到視圖所有渲染就常常用到這個,當前不在意低版本的能夠用[hidden]來控制切換，由於*ngIf這種動態渲染節點的仍是有必定的性能消耗的。。