當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

带你走近AngularJS - 基本功能介绍

發布時間：2025/3/8 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了带你走近AngularJS - 基本功能介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

帶你走近AngularJS系列：

帶你走近AngularJS - 基本功能介紹

帶你走近AngularJS - 體驗指令實例

帶你走近AngularJS - 創建自定義指令

------------------------------------------------------------------------------------------------

AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好并且可擴展的服務，包括數據綁定、DOM操作、MVC設計模式和模塊加載等。本文專注于AngularJS 指令的使用，在我們進入主題之前，我們將快速瀏覽AngularJS的基本用法。

AngularJS 不僅僅是一個類庫，而是提供了一個完整的框架。它避免了您和多個類庫交互，需要熟悉多套接口的繁瑣工作。它由Google Chrome的開發人員設計，引領著下一代Web應用開發。也許我們5年或10年后不會使用AngularJS，但是它的設計精髓將會一直被沿用。

了解AngularJS的開發人員，你肯定會為AngularJS自定義指令（它的功能相當于.NET 平臺下的自定義控件）功能感到興奮。自定義指令允許你擴展HTML標簽和特性。指令可以復用并且可以跨項目使用。

自定義指令已經得到了廣泛的應用，其中值得一提的是-Wijmo控件集。它包含了近50款基于AngularJS 控件。Wijmo是用于創建桌面和移動Web應用程序的HTML5前端控件集。從交互式圖表到強大的表格控件，Wijmo幾乎包含了我們所需要的一切。可以從官網了解Wijmo的更多信息。所以，Wijmo是學習AngularJS很好的參考示例：AngularJS Directive Gallery

創建自定義指令是非常容易的。指令可以測試、維護并且在多個項目中復用。

使用AngularJS, 需要在HTML頁面引用腳本文件，給HTML或Body標簽添加ng-app 特性。下面是一個使用AngularJS的簡單實例：

當AngularJS 加載后，它會在文檔中搜索ng-app 特性。這個標簽通常被設置給項目的主要模塊。一旦發現，Angular 就會對文檔進行操作。

在這個例子中，ng-init 特性初始化了一個msg 變量“葡萄城控件團隊博客”， ng-model 特性把它和input 控件進行了雙向綁定（注意：大括號是綁定的標記）。AngularJS 會解析這個標記，隨著input值改變實時更新msg 文本值。可以從鏈接查看效果:點擊進入

AngularJS 模塊

模塊可以說是AngularJS 的根本。它包含配置、控制、過濾、工廠模式、指令及其它模塊。

如果你熟悉.NET平臺，但初步學習Angular。下面的表格是一個簡要的對比，幫助你理解Angular中的角色扮演情況：

AngularJS	.NET	摘要
module	Assembly	應用開發模塊
controller	ViewModel	控制器，啟到不同層面間的組織作用
scope	DataContext	為視圖提供綁定數據
filter	ValueConverter	數據傳輸到視圖之前修改數據
directive	Component	可復用的UI元素，也可以理解為前端插件
factory, service	Utility classes	為其他模塊元素提供服務

例如，下面的代碼使用控制器、過濾器和指令創建了一個模塊：

// the main (app) module var myApp = angular.module("myApp", []);// add a controller myApp.controller("myCtrl", function($scope) {$scope.msg = "grapecity team blog"; });// add a filter myApp.filter("myUpperFilter", function() {return function(input) {return input.toUpperCase();} });// add a directive myApp.directive("myDctv", function() {return function(scope, element, attrs) {element.bind("mouseenter", function() {element.css("background", "yellow");}); element.bind("mouseleave", function() {element.css("background", "none");}); } });

上面示例中module 方法的第一個參數為模塊的名稱，第二個參數為它的依賴模塊列表。我們創建了一個獨立的模塊，不依賴于其它模塊。所以第二個參數為空數組（注意：即使它為空，我們也必須填寫這個參數。否則，該方法回去檢索之前的同名模塊）。這部分我們將在后續的文章中詳細闡述。

