AngularJS

一、AngularJS是什么?

AngularJs是一個用于設計動態(tài)web應用的結構框架。首先,它是一個框架,不是類庫,是像EXT一樣提供一整套方案用于設計web應用。

二、AugularJS特性

angular引入了一些非常棒的特性,包括模板機制、數(shù)據(jù)綁定、模塊、指令、依賴注入、路由。通過數(shù)據(jù)與模板的綁定,能夠讓我們擺脫繁瑣的DOM操作,而將注意力集中在業(yè)務邏輯上。AngularJS有五個最重要的功能和特性:
特性一:雙向的數(shù)據(jù)綁定
特性二:模板
特性三:MVC
特性四:服務和依賴注入
特性五:指令(directives)

三、指令

通過使用模板,可以把model和controller中的數(shù)據(jù)組裝起來呈現(xiàn)給瀏覽器,還可以通過數(shù)據(jù)綁定,實時更新視圖,讓我們的頁面變成動態(tài)的。模板中可以使用的東西包括以下四種:
1.指令:ng提供的或者自定義的標簽和屬性,用來增強HTML表現(xiàn)力;
2.標記:即雙大括號{{}},可將數(shù)據(jù)單向綁定到HTML中;
3.過濾器:用來格式化輸出數(shù)據(jù);
4.表單控制:用來增強表單的驗證功能。
1)樣式相關的指令
    ng-class用來給元素綁定類名
    ng-style用來綁定元素的css樣式
    對于比較常用的元素顯隱控制,ng也做了封裝,ng-show和ng-hide的值為boolean類型的表達式,當值為true時,對應的show或hide生效??蚣軙胐isplay:block和display:none來控制元素的顯隱。
2)表單控件功能相關指令
      ng-checked控制radio和checkbox的選中狀態(tài)
      ng-selected控制下拉框的選中狀態(tài)
    ng-disabled控制失效狀態(tài)
3)事件綁定相關指令
       ng-change
  ng-dblclick
  ng-mousedown
  ng-mouseenter
  ng-mouseleave
  ng-mousemove
  ng-mouseover
  ng-mouseup
  ng-submit 
4)特殊的ng-src和ng-href
5)自定義指令restrict中可以分別設置:
    A匹配屬性
    E匹配標簽
    C匹配class
    M匹配注釋

四、自定義服務

//使用$provide來定義
var app = angular.module('MyApp', [], function($provide) {
    $provide.factory('remoteData', function() {
 var data = {name:'n',value:'v'};
        return data;
    });
});
//使用factory方法

    app.factory('remoteData',function(){
    var data = {name:'n',value:'v'};
    return data;
});
//使用service方法
app.service('remoteData',function(){
    this.name = 'n';
    this.value = 'v';
});

五、路由示例
路由的使用方式及步驟:為demoApp添加一個路由,代碼如下:

demoApp.config(['$routeProvider',function($routeProvider) {  
$routeProvider.when('/list', {  
  templateUrl: 'route/list.html',  
  controller: 'routeListController'
  }).when('/list/:id', {  
   templateUrl: 'route/detail.html',
   controller: 'routeDetailController'
  }).otherwise({  
      redirectTo: '/list'  
   });  
}]);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • AngularJS AngularJS概述 介紹 簡稱:ng Angular是一個MVC框架 其他前端框架: Vu...
    我愛開發(fā)閱讀 2,403評論 0 8
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,534評論 19 139
  • 個人博客搭建完成,歡迎大家來訪問哦黎默丶lymoo的博客 博主最近了解學習了一下angularJS,記錄一下心得給...
    黎默丶lymoo閱讀 1,109評論 0 21
  • 膽怯的背后是狡黠。
    烏良閱讀 108評論 0 0
  • 今晚推出一款對于淡化色斑,美容美顏等功效的酵素--獼猴桃蘋果酵素: 1.我們先發(fā)一下水果的功效哦! 2.我們再發(fā)一...
    莎力閱讀 1,579評論 0 0

友情鏈接更多精彩內容