Angular

https://cloud.tencent.com/developer/devdocs   1.設計原則 (1)YAGNI You Aren't Gonna Need It,你不會須要它;不寫不須要的功能 (2)KISS Keep It Simple and Stupid,讓你的代碼越簡單/傻瓜越好 (3)OCP Open Close Principle,開閉原則,對外界修改封閉(不容許修改已有代碼)，對外界的擴展開放 (4)High Cohesion, Low Coupling 高聚合,低耦合;功能相關代碼緊密在一塊兒;功能不相干代碼拆分越明確越好 (5)迪米特法則/最少知識原則 一個對象/組件，數據/操做越少越好

Angular Angular由Google在2009年建立的MVVM框架,適用於中大型的企業級SPA應用。 V1.x官網: https://angularjs.org/ Angularjs用JS編寫 V2.x~8.x官網: https://angular.io/ Angular 用TS編寫 V2.x~8.x中文網: https://angular.cn/ 提示: V1到V2的升級變化很是大! 注意: Angular 8.x要求Node.js版本必須是10.9以上!   3.建立第一個 Angular項目 ①安裝Node.js和NPM Node.js版本必須>=10.9 ②安裝全局的Angular腳手架工具 npm i  -g  @angular/cli   提示:若是使用NPM從官方網站下載NPM包老是失敗,能夠把默 認下載地址改成國內淘寶網鏡像: 查看當前下載地址: npm config get registry 默認值爲: https://registry.npmjs.org/ 修改成淘寶網NPM鏡像: npm  config  set  registry= https://registry.npm.taobao.org/   默認會在C:\Users\web\AppData\Roaming\npm目錄下安裝ng.cmd可執行文件及其相關文件 ③運行全局腳手架，建立一個 Angular空白項目 　　ng new myngapp01 此步須要聯網從NPM官網下載第三方模塊 Would you like to add Angular routing? y Which stylesheet format would you like to use? (Use arrow keys) > CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] ④進入項目根目錄,運行該項目(Node.js 項目) npm  start 或者 ng  serve Vue,js項目的主配置文件:    vue.config.js Angular項目的主配置文件:  angular.json ES6中有"模塊」的概念: export/export default、import.from.. Vue.js中無本身的"模塊」概念一項目是由自定 義組件構成; Angular中有本身的"模塊」概念一項目是由自定義組件構成, 每一個組件都要放在一個特定的module中， 4.Angular項目引導啓動流程 ①系統運行main.ts ②main.ts啓動主模塊AppModule ③在主模塊中引導啓動主組件AppComponent ④主組件中聲明瞭模板和樣式,最終渲染在index.html中<app-root/>

