Angularjs 總結

官方網站

angular是什么:為動態web應用設計的結構框架;

核心的功能:

1,雙向數據綁定:實現了model和view的完全綁定在一起,model變化,view也變化,反之亦然;


上面是一個小例子;

2,模板:

模板相當于html文件被瀏覽器解析到DOM中,angular把模板當做是Dom來操作,去生成一些指令來完成對view的數據綁定

3,MVVM:

Model-View-ViewModel

model:模型中包含了代表當前的應用數據,

view :視圖顯示了這些數據;

controller :控制器管理模型和視圖之間的關系;

4,依賴注入:

擁有內建的依賴注入子系統,可以幫助開發人員更容易的開發,理理解和測試應用

5,指令:

ng-app: 表明一個angularjs應用程序,

ng-init:初始化作用,變量、對象、數組;一般很少使用,都是用一個控制器來代替它

ng-model:使用ng-model指令可以把程序數據綁定到html中,實現model和view的雙向綁定;

表達式{{}} ?在{{}}中可以寫表達式;

ng-bind:和{{}}類似,ng-bind在angular解析渲染完畢后將數據顯示出來;

ng-click:定義一個angularjs單擊事件;

ng-repeat:遍歷數組集合中的每一個元素;

ng-class:預設指令,用來動態自定義dom元素的css className

ng-include:將多個頁面的公共不封提取出來;

6 過濾器: ?| 管道符

格式化為貨幣格式:{{price | currency }}? {{price | currency : ‘¥’}}

全部轉化為大寫:{{name ?| ?uppercase}} ?

全部轉化為小寫:{{name | lowercase}}

限制數組或字符串串?長度 {{ arr | limitTo : 2 }}

給數字添加千位分隔符

{{ 12345 | number }}

{{ 12345 | number : 2 }} 保留留2位小數

排序

ages | orderBy: 'age' : false 升序

ages | orderBy: 'age' : true 降序

ages | orderBy: 'age'

ages | orderBy 數組升序

ages | orderBy: order: true 數組降序

7 控制器:

AngularJS程序被控制器?控制

var app = angular.module(“myApp”, []); 獲取應用程序

app.controller(“myCtrl”, function ($scope) {}); 控制器?設置

$scope 用來保存AngularJS Model的對象

設置值

添加變量量

添加函數

8 內置服務 :

AngularJS提供了了一些功能的封裝,但是使用方法和之前的庫不不太一樣

在AngularJS中是以一個參數的形式傳遞到控制器?中,在controller中去使?用

有關定時器?

$timeout

$timeout(function () {

console.log("haha");

}, 2000);

$interval

$interval(function () {

console.log("hehe");

}, 200);

和JS定時器?區別

返回值 id || promies

取消方式

$timeout.cancel();

$interval.cancel();

內部實現封裝了了特殊內容

$location absUrl() 獲取地址

$http 發起網絡請求,獲取數據

$http.get(“http://localhost:8888/data.json”).success(function (data) {

console.log(data);

});

9 自定義指令:

通過內置指令為應?用添加功能,并且AngularJS允許自定義指令創建指令restrict: "E",

restrict: "A"

restrict: "C"restrict: "M",replace: trueapp.directive("lidazeDirective", function () {return {restrict: ‘A’,template: "

自定義指令哦

"};});templateUrl: ‘home.html’ 設置自定義指令對應的地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、angular介紹 1、angular是Google公司提供的一套基于MVC結構的js開發工具,其核心功能就是...
    滴滴傲閱讀 547評論 0 0
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設計動態web應用的結構框架。首先,它是...
    200813閱讀 1,653評論 0 3
  • AngularJS AngularJS概述 介紹 簡稱:ng Angular是一個MVC框架 其他前端框架: Vu...
    我愛開發閱讀 2,347評論 0 8
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應用程序數據。ng-model 指令也可以:...
    壬萬er閱讀 896評論 0 2
  • 通過AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小戀閱讀 1,787評論 1 21