controller 構造函數獲取$scope 對象，用于存儲所有controller 暴露的接口和方法。scope 由Angular 傳遞到視圖和指令層。在這個例子中， controller 添加了msg 屬性給scope對象。一個應用模塊可以包含多個controller，每個controller各司其職，控制一個或多個視圖。

filter 構造函數返回一個方法用于更改input文本的顯示方式。Angular 提供很多內置的filter，同時，你也可以添加自定義filter，操作方式Angular內置filter相同。在這個例子中，實現了小寫到大寫的轉換。Filter不僅可以格式化文本值，還可以更改數組。AngularJS 內置的格式化Filter有number、date、currency、uppercase和lowercase。數組 filter有filter、orderBy和 limitTo。Filter需要設置參數，語法格式也是固定的： someValue |filterName:filterParameter1:filterParameter2....

directive 構造函數返回了一個方法，該方法用于傳遞一個元素，并依據scope中的參數對其進行修改。示例中我們綁定了mouseenter 和mouseleave 事件用于切換文本高亮顯示。這是一個功能簡單的指令，在后續的章節將展示如何創建一些復雜指令。

下面是使用模塊構建的頁面：

<body ng-app="myApp" ng-controller="myCtrl"><input ng-model="msg" /><p my-dctv >{{msg | myUpperFilter }}</p> </body>

可以從鏈接查看效果:點擊進入

注意應用中module、controller和filter 作為特性值應用。它們代表JavaScript 對象，因此名稱是區分大小寫的。指令的名稱同樣也是屬性值，它作為HTML標簽被解析，所以也是區分大小寫的。但AngularJS 會自動轉換這些特性為小寫，例如“myDctv" 指令變成"my-dctv" (就像內置的指令ngApp, ngController, 和ngModel會轉換成 "ng-app", "ng-controller", 和"ng-model"。

項目組織結構

使用AngularJS 可以創建大型Web項目。你可以把項目拆分為多個模塊，把一個模塊拆分為多個模塊文件。同時，可以按照你的使用習慣組織這些文件。

列舉一個典型的項目結構：

Root
??????? default.html
??????? styles
?????????????? app.css
??????? partials
?????????????? home.html
?????????????? product.html
?????????????? store.html
??????? scripts
?????????????? app.js
?????????????? controllers
?????????????????????? productCtrl.js
?????????????????????? storeCtrl.js
?????????????? directives
?????????????????????? gridDctv.js
?????????????????????? chartDctv.js
?????????????? filters
?????????????????????? formatFilter.js
?????????????? services
?????????????????????? dataSvc.js
?????????????? vendor
?????????????????????? angular.js
?????????????????????? angular.min.js

假設如果你僅希望項目中使用一個模塊，你可以如此定義：

// app.js angular.module("appModule", []);

如果希望在模塊中添加元素，你可以通過名稱調用模塊向其中添加。例如： formatFilter.js 文件包含以下元素：

// formatFilter.js // 通過名稱獲取模塊 var app = angular.module("appModule");// 向模塊中添加filter app.filter("formatFilter", function() {return function(input, format) {return Globalize.format(input, format);} }})

如果你的應用包含多個模塊，注意在添加模塊時添加其它模塊的引用。例如，一個應用包含三個模塊app、controls、和data ：

// app.js (名稱為app的模塊依賴于controls和data模塊) angular.module("app", [ "controls", "data"])// controls.js (controls 模塊依賴于data 模塊) angular.module("controls", [ "data" ])// data.js (data 模塊沒有依賴項，數組為空) angular.module("data", [])

應用的主頁面中需要聲明ng-app 指令， AngularJS 會自動添加需要的引用：

進行以上聲明后，你就可以在所有的頁面中使用其它三個模塊聲明的元素了。

這篇文章中我們了解了AngularJS的基本使用方法及結構。在下一個章節中，我們將闡述基本的指令概念，同時，會創建一些實例來幫助你加深指令作用的理解。

相關閱讀：

開放才能進步！Angular和Wijmo一起走過的日子

Angular vs React 最全面深入對比

Wijmo已率先支持Angular4 & TypeScript 2.2

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的带你走近AngularJS - 基本功能介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：通知主线程刷新
下一篇： php中重写和final关键字的使用