angular學習第1步

時間  2019-11-09
標籤 angular 學習 欄目 AngularJS 简体版
原文   原文鏈接

 

 

#### angular的髒檢測。javascript

http://www.javashuo.com/article/p-tqmrbtss-gq.htmlcss

http://www.javashuo.com/article/p-edwevhya-ea.htmlhtml

http://www.javashuo.com/article/p-mbjkybuu-gg.html前端

http://www.javashuo.com/article/p-brjkvdcx-bc.htmlvue

https://sdk.cn/news/2785java

 

#### constructer  和ngOnInitwebpack

constructer 在@input以前執行。
而ngOnInit在@input 以後執行。

　　

#####
瞭解下這個git

https://www.jianshu.com/p/044c056cf763angularjs

#### class替換es6

https://www.jianshu.com/p/ead159cc324d

查看本身的這個項目。https://stackblitz.com/edit/angular-f7zagz

input只會檢測指針的改變，而不會檢測內部值的改變。

 onPush會改變當前組件的髒檢測機制爲手動的，可是從input傳進來的改變仍是能夠改變當前組件的。

不可變對象(每次都返回一個新的對象)提供的優勢是，原來可能對一個對象的十幾個屬性進行改變，屢次觸發dom，如今只改變一個指針，只觸發一次Dom刷新。

onPush策略的優勢比默認的策略效率高。

onPush策略的幾個方法。

#### angular  父給子傳中何時注入何時掉方法傳。都是必須瞭解的。

#### 若是在 別的模塊也使用當前模塊的component那麼必須exports一下。

declarations: [ Deom1ParentComponent ],
exports: [Deom1ParentComponent]

####  let-tableData

<ng-template #tBodyTemplate let-tableData>

### java的set get與angular的set get有什麼異同。

https://blog.csdn.net/linmengmeng_1314/article/details/78854489

#### 這兩個會一塊兒執行。

 

#### 能夠從這個裏邊作點事情。

 

##### 這個上邊的竟然會報錯

 

 

#### constructor想使用  async

http://www.javashuo.com/article/p-bqqfztpf-hn.html  

 

#### 最專業，最全面的angular的學習文檔

https://www.jianshu.com/p/f0f81a63cbcb 

 ### http://www.javashuo.com/article/p-pahurjsu-ge.html

##### angular的指令傳參數。

##### angular中度瞭解。

#### rxjs能夠避免angular的單向數據流。

angualr的編程是面向類的，只要provider注入就是一個新的對象。angular是單向數據流。

 #### 若是父組件和子組件 注入一樣一個class，那麼子組件會繼承父組件 的class.因此在angular中導入組件的順序比較重要。

###### angular的注入服務。 

http://www.javashuo.com/article/p-cidngjgi-ez.html    

https://blog.csdn.net/yjw123456/article/details/81170903

http://www.javashuo.com/article/p-skdnsdmh-dv.html

https://www.javascriptcn.com/read-34746.html

 

 #### ngIf綁定方法都會髒檢查

 

####

modalservice的兩種注入方式。

 

####

 

###  有時間研究下Ui組件中的這個屬性用來作什麼的。

[ngModelOptions]="{standalone: true}"

 

#### style寫到這個裏邊。

 

##### 經過監聽表單的set get方法來獲取表單數據改變的方法。

##### 經過監聽form提供的valid狀態的方法來獲取事件。

 

#### get放到constructor上邊去。 能夠經過bind綁定this.

 

 

 

#### 調用方法的時候也能夠嘗試這麼去寫代碼。

 

 

#### 

Angular2 EventEmitter

http://www.javashuo.com/article/p-erhulfix-eu.html

###  管道用一個服務的形式引進來。

import {
TranslateService
} from '@ngx-translate/core';
 
### angular中pipe如何當一個方法使用。

#### 這麼寫就會報錯。

 

 

####

 

#### 這個http.service.js寫的有意思。值得一看。

 

 #####  useClass

http://www.javashuo.com/article/p-hdjclnyg-hp.html

