Angular框架

来源:https://www.cnblogs.com/zhen-prz/archive/2019/03/12/10513212.html
-Advertisement-
Play Games

一、如何安裝Angular 在文件夾中打開cmd,輸入nmp init創建一個package.json。這個可以一路回車跳過(如果沒有特別要註明)。nmp是前臺的包,用於管理後臺。成功創建package.json後再輸入nmp install bower -g,bower推薦安裝到全局,這裡bowe ...


一、如何安裝Angular

  在文件夾中打開cmd,輸入nmp init創建一個package.json。這個可以一路回車跳過(如果沒有特別要註明)。nmp是前臺的包,用於管理後臺。成功創建package.json後再輸入nmp install bower -g,bower推薦安裝到全局,這裡bower是需要Git的支持,所以需要安裝一個Git軟體,然後在配置一下電腦的環境變數,將Git的路徑複製到PATH變數的後面(不配置有時候會出錯)。然後在cmd中輸入bower install angular --save安裝Angular,安裝成功後在script標簽中引用就可以了。

二、Angular簡介

  Angular屬於一個全新的框架,它是完成一整個應用的。它與jQuery、bootstrap、easyUI這些框架不同,jQuery稱之為類庫,是基於DOM操作的,而操作DOM是效率最低的。類庫和框架的區別:MVVM、MVC;

M(模塊)、V(視圖)、C(控制器)、VM(視圖模塊),通常我們也稱為MV*框架。

Angular的特性:

------雙向數據綁定

------模塊化

------語義化標簽

------依賴註入

Angular有四個版本,1.x、2.x、4.x、6.x,這四個版本之間沒有任何關係,它們都是屬於谷歌的產品,是由四個團隊自行研發的。

三、Angular常用指令

①ng-app  初始化一個Angular JS應用程式

上面代碼表示,在你想要開始使用Angular執行的元素,在標簽裡面添加ng-app屬性,它的屬性值可以任意填。

② ng-bind 綁定HTML元素到程式中。

  不過通常我們都是直接用 {{}} 來替換它,直接在{{值}},而不是在標簽中加入ng-bind

這兩種形式都可以展現出數據,不同的是我們刷新頁面的時候,用 {{  }} 形式表現出的值會閃爍出來,這是因為當瀏覽器在翻譯執行的時候,{{ }}會當成DOM展現出來,然後再由Angular 執行的時候才會編譯這種格式,所以,想要避免這種小bug只有寫上 ng-bind 或者 ng-bind-template='{{movie}}',這兩種方式都能避免花括弧的閃爍。

③ ng-init 初始化數據

上面代碼中,ng-init中的替換了我們在控制器中設定變數的值,控制器中的變數,都會被ng-init中的變數所替代。

④ ng-model 綁定控制器中的值到應用數據中

上面的代碼中,在輸入框中輸入的值會以h1標簽的格式展現出來,這個是實時進行的。

⑤ ng-repeat 定義集合中每項數據的模板

  也就是說我們可以用ng-repeat把數組或者對象遍歷出來,拿到我們想用到的信息。

 上面的代碼中,用ng-repeat迴圈輸出數組中的對象,用 . 的形式將對象中的具體信息提取出來。如果也想得到對象在數組的位置也可以通過(key,val) in arr 的形式。

⑥ ng-src 指定<img>元素的src屬性

  這個也可以實現動態更換src屬性的路徑來達到更換圖片的效果。

⑦ ng-class 指定HTML元素使用的CSS類。

  ng-class用於給HTML元素綁定一個或者多個CSS類。

上面的代碼中,給一個HTML元素綁定多個CSS類時,我們可以用true/false來切換,也可以用0/1來切換。

在表格中,如果我們想要一種隔行變色的效果,可以用ng-class-even。它跟ng-class的用法相同,但是ng-class-even是作用在偶數行中,在單數行中可以用ng-class-odd

上面代碼就是通過evenodd 給表格的單雙行更換不同的背景色。

⑧ ng-disabled 規定一個元素是否被禁用相當於input中的disabled屬性,參數是布爾值。

⑨ ng-readonly 規定一個元素的只讀模式,相當於input中的readonly屬性,參數是布爾值。

⑩ ng-checked 規定元素是否被選中,多用於單選和多選中,相當於預設選中,參數是布爾值。

⑪ ng-selected 下拉列表中的預設選中,參數是布爾值。

⑫ ng-click 元素被點擊時的行為,參數是執行後的表達式

上面代碼表示,當我點擊按鈕時count就會自動加1。

⑬ ng-dblclick 元素被雙擊時的行為,參數是執行後的表達式。

上面代碼的效果跟單擊時的效果相同,這個是雙擊時count加1。

⑭ ng-mouseenter 、ng-mouseleave

  ng-mouseenter 滑鼠移入元素髮生的行為,ng-mouseleave 滑鼠移出元素髮生的行為。參數是執行後的表達式

上面代碼表示,當滑鼠移入之後,count加1,移出後,count減1。

以上都是一些較為常用的Angular指令,寫法與我們之前學習的jQuery、bootstrap等等略有不同,但總的來說還是較為方便的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 問題描述 後端使用如下方式接收前端傳入參數: 由於使用了 @RequestBody 註解,所以,前端需要傳遞 JSON 數據。那麼,如何將表單數據快速轉換為 JSON 字元串呢? 定義如下通用方法: 以上方法會返回一個 Object,然後再通過 JSON.stringify(obj) 將 JSON ...
  • 一、Promise 的含義 Promise 是非同步編程的一種解決方案,所謂Promise,簡單來說就是一個容器,裡面保存著一個非同步操作的結果。 Promise對象有以下兩個特點: 1、對象的狀態不受外界的影響。Promise對象代表一個非同步操作,有三種狀態:pending(進行中)、fulfille ...
  • 前沿 項目地址 "vue admin" 歡迎 star 近幾個月,接手了一個老項目的重構規劃,有多老呢?就是前端青銅時代的項目,一個前後端都在同一個鍋里的項目、完全沒有使用任何的打包工具。 後臺 + 渲染頁面 前端 、`css js jQuery` 複製粘貼就是乾。 前端不夠後端來湊。如果前端有一些 ...
  • 插槽用於內容分發,存在於子組件之中。 插槽作用域 父級組件作用域為父級,子級組件作用域為子級,在哪定義的作用域就在哪。 子組件之間的內容是在父級作用域的,無法直接訪問子組件裡面的數據。 插槽元素 <slot></slot> 或 <slot name="名稱">預設值</slot> 1:如果定義了sl ...
  • 原文地址 本文主要講述了使用JavaScript創建對象的幾種方式,分別是傳統的Object構造函數、對象字面量、工廠模式、構造函數模式、原型模式、組合模式,以及es6的class定義類。然後從babel的角度探究es5與es6創建對象的區別。 1.創建對象的幾種方式 (1).Object構造函數和 ...
  • 推薦8款最好用的前端開發工具供美工或者前端開發人員使用,當然若你是NB的全棧工程師也可以下載使用。 ...
  • 1.代碼 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>OpenLayers</title> 6 <link re ...
  • 我們都都知道kafka的消費組要rebalance,需要觸發以下3個條件之一: 組成員變更,比如新consumer加入組,或已有consumer主動離開組,再或是已有consumer崩潰時則出發rebalance. 組訂閱topic數發生變更,比如使用基於正則表達式的訂閱,當匹配正則表達式的新top ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...