Angular單頁面怎么應(yīng)用

本篇內(nèi)容介紹了“Angular單頁面怎么應(yīng)用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家企業(yè)級云計算解決方案提供商,超15年IDC數(shù)據(jù)中心運營經(jīng)驗。主營GPU顯卡服務(wù)器，站群服務(wù)器，成都服務(wù)器托管，海外高防服務(wù)器，大帶寬服務(wù)器，動態(tài)撥號VPS，海外云手機，海外云服務(wù)器，海外服務(wù)器租用托管等。

Angular布局模板

bootstrap是通用的css庫，angular發(fā)布了自己的css庫——angular material design。

angular material design官網(wǎng)是https://material.angular.io 。

國內(nèi)的ant design of anular，官網(wǎng)是https://ng.ant.design 。

Angular：面向組件的設(shè)計模式

為什么用Angular？

由谷歌團隊打造，升級比較快，社區(qū)活躍。

  • 單向綁定

  • 雙向綁定

  • 單頁面應(yīng)用

  • 路由

  • 網(wǎng)絡(luò)請求，前端框架的一大重點是網(wǎng)絡(luò)請求。

  • 基于組件

    面向組件設(shè)計模式：

    view html ：view html視圖模板。

    class：code代碼、typescript、data&methods數(shù)據(jù)和方法。

    metadata：information decorator信息裝飾器(指令)

動手實驗——創(chuàng)建Angular6工程

首先確認Angular官網(wǎng)https://angular.io/ 。

然后安裝node.js，從官網(wǎng)https://nodejs.org/en/download/ 下載安裝。

npm install -g @angular/cli

哎，在這卡住了，進度條不動。

昨天晚上折騰了1個多小時最終搞定angular運行環(huán)境。

  1. 創(chuàng)建工程，首先創(chuàng)建工程目錄，然后進入這個目錄。

    cd D:\npm-library\angular-project

  2. 輸入創(chuàng)建工程指令：

    ng new my-app

     

    • 然后會跳出幾個問題讓你選擇，老師的界面里面沒有選擇問題，估計是版本的差異。

      下面的問題是問是否需要更嚴格的類型檢查和捆綁導(dǎo)入，這項設(shè)置能幫你提前發(fā)現(xiàn)錯誤。更多信息請去網(wǎng)站上查看，我選了y。

      Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict  (y/n)

    • 下面的問題是問你是否添加Angular路由，我選了y。

      Would you like to add Angular routing? (y/n)

    • 下面的選項讓你選擇一個模板，我選了CSS。

      ? 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 [ https://stylus-lang.com                                        ]

      耐心等待工程創(chuàng)建完畢。我這里發(fā)現(xiàn)一句提示“ Packages installed successfully.”意思是工程創(chuàng)建完畢，但是下面還有一句提示“'git' 不是內(nèi)部或外部命令，也不是可運行的程序
      或批處理文件?！保鶕?jù)提示我推測是創(chuàng)建工程時需要用到git，但是我的系統(tǒng)里沒有安裝git，那么現(xiàn)在需要安裝git。

      按照老師教的方法，去bing.com搜索“official site”(在必應(yīng)國際版中搜官方網(wǎng)站，沒有廣告，保證搜索到的是真正的官網(wǎng)。這里我吐槽一下某度，廣告太多，搜到的經(jīng)常不是官網(wǎng))。

      去git官網(wǎng)下載git工具，網(wǎng)址是https://git-scm.com/downloads。我的是win10系統(tǒng)，下載的是64-bit git for windows setup，文件大小是46.3MB。

      安裝完成git后，不要忘了添加git的環(huán)境變量，我在path變量里添加了一項內(nèi)容：

      C:\Program Files\Git\bin

      關(guān)閉powershell，重新用管理員身份運行一個powershell，這是為了讓剛剛添加的環(huán)境變量生效，輸入命令“git”測試一項git是否可以正常調(diào)用。

      測試無誤后，再把剛剛的my-app刪掉再重建項目。留神是否還有報錯信息。

  3. 運行工程

    老師運行工程前花了不少時間講指令創(chuàng)建的復(fù)雜工程與可視化界面創(chuàng)建工程與vue創(chuàng)建工程的利弊。意思是說指令創(chuàng)建的復(fù)雜工程在真正做項目時效率反而更高，學(xué)習(xí)的時候不妨嘗試指令創(chuàng)建項目。

    工程創(chuàng)建完畢后，進入剛才的工程目錄：

    cd .\my-app\

    運行工程：

    ng serve --open

    運行時會有一個問題讓你選擇：

    ? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see http://angular.io/analytics. (Y/N)

    意思是問你是否愿意匿名分享有關(guān)該項目的一些數(shù)據(jù)給Angular 團隊，有關(guān)詳細信息可以去網(wǎng)站查看。我推薦選N。

    回車以后系統(tǒng)會對項目進行編譯，編譯完成會提示：

    Compiled successfully.

    老師在課堂上說了很多編譯的優(yōu)點，在編譯的過程中系統(tǒng)會分析檢查代碼，發(fā)現(xiàn)錯誤會報錯，編譯的過程是排錯的過程，即將原來typescript的代碼編譯成JavaScript的代碼。這個對開發(fā)效率是一種大大的提升。

    之后會自動打開該項目的網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容如下：