推介內容 http://www.javashuo.com/article/p-klbtwxpn-cv.html

https://blog.csdn.net/qq_30101131/article/details/80878055

###### 屬性型指令 或 結構型指令

 

###

 

####  ViewChild 兩種用法。

#### 

angular的指令也能傳值麼。

hrefcheck [hrefCheckOption]="{message:'還未上傳用戶手冊',value:vm.base.manualName}"

#### 指令前加一個*

*permission="'secservice.blocklist.buy'"

#### angular中的ngOnChanges 若是是{name:aaa}

若是隻是二級的name改變了也是會觸發的。

 

 

 

☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂

#### 服務注入咱們就不要去思考，providedIn: 'root', 就在須要注入的模塊注入把。

這個providerIn參數，是6才引入的。。

https://blog.csdn.net/u013506207/article/details/80414471

  http://www.javashuo.com/article/p-bqkcfipl-eo.html

 

學習資料：

中文官網   https://angular.cn/guide/quickstart

angular4 教程  w3cschool

https://www.w3cschool.cn/angular/angular-ld3h24nk.html

https://www.kaifaxueyuan.com/frontend/angular-4/angular4-event-binding.html

事件機制。

 

 

https://blog.csdn.net/weixin_40766882/article/details/87102030

 ### angular 的vscode的編輯工具。

#####  別人的學習筆記

這個是angular1的。 

http://www.javashuo.com/article/p-hfvetvmg-ee.html

 這個是angular2

http://www.javashuo.com/article/p-vddtnyou-bb.html

這我的的博客有時間都看看。

https://www.cnblogs.com/mttcug/default.html?page=4

 

AngularJS7那些不得不說的事故      http://www.javashuo.com/article/p-fjbpsjhl-dx.html 

Angular中Constructor 和 ngOnInit 的本質區別

https://www.jianshu.com/p/d51e9f6dab2d

 ☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂

各類框架對比連接

http://www.javashuo.com/article/p-furvmqjr-gx.html

☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂

angular js 與 angular

https://blog.csdn.net/homer168/article/details/79352287?from=timeline&isappinstalled=0 


（1） 咱們常說的 Angular 1 是指 AngularJS； 從Angular 2 開始已經更名了。再也不帶有JS，只是單純的 Angular；
（2）還有一個難以想象的版本變化： 從 Angular 2 直接跳躍到了 Angular 4 ， 沒有angular3的。
  (3)  Angular 1 是一個典型的 MVC 架構 （Model - View - Controller ）

 (4)   相比於 Angular 1 的MVC 架構， Angular 2 是一個典型的基於組件（component) 架構。

#####  爲什麼匆忙推出 Angular 2 ？

照理說，Angular 1. x 版本已經足夠強大，爲何還匆匆忙忙推出 Angular 2 呢？這是迫於 mobile apps 的須要。按照慣性的思惟： Angular 2 應該是 Angular 1.x 的升級版本，其實否則， Angular 2 與 Angular 1.x 徹底不一樣， 最基本的語法都不同。 Angular 1.x 是 基於 JavaScript的框架，而Angular 2 是基於 TypeScript的框架。

#####  Angular 2 有什麼好？
相比 Angular 1.x， Angular 2 的體積更小，爲何這麼作，說白了，一個字——快； 若是僅僅用於PC 端的WEB開發， Angular 1.x足以應對； 若是是用於 mobile app ，在用戶體驗方面，略顯捉襟見肘！

#####  Angular 4 有什麼好？
Angular 4 是 Angular 2 的升級版本， 也就是說，從 Angular 2以後，它們的版本一脈相承，是升級版本，而不是推到重來的版本。 Angular 4 比 Angular 2 更快。
因此說， 從 Angular 1.x 到 Angular 2 ，再發展到 Angular 4， 其路線就是爲了更快一些。

☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂

 rxjs

重點推介這一篇。http://www.javashuo.com/article/p-udfedidi-h.html

與promise的區別和聯繫。

