Angular學習前期準備

時間  2020-04-20
標籤 angular 學習 前期 準備 欄目 AngularJS 简体版
原文   原文鏈接

[TOC]css

簡介

Angular (一般是指 "Angular 2+" 或 "Angular v2 及更高版本")是一個基於 TypeScript 的開源 Web 應用框架 由 Google 的 Angular 團隊以及社區共同領導。Angular 是由 AngularJS的同一個開發團隊徹底重寫的。html

Angular 8 於2019年5月28日發佈。特性包括：爲全部應用代碼進行差別化加載、針對惰性加載路由的動態導入、Web workers、支持 TypeScript 3.4，而且把 Angular Ivy 做爲可選的預覽特性。Angular Ivy 的可選預覽特性包括：node

  • 生成的代碼在運行時更易於閱讀和調試
  • 更快的從新構建
  • 改進了有效載荷的大小
  • 改進了模板類型檢查
  • 向後兼容

最值得期待的特性之一是 Ivy，它是一個向後兼容的、基於增量式 DOM 架構的全新渲染引擎。Ivy 從設計之初就考慮到了搖樹優化，這意味着應用的發佈包中只會包含那些在應用中真正用到的 Angular 部件。jquery

能夠預期，每個版本都會向後兼容前一個版本。Google 承諾每一年會進行兩次升級。web

前提條件

在開始以前，請確保你的開發環境中包括 Node.js® 和 npm 包管理器。typescript

Node.js

Angular 須要 Node.js 版本 10.9.0 或更高版本，最好下載最新版本。npm

關於 Node.js 的安裝及環境配置能夠參考：node.js 安裝詳細步驟教程json

驗證是否安裝配置成功，請在終端/控制檯窗口中運行 node -v 。bootstrap

npm 包管理器

Angular、Angular CLI 和 Angular 應用都依賴於 npm 包中提供的特性和功能。要想下載並安裝 npm 包，你必須擁有一個 npm 包管理器。瀏覽器

本搭建指南使用 npm 客戶端命令行界面，Node.js 已經默認安裝了它。

npm 可能安裝失敗，建議先用 npm 安裝一下 cnpm，用淘寶鏡像安裝：npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

要檢查你是否安裝了 npm 客戶端，請在終端/控制檯窗口中運行 npm -v 。

Angular配置

安裝 Angular CLI

你可使用 Angular CLI 來建立項目、生成應用和庫代碼，以及執行各類持續開發任務，好比測試、打包和部署。

全局安裝 Angular CLI。

要使用 npm 命令安裝 CLI，請打開終端/控制檯窗口，輸入以下命令：

npm install -g @angular/cli
或者
cnpm install -g @angular/cli
複製代碼

建立項目

打開終端/控制檯窗口找到你要建立項目的目錄

ng new 項目名稱

ng new angularDemo01
複製代碼

ng new 命令會提示你提供要把哪些特性包含在初始應用中。按 Enter 或 Return 鍵能夠接受默認值。

Angular CLI 會安裝必要的 Angular npm 包和其餘依賴包。這可能要花幾分鐘的時間。

ng new angularDemo01 --skip-install
複製代碼

上述命令只會建立項目，可是不會導入相關依賴，以後還須要本身導入依賴。使用 cnpm 命令速度會比較快。

cd angularDemo01
npm install
或者
cnpm install
複製代碼

CLI 會建立一個新的工做區和一個簡單的歡迎應用，隨時能夠運行它。

項目結構大體以下：

index.html 是整個 APP 的頁面入口。 代碼以下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularDemo01</title>
  <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></app-root>
</body>
</html>
複製代碼

重點關注 <app-root></app-root> ，<app-root> 至關因而局部頁面的佔位符。 這個區域是動態加載的，運行時，會被 app.component.html 替換掉。具體來講，就是被 app.component.html 替換掉。

查看根組件 app.component.ts 內容：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}
複製代碼

上述代碼把模板定義在一個獨立的 HTML 文件中， 再經過 @Component 裝飾器中的 templateUrl 屬性， 在組件元數據中把它連接到組件，也可使用 template 屬性把它定義爲內聯的。以下所示：

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

