淺談Angularjs的一些優點

時間 2019-11-07

標籤淺談 angularjs 一些優點欄目 AngularJS 简体版

原文原文鏈接

　　使用angularjs作過兩個管理項目了，談不上深刻了解，只是能熟練運用罷了，在此談談本身對ng的一些理解。javascript

　　使用ng主要是爲了減輕前端js代碼量，增長js的複用。並且ng是一個很炫的框架。那麼ng到底有哪些優點了？咱們爲何要使用ng了？css

　　首先分析下ng作的應用與傳統應用的區別：html

　　傳統企業應用:

　　a：經過iframe加載菜單，加載頁面。前端

　　b：每一個功能點都是獨立頁面。java

　　c：每一個功能點包含完整且獨立的js和css。angularjs

　　使用Angularjs的單頁面應用：

　　a：每一個功能都是部件。ajax

　　b：動態加載。瀏覽器

　　c：整個系統都是共用一個域。服務器

　　經過上面的比較能夠知道使用ng作的單頁面應用在加載時更快，而且更適應當下的ajax與後臺交互方式。若是你們有ng的基礎會發現使用ng能夠重用不少代碼，如寫成指令或者服務。那麼ng與傳統的技術比較有什麼區別了？mvc

　　1：客戶端模板

　　多頁面的應用經過組裝和拼接服務器上的數據來生成HTML，而後輸出到瀏覽器，這樣會形成代碼臃腫不堪並且極爲不雅觀。Angularjs不一樣於此的是，傳遞模板和數據到瀏覽器，而後在瀏覽器端進行組裝。瀏覽器的角色變成了只提供模板的靜態資源和模板所須要的數據。固然還有不少好用的js模板類庫，好比：arttemplate。

　　2. Angularjs使用了傳統的mvc模式

MVC的核心概念是，在代碼之間明確分離管理數據（模型），應程序邏輯（控制器），並將數據呈現給用戶（視圖）。在Angularjs單頁面應用中，視圖就是DOM，控制器就是Javascript類，模型數據存儲在對象屬性中。

　　3. 數據綁定

典型的DOM操做，都是先經過id或者class找到相應的dom節點而後對dom節點進行賦值等操做。這樣的工做重複性很高，還要確保界面和javascript屬性中獲取到數據時正確的狀態(若有的dom節點是js動態生成的，並不能直接綁定click函數等)。而使用了Angularjs就不用擔憂查找dom節點以及js動態生成dom節點不能綁定事件的事了，使用ng只須要將要綁定的事件寫在相應的dom上便可。至於數據綁定，則是控制器中模型的數據與視圖層模型的數據時刻保持一致。

如：

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

控制器代碼：

function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}

當控制中greeting的模型數據改變時試圖層的數據將會進行相應的改變。

　　4：依賴注入

　　經過依賴注入$scope能夠對控制器等注入一些服務。如：

function HelloController($scope, $log) {
$scope.greeting = { text: 'Hello' };
}

　　在此控制器中經過依賴注入將$scope,$log注入到控制器，提供給開發者使用。依賴注入的另外一種方式

　　HelloController.$inject($scope,$log);

　　5：指令

　　一個指令用來引入新的HTML語法。指令是DOM元素上的標記，使元素擁有特定的行爲。舉例來講，靜態的HTML不知道如何來建立和展示一個日期選擇器控件。讓HTML能識別這個語法，咱們須要使用指令。指令經過某種方法來建立一個可以支持日期選擇的元素。咱們會按部就班地介紹這是如何實現的。若是你寫過AngularJS的應用，那麼你必定已經使用過指令，無論你有沒有意識到。你確定已經用過簡單的指令，好比 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行爲。例如，ng-repeat 重複特定的元素，ng-show 有條件地顯示一個元素。若是你想讓一個元素支持拖拽，你也須要建立一個指令來實現它。指令背後基本的想法很簡單。它經過對元素綁定事件監聽或者改變DOM而使HTML擁有真實的交互性。

　　<!DOCTYPE html>
　　<html ng-app="superHero">
　　<head>
　　<script src="../public/angular/angular.min.js"></script>
　　<script src="../public/angular/angular-resource.js"></script>
　　<script src="../public/myJs/mainday3.js"></script>
　　<link rel="stylesheet" href="../public/foundation.min.css"/>
　　<title></title>
　　<META HTTP-EQUIV="Refresh" content="54441">
　　</head>
　　<body>df
　　<div>
　　<superman class='myTitle'></superman>
　　<div superman>hello</div>
　　</div>
　　</body>
　　</html>

　　js控制中代碼爲:

　　var myApp=angular.module("superHero",[]);
　　myApp.directive("superman",function(){

　　return{ 　　　　restrict: 'EA', 　　　　replace: true, 　　　　transclude:true, 　　　　scope:function(){ 　　　　title:'myTitle' 　　}, 　　template:"<div class='title'>zhangwesdfjslda;</div>" , 　　link:function(scope,element,attrs){ 　　scope.title = "alert-box";　　// alert("jinru"); 　　} 　　};　　});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。