AngularJS

AngularJS ng-class-even 指令AngularJS 執行個體為表格的偶數行設定 class="striped":<!DOCTYPE html><html><head><meta charset="utf-8"><script

AngularJS 動畫AngularJS 提供了動畫效果，可以配合 CSS 使用。AngularJS 使用動畫需要引入 angular-animate.min.js 庫。<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>還需在應用中使用模型 ngAnimate：<body

當使用AngularJs中的routes/views模式建立大型網站或者應用的時候，把所有的自訂檔案，如controllers和template等在初始化時全部載入進來，不是一個好的辦法。最好的方式是，初始化時僅僅載入所需要的檔案。這些檔案可能會依賴一個串連或者多個檔案，然而它們僅僅被特定的route所使用。當我們切換route時，未被載入的檔案將會按需載入。這不但能提高初始化頁面的速度，而且可以防止頻寬浪費。網上大部分文章都在講通過$routeProvider以及第三方服務對controlle

Angular 可使用指令無縫地增強標準表單元素的功能，我們將討論它的優點，包括： 資料繫結、建立模型屬性、驗證表單、驗證表單後反饋資訊、表單指令屬性 下面我們通過案例驗證他們的用法：一、雙向資料繫結（ng-model）和建立模型屬性<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title>

在項目中許多頁面都用到了分頁，然後每個頁面都有許多重複的分頁代碼，於是自己寫了一份簡易的分頁指令，簡化頁面的代碼，且容易維護，寫在部落格中當做備份，方便以後查閱。 以下是定義指令及其應用的步驟：1.指令定義 定義一個js檔案，page-directive.js，用來寫分頁的指令代碼，這個檔案中包含了分頁的模板，以下是js檔案中的所有代碼：'use strict';(function () { angular.module('template/pageInit/pageInit.html', []

身分識別驗證許可權的設計中比較常見的就是RBAC角色型存取控制,基本思想是，對系統操作的各種許可權不是直接授予具體的使用者，而是在使用者集合與許可權集合之間建立一個角色集合。每一種角色對應一組相應的許可權。   

看了一個關於Angularjs的視頻，視頻內容講解的是如何製作一款TODO list形式的SPA（Simple Page Application,單頁面應用)。為了增強理解，下面寫了一篇文章，用以複習鞏固。準備Angularjs下載說是下載，其實只要能在我們的頁面中引用到Angularjs即可。可以有如下方式。CDN加速使用國內的CDN加速服務也是可以的。複製代碼 代碼如下:<script

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

廢話不多說了，直接看乾貨吧。使用service來共用資料定義一個共用服務的service//家電維修共用資料的服務 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //緩衝當前需要維修的裝置名稱、數量、唯一標識 deviceRepairObj : [], //小區位置 xiquLocation:{}, //預約時間

指令（Directives）是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令，但還是經常需要建立應用特定的指令。說到AngularJS，我們首先想到的大概也就是雙向資料繫結和指令系統了，這兩者也是AngularJS中最為迷人的地方。雙向資料繫結呢，感覺沒什麼好說的，那麼今天我們就來簡單的討論下AngularJS這個架構的指令系統，本人也是初學，查閱了一些資料，要是有一些說的不好的地方，萬望指出。指令作為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

AngularJS的filter，中文名“過濾器”是用來過濾變數的值，或者格式化輸出，得到自己所期望的結果或格式的東東。AngularJS中有一個filterFilter函數用來對集合過濾，非常方便。原始碼大致如下：function filterFilter(){return function(aray, expression comparator){if(!isArray(array)) return array;var comparatorType = typeof(comparator),

所謂的消極式載入通常是：直到使用者互動時才載入。如何?消極式載入呢？需要搞清楚三個方面：1、html元素的哪個屬性需要消極式載入？2、需要對資料來源的哪個欄位進行消極式載入？3、通過什麼事件來觸發消極式載入？自訂的Directive的頁面表現大致是這樣：<ul><li ng-repeat="cust in customers"delay-bind="{{::cust.street}}"attribute="title"trigger="mouseenter"><a

angularjs作為一個全ajax的架構，對於請求，如果頁面上不做任何操作的話，在結果煩回來之前，頁面是沒有任何響應的，不像普通的HTTP請求，會有進度條之類。什麼是攔截器？$httpProvider 中有一個 interceptors 數組，而所謂攔截器只是一個簡單的註冊到了該數組中的常規服務工廠。下面的例子告訴你怎麼建立一個攔截器:<!-- lang: js -->module.factory('myInterceptor', ['$log', function($log) {

在ng-repeat中使用ng-model時會有許多問題，有的人碰到無法擷取繫結資料內容，有的人遇到改動繫結資料內容時所有迴圈產生的內容一起改變。上面的問題我在開發時也遇到過，但是解決後我卻怎麼也還原不了那種情況了，只能先簡單介紹一下無法擷取的情景該如何解決。例如：html：<body><div ng-controller="selectController"> <div ng-repeat="pop in citylist"> <select

接上一次，這次主要介紹表格分頁功能，由於項目需要這個案例是關於前端分頁的方式，現在很少會這麼用了，但如有需要可以參考其中的思路html：1.通過UL來展示頁標，其中每個頁標的li是通過非同步載入從擷取到不同的表格式資料來動態產生的。 <div class="pagination"> <ul style="float:right"> <li id="previous"><a href="">上一頁</a></

在AngularJS中提及雙向資料繫結，大家肯定會想到ng-model指令。一、ng-modelng-model指令用來將input、select、textarea或自訂表格單控制項同包含它們的範圍中的屬性進行綁定。它將當前範圍中運算運算式的值同給定的元素進行綁定。如果屬性不存在，它會隱式建立並將其添加到當前範圍中。 始終用ng-model來綁定scope上一個資料模型內的屬性，而不是scope上的屬性，這可以避免在範圍或後代範圍中發生屬性覆蓋！<input type="text" ng-

對於指令，可以把它簡單的理解成在特定DOM元素上啟動並執行函數，指令可以擴充這個元素的功能。首先來看個完整的參數樣本再來詳細的介紹各個參數的作用及用法：angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or