@Component({
  selector: 'app-root',
  template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `
})
export class AppComponent {
  title = 'Tour of Heroes';
}
複製代碼

模板是包在 ECMAScript 2015 反引號 (`) 中的一個多行字符串。 注意是反引號，不是單引號 (') — 容許把一個字符串寫在多行上， 使 HTML 模板更容易閱讀。

在後續的學習過程當中，咱們可使用 log 方法輸出的內容中包括變量信息，注意嵌套在字符串外面的也是反引號，不然沒法加載變量的值。以下例所示：

const url = `${this.heroUrl}/?id=${id}`;
this.log(`found heroes matching "${term}"`) :
複製代碼

運行應用

Angular CLI 中包含一個服務器，方便你在本地構建和提供應用。

  1. 轉到 workspace 文件夾（angularDemo01）。
  2. 使用 CLI 命令 ng serve 和 --open 選項來啓動服務器。
![微信截圖_20200403102400](F:\blog_photos\csdn\53\微信截圖_20200403102400.png)ng serve --open
複製代碼

ng serve 命令會啓動開發服務器、監視文件，並在這些文件發生更改時重建應用。

--open（或者只用 -o 縮寫）選項會自動打開你的瀏覽器，並訪問 http://localhost:4200/。

在終端點擊 ctrl+c便可退出。

Angular開發

因爲工做習慣使用 IEDA 開發工具，所以只須要安裝一下 Angular 插件，後續開發項目，先經過命令行新建項目，而後再用 IEDA 打開進行編輯，安裝了 Angular 插件以後編寫代碼會有提示。

建立組件

組件控制屏幕上被稱爲視圖的一小片區域。

在終端輸入 ng g命令：

F:\workspace\Angular\angularDemo01>ng g
Generates and/or modifies files based on a schematic.
usage: ng generate <schematic> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults
    When true, disables interactive input prompts for options with a default.
  --dry-run (-d)
    When true, runs through and reports activity without writing out results.
  --force (-f)
    When true, forces overwriting of existing files.
  --help
    Shows a help message for this command in the console.
  --interactive
    When false, disables interactive input prompts.

Available Schematics:
  Collection "@schematics/angular" (default):
    appShell
    application
    class
    component
    directive
    enum
    guard
    interceptor
    interface
    library
    module
    pipe
    service
    serviceWorker
    webWorker
複製代碼

再輸入命令

ng g component components/news
複製代碼

在 VsCode 中能夠直接建立組件。

好比說新增 product-alerts 組件，該 generator 爲組件的三個部分建立了啓動文件：

  • product-alerts.component.ts
  • product-alerts.component.html
  • product-alerts.component.css

建立服務

服務是一個廣義的概念，它包括應用所需的任何值、函數或特性。狹義的服務是一個明肯定義了用途的類。 Angular 把組件和服務區分開，以提升模塊性和複用性。 經過把組件中和視圖有關的功能與其餘類型的處理分離開，你可讓組件類更加精簡、高效。

ng g service my-new-service
//建立到指定目錄下面
ng g service services/storage
複製代碼

而後在 app.module.ts 裏面 import 這個服務，而且聲明。

import { StorageService } from './../../services/storage.service';

@NgModule({
  declarations: [// 配置當前項目運行的組件
    AppComponent, NewsComponent, Argular01Component, FormComponent, SearchComponent
  ],
  imports: [// 配置當前模塊運行依賴的其餘模塊
    BrowserModule,
    FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
複製代碼

而後在須要用到服務的組件中引用，而且做爲參數傳給構造函數。

import {StorageService} from '../../services/storage.service';

constructor(public storage: StorageService) {
}
複製代碼

建立類

如同 Java 中的類對象，在 Angular 中也能夠這樣定義，首先須要建立一個類文件：

ng generate class model/user
複製代碼

代碼以下：

export class User {
  id: number;
  name: string;
  // constructor(public id: number, public name: string) { }
}
複製代碼
使用類

在須要使用的地方導入 Hero 類，便可建立 Hero 類型的對象。

import { User } from './user';

//當類中有構造函數時能夠這樣定義User對象
// export const USERS: User[] = [
// new User(1, 'hresh1'),
// new User(2, 'hresh2'),
// new User(3, 'hresh3'),
// new User(4, 'hresh4')
// ]

export const USERS: User[] = [
  { id: 101, name: 'hresh1' },
  { id: 102, name: 'hresh2' },
  { id: 103, name: 'hresh3' },
  { id: 104, name: 'hresh4' }
]
複製代碼

建立接口

能夠定義類，固然也能夠建立接口，而後類能夠繼承接口。

ng generate interface model/hero
複製代碼

代碼以下：

export interface Hero {
  id: number;
  name: string;
}
複製代碼

interface 是把公共屬性和方法的提取出來，class 是具體的對象 。

class User implements Hero {

}
等價於
export class User {
  id: number;
  name: string;
}
複製代碼

具體使用場景同在 Java 中同樣，根據狀況來決定。

引入 JQuery

一、將第三方類庫安裝到本地

npm install jquery --save
npm install @types/jquery --save
複製代碼

二、將庫引入到當前的項目中去

修改.angular-cli.json的"scripts" ，注意路徑必定要書寫正確。

"scripts": ["./node_modules/jquery/dist/jquery.js"]
複製代碼

三、在組件中引入JQuery

import { Component } from '@angular/core';
import * as $ from 'jquery';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 
  ngOnInit() {
  	$("body").css("color", "blue");
  }
}
複製代碼

問題記錄

Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)

問題解析：tslint 以爲本身根據右邊的"hresh"判斷出 name 的類型是 string，因此，認爲再寫 string 是畫蛇添足。

解決方法：tslint.json 添加"ignore-properties"。不推斷類的屬性（字段）。

"no-inferrable-types": [
      true,
      "ignore-params",
      "ignore-properties"
    ]
複製代碼

tslint註釋標記

ts文件中使用如下注釋來臨時忽略規則出現的錯誤，參考這裏

/ tslint:disable /——忽略該行如下全部代碼出現的錯誤提示 / tslint:enable /——當前ts文件從新啓用tslint // tslint:disable-line——忽略當前行代碼出現的錯誤提示 // tslint:disable-next-line——忽略下一行代碼出現的錯誤提示

TSLint: Identifier 'errMsg' is never reassigned; use 'const' instead of 'let'. (prefer-const)

問題：

var todoList = this.storage.get('todoList');
複製代碼

TypeScript 的 Tslint 又報錯了，這回是變量未從新賦值，被強烈建議使用常量修飾符const。

解決方案：打開項目下的 tslint.json 文件，將 prefer-const 設置爲 false。 而後將 var 改成 let，修改後的語句爲：

// tslint:disable-next-line:prefer-const
let todoList = this.storage.get('todoList');
複製代碼

Angular 中獲取 input 標籤的內容

document.getElementById('name').value;
複製代碼

該語句執行報錯，修改引號以後在控制檯是能夠獲得正確內容。若是想要獲取數據，能夠改成這樣：

const nameInput = document.getElementById('name') as HTMLInputElement;
console.log(nameInput.value);
複製代碼

==和===區別

簡單來講： == 表明相同， ===表明嚴格相同, 爲啥這麼說呢，

這麼理解： 當進行雙等號比較時候： 先檢查兩個操做數數據類型，若是相同， 則進行===比較， 若是不一樣， 則願意爲你進行一次類型轉換， 轉換成相同類型後再進行比較， 而===比較時， 若是類型不一樣，直接就是 false。

比較過程：

  雙等號==：

  （1）若是兩個值類型相同，再進行三個等號(===)的比較

  （2）若是兩個值類型不一樣，也有可能相等，需根據如下規則進行類型轉換在比較：

    1）若是一個是null，一個是undefined，那麼相等

    2）若是一個是字符串，一個是數值，把字符串轉換成數值以後再進行比較

  

  三等號===:

  （1）若是類型不一樣，就必定不相等

  （2）若是兩個都是數值，而且是同一個值，那麼相等；若是其中至少一個是NaN，那麼不相等。（判斷一個值是不是NaN，只能使用isNaN( ) 來判斷）

  （3）若是兩個都是字符串，每一個位置的字符都同樣，那麼相等，不然不相等。

  （4）若是兩個值都是true，或是false，那麼相等

  （5）若是兩個值都引用同一個對象或是函數，那麼相等，不然不相等

  （6）若是兩個值都是null，或是undefined，那麼相等

參考文獻

9Angular速查表

Angular8入門學習筆記

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