Angular單頁面怎么應(yīng)用

注意：這個畫面和老師的畫面不一樣，還是因為Angular版本不同的問題。

  1. 接下來關(guān)閉powershell窗口和網(wǎng)頁，用vscode打開剛才的工程目錄。

  1. 接下來打開src目錄，仔細觀察里面的文件，其中是main.ts是工程入口，文件內(nèi)容如下：

    import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

    其中.bootstrapModule是啟動模塊的意思，它的參數(shù)是AppModule。

    web應(yīng)用由模塊(module)組成；模塊由組件(component)組成；

    組件由Template、Class、Metadata三部分組成。

Angular單頁面怎么應(yīng)用

Template：View、HTML，即網(wǎng)頁、顯示的內(nèi)容。

Class：Code、TypeScript、Data & Methods，即代碼、數(shù)據(jù)、方法。

Metadata：Information Decorator，即Angular定義的特殊內(nèi)容，如裝飾器等。

  • 去app目錄下查看，可以找到對應(yīng)的文件：app.module.ts(模塊)，查看app.module.ts文件內(nèi)容：

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  • 查看app.component.ts(組件)文件內(nèi)容：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

    注意看其中的templateUrl: './app.component.html'指向的是網(wǎng)頁文件。

  • 查看app.component.html這個文件。對比該文件和http://localhost:4200/顯示的內(nèi)容，可以找到，myapp顯示的內(nèi)容全是在該文件中定義。

  • 修改app.component.ts文件中的title為“我的第一個Angular應(yīng)用程序'”，再查看網(wǎng)頁內(nèi)容已更新如下圖：

  • 可以看到title已經(jīng)變成了我們修改的內(nèi)容“我的第一個Angular應(yīng)用程序”，但是后面的“app is running!”是怎么回事呢？

  • 復(fù)制“app is running!”，再去app.component.html文件中查找，可以看到<span>{ { title }} app is running!</span>，這里控制了標(biāo)題輸出的內(nèi)容。將其修改為<span>歡迎使用{ { title }}</span>，再查看網(wǎng)頁內(nèi)容已更新如下圖：