Promise本質上也是一個Observable，能使用fromPromise把Promise轉成Observable
可是Promise .then()只能返回一個值，Observable能夠返回多個值
Promise要麼resolve要麼reject，而且只響應一次。而Observable能夠響應屢次
Promise不能取消，Observable能夠調用unsubscribe()取消訂閱

解決的問題

  • 同步和異步的統一
  • 可組合的數據變動過程
  • 數據和視圖的精確綁定
  • 條件變動以後的自動從新計算

　　

 

 http://www.javashuo.com/article/p-xghzqhiq-eh.html

https://github.com/xufei/blog/issues/38

http://www.javashuo.com/article/p-qfvqpsse-h.html

https://www.jianshu.com/p/0ccfb99f6713 

 

rxjs中文網。

https://cn.rx.js.org/class/es6/Observable.js~Observable.html

 

#### 組件中都沒有對應的方法，可是不會報錯，只有在事件發生的時候，用到這個方法了才報錯。

 


☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂☂

#### 父給子傳值相似 slot的概念。

https://blog.csdn.net/zgrbsbf/article/details/81145190

須要記住的代碼

#### input事件的綁定

<input #searchBox id="search-box" (input)="search(searchBox.value)" />

 

####  pipe catchError

getHeroes (): Observable<Hero[]> { 
    return this.http.get<Hero[]>(this.heroesUrl) .pipe(     
    catchError(this.handleError<Hero[]>('getHeroes', [])) ); 
}

　

#### tap

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

 

#### this.route

 

const id = +this.route.snapshot.paramMap.get('id');
 
### angular各個版本之間的差別。
能夠在w3ctech 極客文檔上搜索。
能夠在前端之巔的公衆號上搜索。
 
#### angular 相關的學習代碼註釋。

 ##### anguarl和angularjs區別。

##### ([ngModel])    [ngModel]

 

##### 經常使用指令。

 

#####  | async

 

######  @Component

 ##### HeroService的兩種注入方式。

 

 #####  這個useClass就是換一個別名，真正使用的service用來作測試之類的。

providers: [{
    provide: HeroService, useClass: MockHeroService
}],

　　

 #####   看不懂

 ###### angular的狀態管理。

https://www.itcodemonkey.com/article/9929.html

http://www.javashuo.com/article/p-skqbbxjl-ba.html

這個文章的做者太厲害了,重點推薦。

 https://juejin.im/post/5a6d812851882573432d693e

 

 

 

###### angular核心和經常使用術語

 

#### 掘金

angular組件間通訊。

http://www.javashuo.com/article/p-fuuoidmt-dv.html

 

####  ngrx

http://www.ngui.cc/news/show-1967.html

 

#### 若是在.ts文件中,這些若是沒有標識的話，就會報錯。

 

#### 

@ViewChild('bbb') bbb:ElementRef;
@ViewChild('ccc', {read: ViewContainerRef}) ccc:ViewContainerRef;

 

### ts文件裏只要不定義就會報錯。

 

#### 看看ts上面這種類的寫法，第一感受是爲何會把變量生命提出來呀，這不是成了類的靜態變量了麼，嚇的我趕快去看看阮一峯的es6的靜態屬性。

 

 ####  必定要賦值。

####

### 

this.activeRoute.queryParams.value.tab
this.element.nativeElement.parentNode

 ###

### 一個類外邊命名的變量。能不能全部的調用的地方共享。

### 

ViewChild和ViewChildren

http://www.javashuo.com/article/p-blzhlgnn-hv.html
 
#### ？？？  即根模塊中使用forRoot()，子模塊中使用forChild()
 
#### angular 路由
https://blog.csdn.net/xwnxwn/article/details/81908749
ps:必須加載 CommonModule
 
#### ？？？imports和exports模塊。

 

#### ng-container  ng-content ng-template

https://www.imooc.com/article/details/id/24837

 

#### . 

Angular 2 ContentChild & ContentChildren

http://www.javashuo.com/article/p-hydfeoro-ch.html

