Sunday, Apr 12, 2026

Angular JS知識小總結

2015/11/20 來源：cnblogs

1.什麼是Angular JS?

AngularJS 是一個為動態WEB應用設計的 JavaScript結構框架.

2.Angular JS的用處?

--它是為了克服HTML在構建應用上的不足而設計;

--適用於CRUD應用,是為了消除頁面上的DOM操作而生.它的核心理念是借鑑了MVC框架,但是它其實更接近於MVVM.viemmodel是一個原生的javascript對象,angularJS把view和model加到viemmodel上,從而實現數據的綁定.而且這種綁定是雙向的,即view變化,對應的model也會變化,同樣model發生變化也會引起相應的view的變化.

--主要用來開發單頁面應用,它支持瀏覽器歷史操作，向前向後按鈕，單頁應用中的收藏操作。

--並不是所有的應用都適合用AngularJS來做,如遊戲開發之類對DOM進行大量操縱、又或者單純需要極高運行速度的應用。

3.Angular JS的特性

--雙向數據綁定: 這是AngularJS模塊的核心功能——**綁定**，ng-model和{{}}實現的是雙向綁定,如果controller和ng-model都存在於一個輸入框或元素上的話,頁面加載完後,對應元素里會顯示controller里設置的默認值,一旦在view人工修改,ng-model就會發生作用.controller控制器,可以實現單向綁定.

--模塊化:在AngularJS中，一個模板就是一個HTML文件。AuguarJS並不把模板當做String來操作。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區別於其它的框架的最大原因。

--服務和依賴注入:AngularJS擁有內建的依賴注入（DI）子系統,DI允許你請求你的依賴，而不是自己找尋它們,即"被動接受",也就是說如果你需要一個對象或者變量,只要angularJS中自有的,只要聲明它,就可以使用.

--指令:Angular JS有很多自有的ng-directives,可以幫助我們操作DOM,另外,我們還可以自定義指令,用angular模塊的directive方法.

4.幾個重要的物件

-- ng-app:一般家在最外層的根元素上,定義了angularJS腳本的作用域;

-- ng-model:把view上的標籤或屬性綁定到viemmodel中;

-- {{}}:angularJS的表達式,作用就是把viewmodel中的model顯示到view中.

--$scope:這個是angularJS的核心對象,即viewmodel對象,這個對象不能更改,依賴注入方式獲得.

5.編寫angularJS的基本流程:

頁面

-- 首先用<script>標籤,導入angular.min.js文件;

-- 一般在根元素<html>里定義angularJS腳本的作用域`<html ng-app="myAPp">`;

-- 定義控制器的作用域,在標籤里`ng-controller="myController"`;

-- 數據要綁定到viemmodel的話,在對應的標籤上用ng-model指令;或者要顯示用{{}}.

js

-- 加載需要的模塊`var myApp = angular.module("myApp",)`;第二個參數,是該模塊所依賴的模塊,沒有的話,可不填寫

-- myApp.controller("MyController",function($scope){...};控制器方法調用,回調函數的一個參數務必是$scope,這樣才能獲取到$scope,從而操縱數據.

喜歡這篇文章嗎？快分享吧

您可能感興趣

免責聲明：本文內容來源于cnblogs，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。

台灣正體

URL: https://read01.com/zh-tw/2gOKA.html

⇱ Angular JS知識小總結 - 壹讀

Angular JS知識小總結