使用angularjs做過兩個管理項目了，談不上深入了解，只是能熟練運用罷了，在此談談自己對ng的一些理解。
使用ng主要是為了減輕前端js代碼量，增加js的復用。而且ng是一個很炫的框架。那么ng到底有哪些優勢了？我們為什么要使用ng了？
首先分析下ng做的應用與傳統應用的區別：
傳統企業應用:
a：通過iframe加載菜單，加載頁面。
b：每個功能點都是獨立頁面。
c：每個功能點包含完整且獨立的js和css。
使用Angularjs的單頁面應用：
a：每個功能都是部件。
b：動態加載。
c：整個系統都是共用一個域。
通過上面的比較可以知道使用ng做的單頁面應用在加載時更快，並且更適應當下的ajax與后台交互方式。如果大家有ng的基礎會發現使用ng可以重用很多代碼，如寫成指令或者服務。那么ng與傳統的技術比較有什么區別了？
1：客戶端模板
多頁面的應用通過組裝和拼接服務器上的數據來生成HTML，然后輸出到瀏覽器，這樣會造成代碼臃腫不堪而且極為不雅觀。Angularjs不同於此的是，傳遞模板和數據到瀏覽器，然后在瀏覽器端進行組裝。瀏覽器的角色變成了只提供模板的靜態資源和模板所需要的數據。當然還有很多好用的js模板類庫，比如：arttemplate。
2. Angularjs使用了傳統的mvc模式
3. 數據綁定
- <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");
}
};
});