####  這個必看和重點推介

angular5 @viewChild @ContentChild ElementRef renderer2

 
  http://www.javashuo.com/article/p-qdhvoqfe-dq.html
 
#### 長見識了

 


####  

:host ::ng-deep
#### 

angular 子父頁面傳值以及調用方法

 
#### 

Angular6中使用eventEmit在組件間通訊後數據綁定沒法實時更新的問題

https://www.jianshu.com/p/3aff76d13fb5

#### ngClass

https://blog.csdn.net/u013589443/article/details/72866603

 

#### angular 動畫

https://github.com/search?q=angular%E5%8A%A8%E7%94%BB

http://www.javashuo.com/article/p-mjtyvnhf-cn.html

http://www.javashuo.com/article/p-mmcgdxbn-bz.html

#### 父想直接調用子的方法渲染數據了,發現子組件沒有渲染。找不到相似的v-show這種，因此暫時用height=0解決。[hidden在4之後就不用了]

#### 有沒有那種相似的keep-alive那種屬性。

#### less裏邊用數組。

 

 

 ##### angular的render2是幹什麼用的。

https://www.jianshu.com/p/2c4fc5760eaf

#### angular的 click.stop

http://www.javashuo.com/article/p-nojbjwle-bh.html

#### angular的數據驅動。

https://www.jianshu.com/p/e71b0b95eaa0

 

#### *ngFor還能夠這麼寫。

 

#### 若是單個數據流的值從新賦值,簡單屬性和object屬性都會觸發ngChange麼。

#### Subject的亂用。若是一個屬性須要監聽的話，那麼。

 ####angular對一些Html不進行編譯。

#### 管道還能這樣子用。

 

 #### cacl計算出來的高度會有自動超出隱藏的效果。

 

#### 記住這種寫法。

<i [ngClass]="['csmpicon','csmpicon-safekit-'+item.type]"></i>
 
#### map
 
### 無效
 
#### angular中若是父組件主動操做子組件的屬性。
經過dom選擇器獲取到子組件後。
 
##### 放在不一樣的css中,transition的效果不一樣。

 

#### 有時間對比一下上邊的高度爲何沒有起來。

 

## echarts有時間瞭解一下。

 

#### 錯誤集錦。

Angular4.0 項目報錯：Unexpected value xxxComponent' declared by the module 'xxxxModule'. Please add a @Pipe...

http://www.javashuo.com/article/p-tlrsyhvt-bc.html 

 

 

#### angular中還能夠這樣去寫代碼。

##### augular好強大

 

 ##### angular仍是es6的作法。

 

 ##### angular的語法約定。

 

 

##### 業務組件模塊的替換。

 

###

 

### 總是很差用。

 

##### angular的？機制。

 

 ####  工做中須要優化的地方。

爲何不把設計圖直接放服務器呢，都已是Html格式了。還要壓縮給開發。

 

 #### 

[ngStyle] 多個的時候。

#### angular的函數和樣式指令。

#### sass的函數。

 

####  angular的  Renderer2

https://blog.csdn.net/qq_28004379/article/details/80801378

 

#### 獲取dom的size而後進行處理。

https://blog.csdn.net/gaomingyangc/article/details/79564731

#### 加不加有什麼區別。

 ####  1E3

 ### angular的服務和數據流

angualr的服務有全局和局部的。

某一個服務都是依賴注入。都是一個對象。

### 的angular的模塊的理解。

 

#### 爲何webpack引入的是單例對象。

import Vue from 'vue'

而不是新的呢。from引入的是同一個指針麼。

 

#### 

http://www.javashuo.com/article/p-maqlvqus-dt.html

 

#### 還在用 Redux，要不要試試 GraphQL & Apollo？

http://www.javashuo.com/article/p-maqlvqus-dt.html

GraphQL:你須要知道的一切

http://www.javashuo.com/article/p-rrbyymek-en.html

#### 如何理解restful api