(2)Angular核心概念之一 一一組件 能夠複用的頁面片斷, Component = Script + Template + Style. Angular中的組件是多文件組件: .ts + .html + .css/.scss 注意:組件必須在某個模塊(AppModule)中聲明!    使用快捷命令建立: ng g  component  組件名 (3)Angular核心概念之二———數據綁定 ①innerHTML綁定: {{ }} ②屬性綁定: [ attr ] =""                 （區分vue  v-bind  / ：） ③事件綁定: ( click)= "fn( )"             （區分vue   v-on /@） ④循環綁定: *ngFor                            (區分vue   v-for) ⑤選擇綁定: *nglf  （提示: *nglf 會影響DOM結構） ⑥選擇綁定: [ngSwitch] *ingSwitchCase  *ngSwitchDefault ⑦樣式綁定: [ngStyle]   [ngClass] ⑧樣式綁定指令: [ngClass] ⑨雙向數據綁定指令: Angular中指令分爲哪幾類： (1)組件指令 <myc01> </myc01> Component extends Directive, 組件繼承自指令,組件是有模板的指令 (2)結構型指令 能夠影響當前的DOM結構的指令;全部結構型指令都以*開頭 (3)屬性型指令 不會影響DOM結構，只會影響當前元素的特徵，如樣式;全部的屬性型指令都用[]括起來!   1.Angular核心概念之三一指令(Directive) 指令:是一種特殊的模板頁面內容,能夠對頁面執行特殊的處理; 例如:< any*ngFor=""> Angular中常見指令: ①循環綁定指令: *ngFor <any *ngFor="let tmp of 集合對象"> ②選擇綁定指令: *ngIf <any *nglf= " expression" > 提示: *nglf 會影響DOM結構 ③選擇綁定指令: [ngSwitch] *ngSwitchCase *ngSwitchDefault <any [ngSwitch]= "變量名"> <any *ngSwitchCase= "值"> ... </any> ... < any"ngSwitchDefault> ... </any> </any> ④樣式綁定指令: [ngStyle] <any [ngStyle]= "obj"> ⑤樣式綁定指令: [ngClass] <any [ngClass]="obj">   2.(瞭解)如何自定義指令 可以使用工具ng  g  directive 指令名      快速的建立一個指令 < div  appNeedStrong> ... </div>     @Directive({ selector: 'appNeedStrong' }) export class MyDirective { contructor( el: ElementRef){ el.nativeElemet.xxx..... 　　} } 3.Angular中的雙向數據綁定 方向1: Model=>View 方向2: View=>Model Angular中實現雙向數據綁定的方法: <input   [(ngModel)]="userName">   提示: ngModel指令處於FormsModule,必須在當前模塊中聲明導 入才能使用: import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) 若是想監視模型數據的改變(就像Vue.js 中的watch函數)，可使用 ngModelChange事件: <input  [(ngModel)]= "userName"  (ngModelChange)="fn()">   示例：建立密碼輸入框,隨着用戶的輸入,後面的提示信息不停的在改變: "密碼不能爲空" "密碼長度不能少於6位" "密碼長度合法" "密碼長度不能超過12位"   使用Angular實現TodoList     4.Angular核心概念之四---管道 Vue.js中的過濾器(filter): <p>{{1| sex('zh'}}</p> Angular中的相似的概念稱爲管道(pipe): <p>{{1 |sex:zh' }}</p> Vue.js沒有內置任何過濾器;但Angular內置了不少好用的管道: ①lowercase:把數據轉換爲小寫形式 ②uppercase:把數據轉換爲大寫形式 ③slice:獲取字符串或數組中的一部分 ④json:把對象轉換爲JSON字符串 ⑤date:把日期/數字轉換爲特定格式的日期字符串 ⑥number:數字格式化(每E位加逗號，並指定小數位數) ⑦currency:把數字以貨幣形式顯示 TypeScript語法知識: (1)class中的成員(屬性、方法)、參數的參數均可以聲明類型: 　　class Book{ 　　price: number = 12.5 　　add(n：number): void{ } 　　　　} (2)TS中的新類型:接口(interface) 接口是一種特殊的class,用於規定一個對象「必須具有」哪些功能 interface Runnable{ 　　　　run( ); 　　　　stop( ); 　　} class Car implements Runnable{ 　　run( ){...} stop( ){...} }

1.自定義管道: 工具命令: ng  g  pipe 管道名 @Pipe({ name: 'sex' }) class SexPipe { transform(val, args){ return ...; } } 示例:建立一個管道: zzmm,能夠把數字1/2/3分別轉換爲"黨員/中共黨員」、」團員/中國共青團團員」和"羣衆/中國人民羣衆」

2.(重點/難點)父子組件間的數據傳遞 ng g  component  parent ng g  component   child   (1)父組件給子組件傳遞數據:父=>子-Props Down (1.1)子組件聲明本身專有的屬性 @Input()     //Input裝飾器把下面的屬性變爲「輸入型屬性」 userName: string; (1.2)父組件使用子組件的專有屬性賦值一值爲父組件的模型數據 <app-child [userName]="myName"> ----------------------------------------------------------------------- parent.component.html: <h1>這裏是父組件</h1> <app-child [uname]=" parentName' > </app-child> parent.component.ts: parentName: '父親的名稱'   child.component.ts: @Input( ) private uname: string ----------------------------------------------------------------------- (2)子組件給父組件傳遞數據:子=>父 一Events Up (2.1)子組件聲明並觸發事件，觸發時攜帶本身的數據 @Output() unameEvent = new EventEmitter(); ... this.unameEvent.emit(data); (2.2)父組件監聽子組件的事件，並提供處理函數接收事件數據 < app-child (unameEvent)= "doEvent($event)" > .... doEvent( data ){...} --------------------------------------------------------------------- parent.component.html: <h1>這裏是父組件</h1> <app-child (childEvent)= "doChildEvent($event)"> </app-child> parent.component.ts: doChildEvent( data){ .. }   child.component.ts: private childName: string = '孩子的名稱' @(Ouput) private childEvent = new EventEmitter() doClick(){ this.childEvent.emit( this.childName ) }

