文章目錄
- angularJS是什麼
- angularJS的特點
- 與Jquery的比較
- angularJS的應用
-
- 單頁面應用SPA
- 判斷一個頁面是否使用AngularJS寫的
- Angular的環境搭建
-
- 下載下傳腳手架
- 建立angular項目
- 目錄結構分析
- angular的元件建立
- 小案例：helloword實作
-
- 文檔加載完畢和頁面加載完畢
- 實作如下效果
angularJS是什麼
jQuery是JS的一個函數庫，而angularJS是Google開源的前端JS結構化架構。
官網：https://angular.cn/
離線手冊下載下傳：https://www.php.cn/xiazai/shouce/58
angularJS的特點
- 雙線資料綁定
- 聲明式依賴注入
- 解耦應用邏輯，資料模型和視圖
- 完善的頁面指令
- 定制表單驗證
- Ajax封裝
與Jquery的比較
- Jquery是JS函數庫，jQuery的作用是封裝簡化dom操作的
- angularJS是JS結構化架構，他的關注點不是dom，是頁面動态的資料。
angularJS的應用
AngularJS的主要作用是建構單頁面應用或Web App應用
單頁面應用SPA
單頁面應用的特點：
- 所有的活動局限于一個頁面（即不會跳轉到新的頁面）
- 目前頁面中的部分資料發生了改變不會去重新整理整個頁面，而是局部重新整理
- 利用的是ajax技術，路由
判斷一個頁面是否使用AngularJS寫的
Chrom浏覽器下載下傳ng-inspector for AngularJS插件，固定到标簽頁上，打開一個網頁點選該插件，如果不是AngularJS寫的就會顯示：
如果是AngularJS寫的就會顯示相應的資料。
eg：微信網頁版：
Angular的環境搭建
下載下傳腳手架
- 下載下傳angular腳手架
npm i -g @angular/cli
輸入
ng v
就可以驗證是否安裝成功，出現如下内容說明安裝成功：
建立angular項目
- 選擇項目建立目錄
-
ng new 項目名稱
- 進入到項目目錄，
ng serve --open
運作成功：
目錄結構分析
app.component.spec.ts是生成的一個測試檔案
檔案詳解：
- app.module.ts
// angular的根子產品檔案，告訴angular如何組裝應用
// angular的核心子產品
import { NgModule } from '@angular/core';
// 浏覽器解析子產品
import { BrowserModule } from '@angular/platform-browser';
// 根子產品
import { AppComponent } from './app.component';
// @NgModule裝飾器，接受一個中繼資料對象，告訴angular如何編譯和啟動應用
@NgModule({
// 配置目前項目運作的元件
declarations: [
AppComponent
],
// 配置目前子產品運作依賴的其他子產品
imports: [
BrowserModule
],
// 配置項目所需服務
providers: [],
// 指定應用的根元件，通過引導根子產品AppModule來啟動應用
bootstrap: [AppComponent]
})
// 跟子產品無需導出，因為它不需要被其他元件引用
export class AppModule { }
- app.component.ts
// 引入核心子產品中的Component
import { Component } from '@angular/core';
// 元件裝飾器
@Component({
selector: 'app-root',//元件名稱
templateUrl: './app.component.html',//元件的html
styleUrls: ['./app.component.css']//元件的css
})
export class AppComponent {
title = 'my-anuglar'; //定義元件的屬性
constructor(){
// 元件類的構造函數
}
}
angular的元件建立
-
組建的建立：
利用指令
ng g component 元件名
建立元件。
通過指令建立好元件之後會自動将建立的元件配置在
app.module.ts
-
元件的使用：
在html檔案中直接使用
元件的名稱
标簽
在頁面進行引入。
eg：
在根html中引入app-news元件
<app-news></app-news>
<div>
Angular
</div>
小案例：helloword實作
文檔加載完畢和頁面加載完畢
-
document.ready：文檔結構加載完畢
等待文檔結構加載完畢的寫法:
- window.onload：整個頁面加載完畢，包括檔案結構、圖檔等。
實作如下效果
jQuery實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" name="" id="">
<p>您輸入的内容是：<span></span></p>
<script type='text/javascript' src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
<script>
$(function (){
$('input').keyup(function (){
var value = this.value
$('span').html(value)
})
})
</script>
</body>
</html>
angular實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body ng-app>
<input type="text" ng-model="username">
<p>您輸入的内容是：<span>{{username}}</span></p>
<script type='text/javascript' src='./angular/angular-1.2.29/angular.js'></script>
</body>
</html>
angular和jQuery相比：沒有寫js代碼，沒有操作Dom元素，直接操作的是動态資料。