溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Angular單頁(yè)面怎么應(yīng)用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
bootstrap是通用的css庫(kù)，angular發(fā)布了自己的css庫(kù)——angular material design。
angular material design官網(wǎng)是https://material.angular.io 。
國(guó)內(nèi)的ant design of anular，官網(wǎng)是https://ng.ant.design 。
為什么用Angular？
由谷歌團(tuán)隊(duì)打造，升級(jí)比較快，社區(qū)活躍。
單向綁定
雙向綁定
單頁(yè)面應(yīng)用
路由
網(wǎng)絡(luò)請(qǐng)求，前端框架的一大重點(diǎn)是網(wǎng)絡(luò)請(qǐng)求。
基于組件
面向組件設(shè)計(jì)模式：
view html ：view html視圖模板。
class：code代碼、typescript、data&methods數(shù)據(jù)和方法。
metadata：information decorator信息裝飾器(指令)
首先確認(rèn)Angular官網(wǎng)https://angular.io/ 。
然后安裝node.js，從官網(wǎng)https://nodejs.org/en/download/ 下載安裝。
npm install -g @angular/cli
哎，在這卡住了，進(jìn)度條不動(dòng)。
昨天晚上折騰了1個(gè)多小時(shí)最終搞定angular運(yùn)行環(huán)境。
創(chuàng)建工程，首先創(chuàng)建工程目錄，然后進(jìn)入這個(gè)目錄。
cd D:\npm-library\angular-project
輸入創(chuàng)建工程指令：
ng new my-app
然后會(huì)跳出幾個(gè)問(wèn)題讓你選擇，老師的界面里面沒(méi)有選擇問(wèn)題，估計(jì)是版本的差異。
下面的問(wèn)題是問(wèn)是否需要更嚴(yán)格的類(lèi)型檢查和捆綁導(dǎo)入，這項(xiàng)設(shè)置能幫你提前發(fā)現(xiàn)錯(cuò)誤。更多信息請(qǐng)去網(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)
下面的問(wèn)題是問(wèn)你是否添加Angular路由，我選了y。
Would you like to add Angular routing? (y/n)
下面的選項(xiàng)讓你選擇一個(gè)模板，我選了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)部或外部命令，也不是可運(yùn)行的程序
或批處理文件。”，根據(jù)提示我推測(cè)是創(chuàng)建工程時(shí)需要用到git，但是我的系統(tǒng)里沒(méi)有安裝git，那么現(xiàn)在需要安裝git。
按照老師教的方法，去bing.com搜索“official site”(在必應(yīng)國(guó)際版中搜官方網(wǎng)站，沒(méi)有廣告，保證搜索到的是真正的官網(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變量里添加了一項(xiàng)內(nèi)容：
C:\Program Files\Git\bin
關(guān)閉powershell，重新用管理員身份運(yùn)行一個(gè)powershell，這是為了讓剛剛添加的環(huán)境變量生效，輸入命令“git”測(cè)試一項(xiàng)git是否可以正常調(diào)用。
測(cè)試無(wú)誤后，再把剛剛的my-app刪掉再重建項(xiàng)目。留神是否還有報(bào)錯(cuò)信息。
運(yùn)行工程
老師運(yùn)行工程前花了不少時(shí)間講指令創(chuàng)建的復(fù)雜工程與可視化界面創(chuàng)建工程與vue創(chuàng)建工程的利弊。意思是說(shuō)指令創(chuàng)建的復(fù)雜工程在真正做項(xiàng)目時(shí)效率反而更高，學(xué)習(xí)的時(shí)候不妨嘗試指令創(chuàng)建項(xiàng)目。
工程創(chuàng)建完畢后，進(jìn)入剛才的工程目錄：
cd .\my-app\
運(yùn)行工程：
ng serve --open
運(yùn)行時(shí)會(huì)有一個(gè)問(wèn)題讓你選擇：
? 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)
意思是問(wèn)你是否愿意匿名分享有關(guān)該項(xiàng)目的一些數(shù)據(jù)給Angular 團(tuán)隊(duì)，有關(guān)詳細(xì)信息可以去網(wǎng)站查看。我推薦選N。
回車(chē)以后系統(tǒng)會(huì)對(duì)項(xiàng)目進(jìn)行編譯，編譯完成會(huì)提示：
Compiled successfully.
老師在課堂上說(shuō)了很多編譯的優(yōu)點(diǎn)，在編譯的過(guò)程中系統(tǒng)會(huì)分析檢查代碼，發(fā)現(xiàn)錯(cuò)誤會(huì)報(bào)錯(cuò)，編譯的過(guò)程是排錯(cuò)的過(guò)程，即將原來(lái)typescript的代碼編譯成JavaScript的代碼。這個(gè)對(duì)開(kāi)發(fā)效率是一種大大的提升。
之后會(huì)自動(dòng)打開(kāi)該項(xiàng)目的網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容如下：
注意：這個(gè)畫(huà)面和老師的畫(huà)面不一樣，還是因?yàn)锳ngular版本不同的問(wèn)題。
接下來(lái)關(guān)閉powershell窗口和網(wǎng)頁(yè)，用vscode打開(kāi)剛才的工程目錄。
接下來(lái)打開(kāi)src目錄，仔細(xì)觀察里面的文件，其中是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是啟動(dòng)模塊的意思，它的參數(shù)是AppModule。
web應(yīng)用由模塊(module)組成；模塊由組件(component)組成；
組件由Template、Class、Metadata三部分組成。
Template：View、HTML，即網(wǎng)頁(yè)、顯示的內(nèi)容。
Class：Code、TypeScript、Data & Methods，即代碼、數(shù)據(jù)、方法。
Metadata：Information Decorator，即Angular定義的特殊內(nèi)容，如裝飾器等。
去app目錄下查看，可以找到對(duì)應(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)頁(yè)文件。
查看app.component.html這個(gè)文件。對(duì)比該文件和http://localhost:4200/顯示的內(nèi)容，可以找到，myapp顯示的內(nèi)容全是在該文件中定義。
修改app.component.ts文件中的title為“我的第一個(gè)Angular應(yīng)用程序'”，再查看網(wǎng)頁(yè)內(nèi)容已更新如下圖：
可以看到title已經(jīng)變成了我們修改的內(nèi)容“我的第一個(gè)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)頁(yè)內(nèi)容已更新如下圖：
通過(guò)上述的修改測(cè)試，我們可以了解到web應(yīng)用修改可以立即生效，因?yàn)楹蠖朔?wù)一直在運(yùn)行，所以我們修改的代碼和網(wǎng)頁(yè)內(nèi)容會(huì)立即刷新、生效。
現(xiàn)在app開(kāi)發(fā)流行代碼(.ts文件)、結(jié)構(gòu)(.html文件)、樣式(.css)分離。
可以看到項(xiàng)目目錄下有一個(gè)app.component.css，樣式在這里寫(xiě)。
嘗試修改該文件內(nèi)容為：
span {
color:red;
}可以看到網(wǎng)頁(yè)字體立馬變成紅色了：
以上案例還說(shuō)明的了一個(gè)單向數(shù)據(jù)綁定概念。在復(fù)雜頁(yè)面維護(hù)時(shí)很方便。
打開(kāi)app.component.html，找到{ {，刪除一個(gè){，再看網(wǎng)頁(yè)內(nèi)容會(huì)一片白，沒(méi)有顯示。
按ctrl+shift+i，打開(kāi)console標(biāo)簽，可以看到報(bào)錯(cuò)內(nèi)容，根據(jù)報(bào)錯(cuò)內(nèi)容可以排查bug。
框架解決的問(wèn)題是讓簡(jiǎn)單、重復(fù)勞動(dòng)用電腦來(lái)完成，可以讓程序員專(zhuān)注于解決業(yè)務(wù)邏輯。
以上是angular工程的基本框架，接下來(lái)嘗試創(chuàng)建新的組件。
創(chuàng)建組件
創(chuàng)建組件首先注意路徑，一定要在當(dāng)前工程路徑下創(chuàng)建component。創(chuàng)建組件命令：
ng g c productlist
以上是簡(jiǎn)寫(xiě)，全寫(xiě)命令是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)
接下來(lái)繼續(xù)創(chuàng)建“productcreate”、“orderlist”、“ordercreate”
ng g c productcreate ng g c orderlist ng g c ordercreate
以上一起創(chuàng)建了4個(gè)組件，這里創(chuàng)建完組件后，在工程中會(huì)產(chǎn)生相應(yīng)的變化，接下來(lái)用vscode打開(kāi)工程目錄my-app，可以看到在工程目錄下多了4個(gè)子目錄，名字分別是：productlist、productcreate、orderlist、ordercreate。子目錄下分別有4個(gè)文件，后綴名是.css、.html、.spec.ts、.ts文件。
重新編譯，打開(kāi)項(xiàng)目后發(fā)現(xiàn)網(wǎng)頁(yè)沒(méi)變化，是因?yàn)榻M件還沒(méi)加入頁(yè)面。
引入路由概念，前端概念2大重點(diǎn)——路由、網(wǎng)絡(luò)請(qǐng)求。
查看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) ],
接下來(lái)再查看頁(yè)面，發(fā)現(xiàn)仍然沒(méi)有任何變化，這是因?yàn)樾聞?chuàng)建的4個(gè)組件的html文件內(nèi)容尚未寫(xiě)入任何內(nèi)容。接下來(lái)修改app.component.html文件，添加進(jìn)入新增組件的導(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>
再查看頁(yè)面發(fā)現(xiàn)已經(jīng)有導(dǎo)航欄，點(diǎn)擊以后注意看上面網(wǎng)頁(yè)地址部分會(huì)發(fā)生變化，但頁(yè)面沒(méi)有變化。
接下來(lái)梳理網(wǎng)頁(yè)加載順序：
首先是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顯示的頁(yè)面指向了app.component.html和對(duì)應(yīng)的.css文件。
再看app.module.ts文件中：
imports: [ BrowserModule, AppRoutingModule, RouterModule.forRoot(routes) ],
routes會(huì)根據(jù)下面的表映射到對(duì)應(yīng)的網(wǎng)頁(yè)：
const routes: Routes = [
{
path: 'productlist',
component: ProductlistComponent
},
{
path: 'productcreate',
component: ProductcreateComponent
},
{
path: 'ordetlist',
component: OrderlistComponent
},
{
path: 'ordercreate',
component: OrdercreateComponent
},
];再看其中一個(gè)組件“productlist”中html文件的內(nèi)容
<p>productlist works!</p>
經(jīng)過(guò)上述梳理，了解路由跳轉(zhuǎn)過(guò)程，再?lài)L試刷新網(wǎng)頁(yè)，點(diǎn)擊導(dǎo)航欄可以看到有了變化。
現(xiàn)在嘗試裝修頁(yè)面，通過(guò)終端指令引入bootstrap，進(jìn)入工程路徑，輸入工程指令：
npm install bootstrap --save
這里又遇到坑，很多報(bào)錯(cuò)和安裝失敗，估計(jì)又是因?yàn)閴Φ脑?，解決方法還是使用cnpm指令，意思是用淘寶的軟件倉(cāng)庫(kù)，不用官方的軟件倉(cāng)庫(kù)。
建議按下列指令順序執(zhí)行安裝bootstrap：
cnpm i jquery --save cnpm i popper.js --save cnpm install bootstrap --save
注意安裝過(guò)程，留神有沒(méi)有報(bào)錯(cuò)信息，當(dāng)看到下面這樣的畫(huà)面表示bootstrap安裝正確無(wú)誤。
安裝完成后回到當(dāng)前工程注意看整個(gè)工程目錄，里面有一個(gè)styles.css文件，這個(gè)文件和app目錄是同級(jí)目錄的，意思是該文件定義的全局的樣式，即整個(gè)app的樣式。
編輯styles.css，導(dǎo)入bootstrap包。
@import "~bootstrap/dist/css/bootstrap.min.css";
編輯app.component.html文件，修改導(dǎo)航欄的樣式。首先從bootstrap官網(wǎng)查找Documentation(文檔)，側(cè)邊欄點(diǎn)擊Components(組件)，選擇一個(gè)適合的樣式，點(diǎn)擊該樣式右邊的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ù)制過(guò)來(lái)放到productlist里面。之后再點(diǎn)擊商品列表會(huì)彈出3個(gè)card。注意縮放頁(yè)面時(shí)card的數(shù)量會(huì)自動(dòng)調(diào)整，這就是現(xiàn)在流行的響應(yīng)式布局，自動(dòng)適應(yīng)用戶(hù)的屏幕。
構(gòu)建數(shù)據(jù)：
數(shù)據(jù)分靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)，靜態(tài)數(shù)據(jù)指固定不變的數(shù)據(jù)，動(dòng)態(tài)數(shù)據(jù)指從文件或服務(wù)器中動(dòng)態(tài)獲取的數(shù)據(jù)。
首先在app目錄下new一個(gè)文件，文件名是product.ts，編輯它的內(nèi)容，定義product類(lèi)：
export class product {
title!: String;
detail!: String;
image_url!: String;
price!: Number;
}其次創(chuàng)建模擬數(shù)據(jù)文件mock-product.ts，編輯它的內(nèi)容，寫(xiě)入數(shù)據(jù)：
import {product} from "./product";
export const PROUDUCTS : product[] = [
{
title: "投影儀",
detail: "堅(jiān)果 (JmGo) J7",
image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
price: 2999
},
{
title: "投影儀",
detail: "堅(jiān)果 (JmGo) J7",
image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
price: 2999
},
{
title: "投影儀",
detail: "堅(jiān)果 (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">加入購(gòu)物車(chē)</a>
</div>
</div>
</div>
</div>
</body>
</html>注意*ngFor="let product of products"，意思是從products數(shù)組中循環(huán)取元素，其中的{ {product.title}}是變量，從數(shù)組元素中取值得來(lái)。
接下來(lái)可以嘗試美化細(xì)節(jié)，如加入購(gòu)物車(chē)按鈕調(diào)整為紅色，即將其代碼改為btn-danger，再刷新頁(yè)面可以看到購(gòu)物車(chē)按鈕顏色已經(jīng)變成紅色。再?lài)L試修改價(jià)格的標(biāo)簽顏色以及添加前后的文字內(nèi)容，細(xì)節(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">價(jià)格：{
{ product.price }}元</p>
<a href="#" class="btn btn-danger">加入購(gòu)物車(chē)</a>
</div>
</div>
</div>
</div>
</body>再?lài)L試對(duì)mock-products.ts文件添加數(shù)據(jù)，重復(fù)復(fù)制3條記錄，現(xiàn)在products數(shù)組中有6條數(shù)據(jù)，再次刷新網(wǎng)頁(yè)檢查是否有6個(gè)card?？梢源_認(rèn)網(wǎng)頁(yè)中已有6個(gè)card。這就是動(dòng)態(tài)數(shù)據(jù)。
“Angular單頁(yè)面怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