AngularJS

在AngularJS的世界裡，filter提供了一種格式化資料的方法，Angular也提供給我們了很多內建的過濾器，並且建立自訂過濾器也是相當的簡單在HTML的模板綁定{{}}中，我們使用 | 來調用過濾器，比如，我們想讓字串全部大寫字元顯示：{{ name | uppercase }}當然了，我們也可以在JavaScript中使用$filter服務來調用過濾器，還拿字串大寫來舉例：app.controller('DemoController', ['$scope', '$filter',

相關閱讀：AngularJS入門教程之AngularJS運算式AngularJS入門教程之AngularJS指令在前面運算式和指令的教程中瞭解到，AngularJS模型（ng-model）可以將HTML輸入欄位中的值與AngularJS建立的變數綁定。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.

熟悉HTML的朋友都知道，HTML有很多屬性。比如<a>標籤的href屬性可以來指定連結的URL地址，<input>標籤的type屬性可以用來指定input的類型。AngularJS指令就是通過擴充HTML的屬性來為 AngularJS應用增加功能。AngularJS指令用於擴充HTML。這些都是先從ng- 首碼的特殊屬性。我們將討論以下指令：常用AngularJS指令ng-app 指令初始化一個 AngularJS 應用程式。ng-init

運算式用於應用程式資料綁定到HTML。運算式都寫在雙括弧就像{{運算式}}。運算式中的行為跟ng-bind指令方式相同。 AngularJS應用運算式是純javascript運算式，並輸出它們被使用的資料在那裡。AngularJS運算式格式 : {{expression }}AngularJS運算式可以是字串、數字、運算子和變數數字運算{{1 + 5}}字串串連{{ 'abc' + 'bcd' }}變數運算 {{ firstName + " " + lastName }}， {{

推薦閱讀：詳解AngularJS

AngularJS $scope裡面的$watch(),$digest()和$apply()是AngularJS的核心函數，學習AngularJS必須理解這幾個函數。在綁定$scope中的變數到view的時候，AngularJS自動在內部建立一個"Watch"。"Watch"用於監聽AngularJS

AngularJs是一個不錯的用於開發SPA應用（單頁Web應用）的架構。單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。瀏覽器一開始會載入必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，由JavaScript來控制不同view在這個頁面上的呈現。本文源於Youtube上一個不錯的AngularJs的入門教程視頻：AngularJS Fundamentals In 60-ish

 寫在前面：由於directive部分是angularjs中的重中之重，所以會分多篇章進行講解。本章主要講解directive返回對象中比較簡單的屬性angularjs中使用.directive()來定義指令，該方法接收兩個參數：name（指令的名字）、factory_function（該函數定義指令的全部行為，返回一個對象）栗子：//index.jsangular.module('myApp',[]);myApp.directive('myDirective',function()

八種AngularJS讓人愛不釋手的功能分享給大家，供大家參考，具體內容如下第一 迭代輸出之ng-repeat標籤ng-repeat讓table ul ol等標籤和js裡的數組完美結合<ul><li ng-repeat="person in persons">{{person.name}} is {{person.age}} years old.</li></ul>你甚至可以指定輸出的順序：<li ng-repeat="person in

在AngularJS中的指令實踐指南（一）中給大家介紹了，如何隔離一個指令的scope。第二部分將承接上一篇繼續介紹。首先，我們會看到在使用隔離scope的情況下，如何從指令內部訪問到父scope的屬性。接著，我們會基於對 controller 函數和 transclusions

下面的例子只是為了簡單記錄怎麼使用angularjs來實現滾動式載入資料，具體的還是需要具體看待:Javascript部分的controllerapp.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',function ($scope, $timeout, $window) {$scope.showData = false;$scope.isLoadingPIG = false;$scope.isLoadingUJ =

引子不久前，微信推出了自己的一套UI，我看有很多開發人員將其套用在了一些前端架構中，比如react、vue。最近自己在學習Angularjs，所以，也想把這個UI整合到這個架構，這幾天試了一下，簡單的套用了一個功能，現在分享給大家，分離做的不好，請高手指點。適合讀者有一定的Angularjs基礎，並且瞭解ngRoute、ngAnimate的人群。包含檔案整合的時候，參照官方的示範頁面，自己也做了一個示範頁面，完全使用Angularjs做的，沒有引用其它架構。下面先說明一下引入的檔案。

一個對象通常有三種方式可以獲得對其依賴的控制權： 在內部建立依賴； 通過全域變數進行引用； 在需要的地方通過參數進行傳遞依賴注入是通過第三種方式實現的。比如：function SomeClass(greeter) {this.greeter = greeter;}SomeClass.prototype.greetName = function(name)

AnularJS的過濾器用來格式化需要展示給使用者的資料，有很多實用的內建過濾器，也可以自己編寫。在HTML中的模板綁定符號{{ }}內通過|符號來調用過濾器。例如，假設我們希望將字串轉換成大寫，可以對字串中的每個字元都單獨進行轉換操作，也可以使用過濾器：{{ name | uppercase }}在JavaScript代碼中可以通過$filter來調用過濾器。例如，在JavaScript代碼中使用lowercase過濾器：app.controller('DemoController', ['$

指令（Directives）是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令，但還是經常需要建立應用特定的指令。這篇教程會為你講述如何自訂指令，以及介紹如何在實際項目中使用。在這篇文章的最後（第二部分），我會指導你如何使用Angular指令來建立一個簡單的記事本應用。概述一個指令用來引入新的HTML文法。指令是DOM元素上的標記，使元素擁有特定的行為。舉例來說，靜態HTML不知道如何來建立和展現一個日期選取器控制項。讓HTML能識別這個文法，我們需要使用指

我們知道，AngularJS並沒有內建立等可用的資料建模方案。而是以相當抽象的方式，讓我們在controller中使用JSON資料作為模型。但是隨著時間的推移和項目的成長，我意識到這種建模的方式不再能滿足我們項目的需求。在這篇文章中我會介紹在我的AngularJS應用中處理資料建模的方式。為Controller定義模型讓我們從一個簡單的例子開始。我想要顯示一個書本(book)的頁面。下面是控制器(Controller)：BookControllerapp.controller('BookCont

在單頁面應用中，視圖之間的跳轉就顯尤為重要的，隨著應用越來越複雜，我們需要用一種方法來精確控制什麼時候該呈現怎樣的頁面給使用者。咱們可以通過在首頁面中引入不同的模板來支援不同頁面的切換，但是這麼做的缺點就是，越來越多的內嵌代碼導致最後難以管理。通過ng-include指令我們可以把很多的模板整合在視圖中，但是我們有更好的方法來處理這種情況，我們可以把視圖打散成layout和模板視圖，然後根據使用者訪問的特定的URL來顯示需要的視圖我們可以將這些“片段”在一個布局模板中拼接起來AngularJS通

“指令屬性”就是綁定在DOM元素上的函數，它可以調用方法、定義行為、綁定controller及$scope對象、操作DOM，等等等等。當瀏覽器啟動、開始解析HTML（像平時一樣）時，DOM元素上的指令屬性就會跟其他屬性一樣被解析。當一個Angular.js應用啟動，Angular編譯器就會遍曆DOM樹（從有ng-app指令屬性的那個DOM元素開始，如我們在本系列第一篇裡所提過的），解析HTML，尋找這些指令屬性函數。當在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，

    $scope 的使用貫穿整個 Angular App 應用,它與資料模型相關聯,同時也是運算式執行的上下文.有了 $scope 就在視圖和控制器之間建立了一個通道,基於範圍視圖在修改資料時會立刻更新 $scope,同樣的 $scope 發生改變時也會立刻重新渲染視圖.    有了 $scope 這樣一個橋樑,應用的業務代碼可以都在 controller 中,而資料都存放在controller 的 $scope

資料繫結通過把一個文本輸入框綁定到person.name屬性上，就能把我們的應用變得更有趣一點。這一步建立起了文本輸入框跟頁面的雙向繫結。在這個語境裡“雙向”意味著如果view改變了屬性值，model就會“看到”這個改變，而如果model改變了屬性值，view也同樣會“看到”這個改變。Angular.js 為你自動搭建好了這個機制。如果你好奇這具體是怎麼實現的，請看我們之後推出的一篇文章，其中深入討論了digest_loop 的運作。要建立這個綁定，我們在文本輸入框上使用ng-model