Angular 常用概念

wind5o 發布于2019-08-22 14:04 / 2795人閱讀

摘要：模塊與裝飾器設計目標就是適應大型應用的開發，模塊的概念就是來組織不同的組件及服務。

1.模塊與裝飾器

Angular設計目標就是適應大型應用的開發，模塊的概念就是來組織不同的組件及服務。一個大型應用的最終形態就是各種不同的模塊的組合

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent }  from "./app.component";
import { HeroService } from "./hero.service";

//NgModule裝飾器將AppModule類標記為Angular組件
@NgModule({ 
   //裝飾器就是一個函數，作用是將元數據添加到緊跟在后面的類、類成員（屬性、方法）和函數參數
  imports:      [ BrowserModule ], //導入本模塊中所需要的其他非自定義的模塊
  providers:    [ HeroService ],  //服務模塊，并自動加入到全局的服務列表中
  declarations: [ AppComponent ], //聲明本模塊中的組件，指令和管道
  bootstrap:    [ AppComponent ]  //根組件，
})
export class AppModule { }  //導出的根模塊

2.組件、指令、管道

組件在Angular中處于中心地位，但也是指令的一種，我把組件看做是含有模板的指令，管道就是anuglarjs中的過濾器，具體有哪幾種，可以參考Anugular的官方API Angular內置管道
自定義組件

import { Component } from "@angular/core";

@Component({ //@Component裝飾器將HeroDetailComponent類標記為Angular組件
    //內部的數據稱為元數據，其它元數據裝飾器用類似的方式來指導 Angular 的行為。 
    //例如@Injectable、@Input、@Output等
  selector: "hero-detail",
  templateUrl: "../somewhere.html",
  styleUrls: ["./any.css"]
})

export class HeroDetailComponent {
    //僅僅是一個類，看不到Anugular框架的影子
}

自定義指令

//指令有屬性型指令和結構型指令 和組件
import { Directive, ElementRef, Input } from "@angular/core";

//ElementRef注入到構造函數中，這樣指令才能訪問DOM
//Input 將數據傳入指令中
@Directive({ selector: "[appHighlight]" })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = "yellow";
    }
}

自定義管道

The hero"s birthday is {{ birthday | date："yyyy.MM.dd" }}

The current pipe {{ somevalue | paramStrength："number" }}
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({name: "paramStrength"})
export class ExponentialStrengthPipe implements PipeTransform {
//implements是一種類實現某個接口的寫法，這樣就可以使用對應接口里面的方法，如這里的transform
  transform(value: number, params: string): number {
    //value是輸入值，params是傳入的參數
    //value對應上面的somevalue， params對應上面的number
    let exp = parseFloat(exponent);
    return value + exp ;
  }
}

3.服務

服務可以為對數據的獲取和各種處理，組件就是服務的消費者，通過依賴注入在組件中使用服務

import { Injectable } from "@angular/core";
import { Logger } from "../logger.service";

@Injectable({})
export class HeroService {
  //服務里面注入其他的服務，通過依賴注入，相當于執行了new的操作，又沒有副作用
  constructor(private logger: Logger){}
}

4.生命周期

就是被Anuglar管理的組件的生命周期鉤子，對應的有鉤子里面的方法

import { OnInit, OnDestroy } from "@angular/core";

//OnInit接口里面的ngOnInit方法
export class PeekABoo implements OnInit, OnDestroy {
  constructor() { }

  // implement OnInit"s `ngOnInit` method
  ngOnInit() { 
    console.log("組件初始化");
  }

  ngOnDestroy(){
    console.log("組件退出時實現的方法");
  }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92822.html

Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉，定義該路由激活時的樣式類。剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
Angular單元測試系列-如何使用Jasmine進行Angular單元測試

摘要：四結論本章幾乎所有的內容在單元測試經常使用到的東西特別是異步部分，三種不同異步方式并非共存的，而是需要根據具體業務而采用。否則，你會發現真難寫單元測試。自此，我們算是為寫單元測試打下了基礎。以下是我假定那些極少或壓根沒寫單元測試的人準備的，因此，會白話解釋諸多概念性問題，同時會結合 Jasmine 與之對應的方法進行講解。一、概念 Test Suite 測試套件，哪怕一個簡單的類，...

zeyu 2019-08-21 11:43 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0
Angularjs學習筆記指令

摘要：自定義指令中有很多內置指令，一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數的意思是替換指令的內容，更改上面的例子。將屬性綁定到父控制器的域中學習概念多指令中的參數中增加了的值和的點擊函數。自定義指令 angularjs中有很多內置指令，一般都是以ng開頭的；比如：ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。指令...

LeexMuller 2019-08-19 18:04 評論0 收藏0