https://www.runoob.com/w3cnote/restful-architecture.html

 

 

######

[style.paddingLeft.px]="padding"

 

#### 有時間瞭解下

@Input('data') set data(para) {
if (para) {
this.dataConfig = para;
this._initChart(para.data);
}
}
 
#### 
export class IPUsagePieComponent extends ChartBaseComponent {
 
#### 選擇太多，在加上業務可能需求太多的時候，就會有問題。
#### angular屬性不存在的時候，也不報錯。？能夠解決，也是有點也是缺點。
####  變量沒有聲明。
#### f方法前加一個get是什麼意思。

 ### 獲取dom高度而後修改

// setTimeout(() => {
// const height = this.summarycard.elementRef.nativeElement.clientHeight;
// this.alarmcard.elementRef.nativeElement.style.height = height + 'px';
// });
 
#### 

 ###

 

### 有時間看看這個

 

#### construstoer和註冊進來 屬性哪一個先執行。

 

#####  有時間看看 logModule="waf"

 #### useClass爲了調用這個方法麼。

 #####

 

 

#####

 

### 有事件研究下這個 ngzone

 

 #####

 #### angualar的懶加載怎麼去作。

{
path: 'task',
component: TaskLayoutComponent,
children: [{
path: 'upload',
loadChildren: 'app_console_views/task/task.module'
}]
},

 ### 服務的注入方式,經過模塊的providers。好比組建的message服務經過依賴注入construct.

 ##### 這裏不注入就不能用麼。

#### 這個不清楚。

#### 會合並http請求，某個時間點內，若是相同參數的的http請求會被合併。

 

 ####  想起了rxjs的of操做符。

 ####

 

 ###

 

#####

#####

angular下的dom操做。

 #### angular中的父子傳值  

若是子接受到的是一個基本類型，那麼改變這個基本類型的話，父不會有改變。若是子接受的指針類型。那麼若是隻是改變這個指針指向的某一個變量的話，那麼父也會改變可是若是指針被覆蓋的話，父不會有什麼改變。

 

###### 須要記住的代碼片斷。
routerLink="/detail/{{hero.id}}"

 ##### 不管是類定義仍是接口定義數據model都是能夠的。

 

#### angular中的表達式中的上下文。

#### 如何理解angular的單向數據流。

指的是組件之間的數據流仍是，組件和dom之間的數據流。

src/app/app.component.html (template input variable)
content_copy
<ul>
  <li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>
src/app/app.component.html (template reference variable)
content_copy
<input #customerInput>{{customerInput.value}}</label>
表達式中的上下文變量是由模板變量、指令的上下文變量（若是有）和組件的成員疊加而成的。 若是你要引用的變量名存在於一個以上的命名空間中，那麼，模板變量是最優先的，其次是指令的上下文變量，最後是組件的成員。

上一個例子中就體現了這種命名衝突。組件具備一個名叫 customer 的屬性，而 *ngFor 聲明瞭一個也叫 customer 的模板變量。

在 {{customer.name}} 表達式中的 customer 實際引用的是模板變量，而不是組件的屬性。

模板表達式不能引用全局命名空間中的任何東西，好比 window 或 document。它們也不能調用 console.log 或 Math.max。 它們只能引用表達式上下文中的成員。
View Code

 ### angular的70條指令。

 

####

 

### 監控hash路由。

this.routersEventReset = this.router.events
      //   .filter((event) => event instanceof NavigationStart)
      .subscribe((event: NavigationStart) => {
        this.greenWhiteFlagChange()
      });
  }

  greenWhiteFlagChange() {
    // 若是layoutStyleConfig中含有路由的話那麼添加這個容器
    let hash = location.hash.replace(/\?(.*)$/,'').replace('#','')
    if(layoutStyleConfig.greenWhite.indexOf(hash) > -1) {
      this.greenWhiteFlag = true;
    }else{
      this.greenWhiteFlag = false;
    }
  }

#### angualar在路由中註冊的組件,必須在module中declarations

 

 #####

 #####

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程