Angular單頁面怎么應(yīng)用

  • 通過上述的修改測試，我們可以了解到web應(yīng)用修改可以立即生效，因為后端服務(wù)一直在運行，所以我們修改的代碼和網(wǎng)頁內(nèi)容會立即刷新、生效。

  • 現(xiàn)在app開發(fā)流行代碼(.ts文件)、結(jié)構(gòu)(.html文件)、樣式(.css)分離。

    可以看到項目目錄下有一個app.component.css，樣式在這里寫。

    嘗試修改該文件內(nèi)容為：

    span {
color:red;
}

    可以看到網(wǎng)頁字體立馬變成紅色了：

  • 以上案例還說明的了一個單向數(shù)據(jù)綁定概念。在復(fù)雜頁面維護時很方便。

  • 打開app.component.html，找到{ {，刪除一個{，再看網(wǎng)頁內(nèi)容會一片白，沒有顯示。

    按ctrl+shift+i，打開console標(biāo)簽，可以看到報錯內(nèi)容，根據(jù)報錯內(nèi)容可以排查bug。

  • 框架解決的問題是讓簡單、重復(fù)勞動用電腦來完成，可以讓程序員專注于解決業(yè)務(wù)邏輯。

以上是angular工程的基本框架，接下來嘗試創(chuàng)建新的組件。

  1. 創(chuàng)建組件

    • 創(chuàng)建組件首先注意路徑，一定要在當(dāng)前工程路徑下創(chuàng)建component。創(chuàng)建組件命令：

      ng g c productlist

      以上是簡寫，全寫命令是ng generate component productlist，創(chuàng)建商品列表。

      創(chuàng)建結(jié)果如下：

      CREATE src/app/productlist/productlist.component.html (26 bytes)
CREATE src/app/productlist/productlist.component.spec.ts (661 bytes)
CREATE src/app/productlist/productlist.component.ts (295 bytes)
CREATE src/app/productlist/productlist.component.css (0 bytes)
UPDATE src/app/app.module.ts (495 bytes)

      接下來繼續(xù)創(chuàng)建“productcreate”、“orderlist”、“ordercreate”

      ng g c productcreate
ng g c orderlist
ng g c ordercreate

      以上一起創(chuàng)建了4個組件，這里創(chuàng)建完組件后，在工程中會產(chǎn)生相應(yīng)的變化，接下來用vscode打開工程目錄my-app，可以看到在工程目錄下多了4個子目錄，名字分別是：productlist、productcreate、orderlist、ordercreate。子目錄下分別有4個文件，后綴名是.css、.html、.spec.ts、.ts文件。

      重新編譯，打開項目后發(fā)現(xiàn)網(wǎng)頁沒變化，是因為組件還沒加入頁面。

  2. 引入路由概念，前端概念2大重點——路由、網(wǎng)絡(luò)請求。

    • 查看app.module.ts，添加路由：

      import { RouterModule , Routes} from '@angular/router';

      const routes: Routes = [
  {
    path: 'productlist',
    component: ProductlistComponent
  },
  {
    path: 'productcreate',
    component: ProductcreateComponent
  },
  {
    path: 'ordetlist',
    component: OrderlistComponent
  },
  {
    path: 'ordercreate',
    component: OrdercreateComponent
  },
];

    • 注意@NgModule({下面的 declarations標(biāo)簽已經(jīng)有五條記錄，declarations是宣告的意思。下面的import要添加組件導(dǎo)入才能生效。

      imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],

    • 接下來再查看頁面，發(fā)現(xiàn)仍然沒有任何變化，這是因為新創(chuàng)建的4個組件的html文件內(nèi)容尚未寫入任何內(nèi)容。接下來修改app.component.html文件，添加進入新增組件的導(dǎo)航欄。

      <nav>
  <div >
    <a routerLink="/productlist"> 商品列表 </a>
    <a routerLink="/productcreate"> 創(chuàng)建商品 </a>
    <a routerLink="/orderlist"> 訂單列表 </a>
    <a routerLink="/ordercreate"> 創(chuàng)建訂單 </a>
  </div>
</nav>

      再查看頁面發(fā)現(xiàn)已經(jīng)有導(dǎo)航欄，點擊以后注意看上面網(wǎng)頁地址部分會發(fā)生變化，但頁面沒有變化。

Angular單頁面怎么應(yīng)用

  • 接下來梳理網(wǎng)頁加載順序：

    首先是indexhtml，它的<body>內(nèi)部只有<app-root></app-root>，再去app.component.ts文件中可以找到以下內(nèi)容：

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

    在這可以看到root顯示的頁面指向了app.component.html和對應(yīng)的.css文件。

    再看app.module.ts文件中：

    imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],

    routes會根據(jù)下面的表映射到對應(yīng)的網(wǎng)頁：

    const routes: Routes = [
  {
    path: 'productlist',
    component: ProductlistComponent
  },
  {
    path: 'productcreate',
    component: ProductcreateComponent
  },
  {
    path: 'ordetlist',
    component: OrderlistComponent
  },
  {
    path: 'ordercreate',
    component: OrdercreateComponent
  },
];

    再看其中一個組件“productlist”中html文件的內(nèi)容

    <p>productlist works!</p>

  • 經(jīng)過上述梳理，了解路由跳轉(zhuǎn)過程，再嘗試刷新網(wǎng)頁，點擊導(dǎo)航欄可以看到有了變化。

  • 現(xiàn)在嘗試裝修頁面，通過終端指令引入bootstrap，進入工程路徑，輸入工程指令：

    npm install bootstrap --save

    這里又遇到坑，很多報錯和安裝失敗，估計又是因為墻的原因，解決方法還是使用cnpm指令，意思是用淘寶的軟件倉庫，不用官方的軟件倉庫。

    建議按下列指令順序執(zhí)行安裝bootstrap：

    cnpm i jquery --save
cnpm i popper.js --save
cnpm install bootstrap --save

    注意安裝過程，留神有沒有報錯信息，當(dāng)看到下面這樣的畫面表示bootstrap安裝正確無誤。

Angular單頁面怎么應(yīng)用

  • 安裝完成后回到當(dāng)前工程注意看整個工程目錄，里面有一個styles.css文件，這個文件和app目錄是同級目錄的，意思是該文件定義的全局的樣式，即整個app的樣式。

  • 編輯styles.css，導(dǎo)入bootstrap包。

    @import "~bootstrap/dist/css/bootstrap.min.css";

  • 編輯app.component.html文件，修改導(dǎo)航欄的樣式。首先從bootstrap官網(wǎng)查找Documentation(文檔)，側(cè)邊欄點擊Components(組件)，選擇一個適合的樣式，點擊該樣式右邊的copy(復(fù)制)按鈕，將其paste(粘貼)到文件中，注釋其內(nèi)容，復(fù)制樣板。

    <nav class="nav">
  <a class="nav-link">

    nav class = "nav"，這里的nav是從bootstrap中引入的nav，下面的class="nav-link"也是同理。

  • 現(xiàn)在導(dǎo)航欄已經(jīng)美化完成，回憶一下上節(jié)課做的card，我們可以把它復(fù)制過來放到productlist里面。之后再點擊商品列表會彈出3個card。注意縮放頁面時card的數(shù)量會自動調(diào)整，這就是現(xiàn)在流行的響應(yīng)式布局，自動適應(yīng)用戶的屏幕。

Angular單頁面怎么應(yīng)用

  1. 構(gòu)建數(shù)據(jù)：

    數(shù)據(jù)分靜態(tài)數(shù)據(jù)和動態(tài)數(shù)據(jù)，靜態(tài)數(shù)據(jù)指固定不變的數(shù)據(jù)，動態(tài)數(shù)據(jù)指從文件或服務(wù)器中動態(tài)獲取的數(shù)據(jù)。

    最終頁面效果：

    • 首先在app目錄下new一個文件，文件名是product.ts，編輯它的內(nèi)容，定義product類：

      export class product {

    title!: String;
    detail!: String;
    image_url!: String;
    price!: Number;
}

    • 其次創(chuàng)建模擬數(shù)據(jù)文件mock-product.ts，編輯它的內(nèi)容，寫入數(shù)據(jù)：

      import {product} from "./product";

export const PROUDUCTS : product[] = [
    {
    title: "投影儀",
    detail: "堅果 (JmGo) J7",
    image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
    price: 2999
    },
    {
    title: "投影儀",
    detail: "堅果 (JmGo) J7",
    image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
    price: 2999
    },
    {
    title: "投影儀",
    detail: "堅果 (JmGo) J7",
    image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
    price: 2999
    },
];

    • 編輯productlist.component.html文件，修改內(nèi)容如下：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport">{ product.image_url}}" alt="card-img-cap">
                <div class="card-body">
                    <h6 class="card-title">{
       
       
       { product.title }}</h6>
                    <p class="card-text">{
       
       
       { product.detail }}</p>
                    <p class="card-text">{
       
       
       { product.price }}</p>
                    <a href="#" class="btn btn-primary">加入購物車</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

      注意*ngFor="let product of products"，意思是從products數(shù)組中循環(huán)取元素，其中的{      {product.title}}是變量，從數(shù)組元素中取值得來。

    • 接下來可以嘗試美化細節(jié)，如加入購物車按鈕調(diào)整為紅色，即將其代碼改為btn-danger，再刷新頁面可以看到購物車按鈕顏色已經(jīng)變成紅色。再嘗試修改價格的標(biāo)簽顏色以及添加前后的文字內(nèi)容，細節(jié)的標(biāo)簽顏色。

      <body>
    <div class="container">
        <div class="row">
            <div class="card mycard"  *ngFor="let product of products">
                <img class="card-img-top" src="{
       
       
       { product.image_url}}" alt="card-img-cap">
                <div class="card-body">
                    <h6 class="card-title">{
       
       
       { product.title }}</h6>
                    <p class="text-muted">{
       
       
       { product.detail }}</p>
                    <p class="text-danger">價格：{
       
       
       { product.price }}元</p>
                    <a href="#" class="btn btn-danger">加入購物車</a>
                </div>
            </div>
        </div>
    </div>
</body>

    • 再嘗試對mock-products.ts文件添加數(shù)據(jù)，重復(fù)復(fù)制3條記錄，現(xiàn)在products數(shù)組中有6條數(shù)據(jù)，再次刷新網(wǎng)頁檢查是否有6個card?？梢源_認網(wǎng)頁中已有6個card。這就是動態(tài)數(shù)據(jù)。

Angular單頁面怎么應(yīng)用

“Angular單頁面怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當(dāng)前名稱：Angular單頁面怎么應(yīng)用
轉(zhuǎn)載源于：http://muchs.cn/article40/pphpeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、用戶體驗、品牌網(wǎng)站設(shè)計、定制開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管