3.服務和依賴注入 Angular認爲: Component:組件,僅應該只負責視圖,只參與展現;與展現無關的語句都應該剝離出去;例如:作日誌、計時、網絡數據訪問 Service:服務,就是一個簡單的對象,負責執行從組件中剝離的與視圖無關的操做，例如:作日誌、計時、網絡訪... 建立服務: ng  generate  service  服務名

inject:打針,注入 injectable:能被注入給別人的   Angular建立對象的兩種方式: (1)手工建立 var logger = new LoggerService(); logger.log("用戶增長了一個商品); (2)依賴注入(Dependency Injection) logger = null; constructor(logger:LoggerService){ this.logger = logger } 在構造方法中聲明須要依賴某個對象，且該對象是」能夠被注入的 (@Injectable)" ,那麼Angular就會自動建立依賴的對象,並注入給 當前構造方法

TypeScript知識點一 強類型語言: 1.類型聲明: class Book{ price: number = 1.5 author: any = 'Tom' } work( tool: number[] ): void{ }   2.接口:是一種特殊的class,用於規定一個class必須提供特定的方法 interface Runnable{ run() stop() } class Car implements Runnable{ run(){} stop(){} }   3.類成員(屬性/方法)的訪問修飾符 ①private: 私有成員，只能在當前類內部使用; class中的屬性通常都應該聲明爲私有的或被保護的! ②protected:被保護的，只能在當前類內部以及子類中使用 ③public:默認值!公共成員，能夠被任何類使用; class中的方法通常聲明爲公共的!     4.類屬性的聲明/賦值方式 class Book{ private price:number =0 public constructor( price: number ){ this.price = price } }   上面的代碼能夠簡寫爲: class Book{ //構造方法中的形參前加private/ protected/public此形參 自動變爲一個同名屬性，且自動賦值 public constructor( private price: number ){ 　　　　} 　　} var book1 = new Book( 100 )

1.Angular核心概念之六————服務和DI(依賴注入) Component:負責視圖的數據綁定/事件處理 Service:負責從組件中剝離的與視圖無關的任務,如日誌計時、網絡訪問... 注意: Angular 中的依賴注入是基於構造方法的參數類型，而與前後順序無關 建立服務: @lnjectable( { //能夠被注入給某個組件 //Injector/Provider:注入器/服務提供者,負責建立服務對象 並注入給組件, Angular 會自動爲每一個服務建立必需的注入器 }) export class LoggerService{ }     問題: Angular 中的Service能夠在哪裏被提供/Service的提供者/注入器有哪些? 方式1:聲明服務時提供——根模塊中提供的服務對象是整個應用中 「 單例的"(logger.service.ts中) @lnjectable({  　　providedIn: 'root' }) export class LoagerService{ } 萬式2:在模塊中提供----在當期模塊中的全部組件共用同一 個服務對象（app module.ts中） @Injectable() @NgModule({ providers: [ LoggerService ]  }) 方式3:在組件聲明中提供----該服務僅能做用於當前組件（組件的ts文件中） @Component({ selector: 'app-myc01', template:'', providers: [ LoggerService ] })

問題:前端技術中有哪些異步請求方案? (1)原生XHR: (2)jQuery封裝: $.ajax( )    基於回調函數= >回調地獄 (3)Axios:底層仍是XHR，基於Promise,能夠避免回調地獄 (4)Angular HttpClient服務:底層仍是XHR 基於Observable (5)ES2016新方案: Fetch: 底層不是XHR!就是fetch對象!   不支持請求打斷、請求排隊 由W3C提供的XHR的替代方案，採用Promise

2.Angular中異步請求服務器端數據 HTTPClient Service:是Angular官方提供的異步請求工具 使用步驟: (1)在主模塊中引入HTTPClientModule-會提供 HttpClient服務的注入器 @NgModule({ imports: [ HttpClientModule ] }) (2)在須要使用異步請求模塊中聲明依賴HttpClient服務 constructor(private http: HttpClient){} (3)調用HttpClient提供的異步數據請求服務 this.http.get( ) this.http.post( ) this.http.put( ) this.http.delete( )

3. Rx.js和Observable對象 Angular中HttpClient服務底層基於Rx.js 第三方模塊 官方: RxJS是Reactive Extensions for JavaScript 的縮寫，是一 個基於可觀測數據流在異步編程應用庫。RxJS是Reactive Extensions在JavaScript.上的實現。-般說到RxJS,都會講他是基 於流的響應式的結合觀察者和迭代器模式的一種庫 Observer模式(也稱爲「訂閱-發佈」模式): 乙方聲明「訂閱(subscribe)" 甲方; 在將來的某個不肯定時間，甲方"發佈(publish)" 新消息，乙方會當即接到通知 HttpClient服務採用了「觀察者/訂閱-發佈模式" ,其最核心對象爲:  let obj=new Observable( ); //可被觀察的對象 //能夠關注/訂閱「可被觀察的」對象 pbj.subscribe( ( )=>{ //收到訂閱消息時的回調函數} )

示例:建立組件: ProductList,點擊「加載更多」則異步請求更多數據,呈如今表格中，

4.Angular中組件的聲明週期鉤子函數 Hooks Function:聲明好的特定的函數,到了指定的時間點，就會被自動執行 LifeCycle Hooks Function:在組件的不一樣生命階段會自動執行的函數 面試題: Angular中組件的生命週期鉤子函數按順序有: (0)constructor( ):構造方法執行且僅執行一次 (1)ngOnChanges( ):組件的輸入屬性值發生賦值或改變 (2)ngOnInit():組件正在初始化,執行且僅執行一次 (3)ngDoCheck( ):組件正在執行變化檢查 (4)ngAfterContentlnit( ):組件內容初始化以後 (5)ngAfterContentChecked():組件內容被從新檢查後 (6)ngAfterViewInit( ):組件視圖初始化以後 (7)ngAfterViewChecked):組件視圖被從新檢查後 (8)ngOnDestroy( ):組件即將從DOM樹上銷燬,用於釋放定時器、取消訂閱...執行且僅執行一次

5.Angular核心概念之七一路由和 SPA應用 Single Page Application,單頁應用----整個應用中只有一個完整的HTML頁面，其它全部的「頁面」 SPA應用的優勢: (1)DOM樹只須要建立一次，"頁面切換」只是在切換部分元素 (2)便於實現「過場動畫」一多頁應用不可能作到 SPA應用的不足: （1）不便於實現SEO優化 SPA應用的核心----路由詞典（把一個地址和一個組件一 一對應起來）： [ { path: 'index'，component: ... { path: 'produlct/list'，component: ... { path: 'user/login', component: ... ] SPA應用的原理:框架根據客戶端請求的路由地址,異步加載對應的組件內容,替換以前的組件內容 使用Angular中的路由步驟: (0)提早準備好路由組件 ng g component index ng g component productList ng g component productDetail ( (1)在根模塊中建立路由詞典 var  routes = [ {path:", component: ... }] (2)在根模塊引入路由模塊，註冊路由詞典 @NgModule({ import: [ RouterModule.forRoot(routes) ] }) (3)在根模塊的模板中聲明路由組件的佔位符 <router-outlet></router-outlet> (4)讓客戶端請求路由地址 http://127.0.0.1:4200/product/list

示例： 1）建立以下四個組件: ng g component index 　　　　　　　　  ng g component productList   　　　　　　　　ng g component productDetail ng g component userCenter 2）建立路由詞典，爲每一個組件分配訪問路徑 index　　　　=>        index productList   =>        product/list productDetail =>　　product/detail userCenter     =>　　user/center let routes=[{path:'',component:...},...] 3)在根模塊中註冊路由詞典 RouterModule.forRoot(routes); 4)在根組件中聲明路由出口 app.component.html:  <router-outlet></router-outlet> 5)使用客戶端訪問每一個路由地址,測試路由功能實現 http://127.0.0.1:4200/user/center     1.路由詞典的配置 let routes=[   {path:'',component:IndexComponent},   {path:'index',component:IndexComponent},   {path:'product/list',component:ProductListComponent},   {path:'product/detail',component:ProductDetailComponent},   {path:'user/center',component:UserCenterComponent},   {path:'**',component:NotFoundComponent} 注意:路由詞典中的路由path不能以'/' 開頭，可是，路由跳轉時指定的路徑最好都以‘/’開頭 2.路由跳轉 從一個路由地址跳轉到另外一個有兩種方法: 方式1:編程方式 constructor(private router:Router){} ... this.router.navgeteByUrl('router') 方式2:模板方式 <any routerLink="..."> 注意：routerLink指令能夠用在任何元素上，如DIV、A、BUTTON       3.路由參數 在路由的path屬性中,有些部分固定不變,有些部分須要動態變化: { path: product/detail/20'， component: .. } { path: product/detail/23'， component: .. } { path: product/detail/35'， component: .. } -------------------------------------------------------------------- { path: product/detail/:pid'， component: ... } 路由參數:路由地址中的變量 使用步驟: ①路由詞典中設置路由參數:  path: 'product/detail/:pid', ②路由跳轉時提供路由參數值: <any routerLink= " /product/detail/35"> ③在目標組件中讀取當前路由的參數 constructor( private route: ActivatedRoute ){ } ngOnInit(){ this.route.params.subscribe( (data)=>{ 　　data.pid 　　}) }

