bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

Angular單頁面怎么應用

本篇內容介紹了“Angular單頁面怎么應用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創新互聯是一家企業級云計算解決方案提供商,超15年IDC數據中心運營經驗。主營GPU顯卡服務器，站群服務器，成都服務器托管，海外高防服務器，大帶寬服務器，動態撥號VPS，海外云手機，海外云服務器，海外服務器租用托管等。

Angular布局模板

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

angular material design官網是https://material.angular.io 。

國內的ant design of anular，官網是https://ng.ant.design 。

Angular：面向組件的設計模式

為什么用Angular？

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

  • 單向綁定

  • 雙向綁定

  • 單頁面應用

  • 路由

  • 網絡請求，前端框架的一大重點是網絡請求。

  • 基于組件

    面向組件設計模式：

    view html ：view html視圖模板。

    class：code代碼、typescript、data&methods數據和方法。

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

動手實驗——創建Angular6工程

首先確認Angular官網https://angular.io/ 。

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

npm install -g @angular/cli

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

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

  1. 創建工程，首先創建工程目錄，然后進入這個目錄。

    cd D:\npm-library\angular-project

  2. 輸入創建工程指令：

    ng new my-app

     

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

      下面的問題是問是否需要更嚴格的類型檢查和捆綁導入，這項設置能幫你提前發現錯誤。更多信息請去網站上查看，我選了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                                        ]

      耐心等待工程創建完畢。我這里發現一句提示“ Packages installed successfully.”意思是工程創建完畢，但是下面還有一句提示“'git' 不是內部或外部命令，也不是可運行的程序
      或批處理文件。”，根據提示我推測是創建工程時需要用到git，但是我的系統里沒有安裝git，那么現在需要安裝git。

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

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

      安裝完成git后，不要忘了添加git的環境變量，我在path變量里添加了一項內容：

      C:\Program Files\Git\bin

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

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

  3. 運行工程

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

    工程創建完畢后，進入剛才的工程目錄：

    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)

    意思是問你是否愿意匿名分享有關該項目的一些數據給Angular 團隊，有關詳細信息可以去網站查看。我推薦選N。

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

    Compiled successfully.

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

    之后會自動打開該項目的網頁內容，網頁內容如下：

Angular單頁面怎么應用

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

  1. 接下來關閉powershell窗口和網頁，用vscode打開剛才的工程目錄。

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

    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是啟動模塊的意思，它的參數是AppModule。

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

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

Angular單頁面怎么應用

Template：View、HTML，即網頁、顯示的內容。

Class：Code、TypeScript、Data & Methods，即代碼、數據、方法。

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

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

    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(組件)文件內容：

    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'指向的是網頁文件。

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

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

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

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

Angular單頁面怎么應用

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

  • 現在app開發流行代碼(.ts文件)、結構(.html文件)、樣式(.css)分離。

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

    嘗試修改該文件內容為：

    span {
color:red;
}

    可以看到網頁字體立馬變成紅色了：

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

  • 打開app.component.html，找到{ {，刪除一個{，再看網頁內容會一片白，沒有顯示。

    按ctrl+shift+i，打開console標簽，可以看到報錯內容，根據報錯內容可以排查bug。

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

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

  1. 創建組件

    • 創建組件首先注意路徑，一定要在當前工程路徑下創建component。創建組件命令：

      ng g c productlist

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

      創建結果如下：

      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)

      接下來繼續創建“productcreate”、“orderlist”、“ordercreate”

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

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

      重新編譯，打開項目后發現網頁沒變化，是因為組件還沒加入頁面。

  2. 引入路由概念，前端概念2大重點——路由、網絡請求。

    • 查看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標簽已經有五條記錄，declarations是宣告的意思。下面的import要添加組件導入才能生效。

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

    • 接下來再查看頁面，發現仍然沒有任何變化，這是因為新創建的4個組件的html文件內容尚未寫入任何內容。接下來修改app.component.html文件，添加進入新增組件的導航欄。

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

      再查看頁面發現已經有導航欄，點擊以后注意看上面網頁地址部分會發生變化，但頁面沒有變化。

Angular單頁面怎么應用

  • 接下來梳理網頁加載順序：

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

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

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

    再看app.module.ts文件中：

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

    routes會根據下面的表映射到對應的網頁：

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

    再看其中一個組件“productlist”中html文件的內容

    <p>productlist works!</p>

  • 經過上述梳理，了解路由跳轉過程，再嘗試刷新網頁，點擊導航欄可以看到有了變化。

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

    npm install bootstrap --save

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

    建議按下列指令順序執行安裝bootstrap：

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

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

Angular單頁面怎么應用

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

  • 編輯styles.css，導入bootstrap包。

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

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

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

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

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

Angular單頁面怎么應用

  1. 構建數據：

    數據分靜態數據和動態數據，靜態數據指固定不變的數據，動態數據指從文件或服務器中動態獲取的數據。

    最終頁面效果：

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

      export class product {

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

    • 其次創建模擬數據文件mock-product.ts，編輯它的內容，寫入數據：

      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文件，修改內容如下：

      <!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數組中循環取元素，其中的{      {product.title}}是變量，從數組元素中取值得來。

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

      <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文件添加數據，重復復制3條記錄，現在products數組中有6條數據，再次刷新網頁檢查是否有6個card。可以確認網頁中已有6個card。這就是動態數據。

Angular單頁面怎么應用

“Angular單頁面怎么應用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前名稱：Angular單頁面怎么應用
轉載源于：http://vcdvsql.cn/article40/pphpeo.html

成都網站建設公司_創新互聯，為您提供ChatGPT、用戶體驗、品牌網站設計、定制開發、動態網站、網站設計

廣告

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

綿陽服務器托管