4.路由嵌套 在一個路由組件內部,有部份內容固定,另外一區域中的內容能夠切換不一樣的子組件一嵌套路由 路由詞典: let routes = [ { path: 'user/center', component: UserCenterComponent, children: [ { path: 'myinfo', component: .... { path: 'headpic', component: .. { path: 'security', component: ... 　　　] 　　} ] 路由出口: app.component.html: < router-outlet> </router-outlet> user-center.component.html:....< router-outlet> </router-outlet>... 示例:爲「用戶中心」建立嵌套路由 (0)建立必需的子組件 ng g component myInfo ng g component headPic ng g component securityManagement     5.路由守衛 Guard:護衛，守護者 有些路由地址只有在特定條件知足的狀況下才容許訪問,不知足的狀況下禁止訪問 如是否登陸、是否充值、是否知足時間段限制... 對訪問條件是否知足而進行設置，知足的話,就讓訪問路由組件;不然就不 讓訪問一這種對象成爲 「路由守衛對象」 使用方法: ①建立一個路由守衛: @lnjectable({ providedIn: 'root' }) class Xxx { canActivate(){ //組件是否容許被激活 ....... return true / false ; 　　} } } ②使用路由守衛 [ { path: 'user/center', component: UserCenterComponent, canActivate: [ XxxGuard ] children: [ ...] } ]   建立一個路由守衛:  TimeCheckGuard, 做用:若是當前時間是18:00~ 24:00，容許用戶訪問user/center,不然禁止訪問

移動端應用的種類: (1)Native App: 原生App,指使用Java/Kotlin爲Android. OC/Swift 爲ios開發應用程序，直接運行與手機操做系統上 優點:運行速度快   劣勢:兩套代碼不跨平臺，且必須下載 (2)Web App: 使用HTML/CSS/JS技術編寫相似原生App的應用,代碼運行於手機中的瀏覽器(如WebView)中， 優點:無需提早下載、一套代碼處處運行     劣勢: 運行效率低、不能訪問手機底層系統服務   (3)Hybrid App: 使用HTML/CSS/JS技術編寫相似原生App的應用,並混入部分Java/OC等驅動代碼以調用系統底層服務，最終運行於操做系統中 優點:結合了前兩種的優點 (4)Dart/ Flutter一 表明着將來      6.基於Angular的UI組件庫 Angular相關的組件庫: (1)lonic (2)Material (3)Zorro (4)Zorro Mobile lonic概述: https://ionicframework.com/ lonic是一個基於HTML/CSS/JS技術的,建立混合App的UI組件庫技術。底層能夠不依賴於任何框架(弓|入.css和.js就能夠運行),也能夠 與Vue.js、React、 Angular 框架整合在一塊兒，做爲它們的第三方組件庫使用。   lonic CLI = Angular CLI + UIModule +移動端打包工具... 移動端打包工具 md: Meterial Design      Android Studio ios                                 XCode HBuilder:能夠打包Android/iOs安裝程序（國內）   使用方法: (1)下載全局腳手架工具 npm i  -g ionic                    (npm config set registry https://registry.npm.taobao.org/) (2)運行腳手架工具在當前目錄下建立一個項目 ionic start 項目名 blank ionic start 項目名 tabs ionic start 項目名 sidemenu 建立好項目後會自動調用npm i 下載所依賴的第三方模塊 (3)進入項目目錄,運行它 　　cd  項目名 　　npm start (4)啓動客戶端瀏覽器，訪問開發服務器  用(手機)瀏覽器訪問項目 http://127.0.0.1:4200   lonic的九種主題色----color: primary(藍白)、secondary(青白)、tertiary(偏紫白)、danger(紅白)、warn(黃白)、 success(綠白)、dark(黑白)、 medium(灰白). light(亮色)   2.lonic App的頁面佈局 <ion-app> ion-header > ion-toolbar > ion-title >標題 ion-content[padding] >內容 ion-footer > ion-toolbar > ion-title >內容 </ion-app> ------------------------------------------------------------ lonic主體中的「柵格佈局系統」一仿 Bootstrap3: <ion-grid> < ion-row> <ion-col  no-padding size="寬" offset="偏移" push="右推" pull="左拉"> </ion-col> </ion-row> </ion-grid>   Module:模塊 Model:模型，MVVM中第一個M Modal:模態對話框   3.lonic提供預約義組件 Icon:圖標<ion-icon name=""> Button:按鈕<ion-button> Badge:徽章<ion-badge> Card:卡片ion-card> ion-card-header + ion-card-content Alert:警告框，必須使用AlertController建立並呈現   this.alertController.create({ }).then((d)= >{d.present()}) Modal:模態框，必須使用ModalController建立並呈現 this.modalController.create({ }).then((d)= >{d.present()}) Item:列表項 <ion-item detail href= "#"> <ion-avatar slot= "start"> img </ion-avatar> < ion-thumbnail> img </ion-thumbnail> <ion-label> </ion-label> < ion-button slot= "end"> < /ion-item>   卡片：< ion-card> ion-card-header + ion-card-content< /ion-card> List:列表 InfiniteScroll:無窮滾動組件,滾動到底部時加載更多內容 <ion-infinite-scroll threshold = "20px" (ionInfinite)= "loadData" > <ion-infinite-scroll-content loadingSpinner="" loadingText="> </ ion-infinite-scroll> Refresher:刷新器，從頂部顯示加載更多內容 搜索條: <ion-searchbar> 滑動輪播: <ion-slides> <ion-slide> </ion-slide> </ion-slides> 標籤頁: <ion-tabs> </ion-tabs> 2.Angular & lonic階段項目 實現步驟: (1)建立空白的lonic項目模板 (2)建立項目必需的組件     ng g component main   盛放ion-tabs組件的頁面 ng g component index　　　　首頁（1F/2F/3F） ng g component  product-list　　商品列表頁 ng g component  cart　　購物車頁 ng g component  login　　登陸頁 ng g component not-found    404頁 ng g component product-detail 商品詳情頁   確保每一個組件都在AppModule中進行了聲明: declarations:[ ] (3)修改根組件模板AppComponent.html,使用 <ion-app> <ion-router-outlet></ion-router-outlet> 　　<app-main> </app-main>  </ion-app>   (4)編輯main.component.html,聲明頁籤組件 <ion-tabs> <ion-tab-bar> <ion-tab-button>圖標+文字</ion-tab-button> </ion-tab-bar> </ion-tabs>     (5)編輯路由配置模塊文件app-routing.module.ts,聲明並註冊路由詞典 const routes = [ {path: ", component: IndexComponent}, {path: 'product-list', component: ProductListComponent}, {path: 'product-detail/:pid', component: ProductDetailComponent}, {path: 'cart', component: CartComponent}, {path: 'login', component: LoginComponent}, {path: **',component: NotFoundComponent}, ]; 此時可使用客戶端進行測試，訪問頁籤中的每一個按鈕，能夠在路由出口顯示對應路由組件頁面 --------------------------------------------------------------------------------------------  (6)開始修改主頁組件模板: index.component.html, 添加頁面內容 <ion-header> img + ion-searchbar </ion-header> < ion-content> slides + ion-item +ion-grid>ion-card + ... < /ion-content> -------------------------------------------------------------------------------------------   (7)修改商品列表頁模板: product-list.component.html, 添加頁面內容 <ion-header> ion-button + ion-searchbar </ion-header> <ion-content> ion-card> ion-item+ ion-infinite-scroll + ion-text </ion-content> 模型數據: productList、 pno、 hasMore、 http  ------------------------------------------------------------------------------------------ 解釋跨域請求： 跨域請求是瀏覽器的一種安全策略，瀏覽器禁止xml訪問另一個不一樣域下的資源，能夠是不一樣協議、不一樣端口、不一樣域名，只要有一點不同就算跨域，出於安全考慮不容許使用數據 跨域請求解決方案： jsonp方案 ：缺點是隻能發get請求、效率偏低在dom樹上動態建立script cors方案：只適合先後端是一家的狀況 服務器端代理     HTML元素屬性(Attribute)和JS DOM對象的屬性(Property) ①元素屬性和對象屬性同名: <img src= " Xxx"> document.createElement('img').src= "xx" ②元素屬性和對象屬性不一樣名: <input   class="box" tabindex="3" > document.createElement('box' ).className= "box" document.createElement( box').tabIndex= "3" ③元素屬性在對象屬性不存在: <td colspan="3"> document.createElement('td").colSpan= "box" ④對象屬性在元素屬性中不存在 document.createElement('div').innerHTML = 'abcd' <div innerHTML="">         自定義一個管道內倆種模式