Time of Update: 2017-01-19
Angular 可使用指令無縫地增強標準表單元素的功能,我們將討論它的優點,包括: 資料繫結、建立模型屬性、驗證表單、驗證表單後反饋資訊、表單指令屬性 下面我們通過案例驗證他們的用法:一、雙向資料繫結(ng-model)和建立模型屬性<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title>
Time of Update: 2017-01-19
接著第一篇《》AngularJS內建服務$location及其功能詳解》,進行學習Section 2:實現分頁顯示效果那麼再隱藏一下,通過location的setter方法設定當前的url資訊。在這裡為了能夠讓示範看到更好的效果,在這個比較完整的執行個體中,我引入了angularJS的多路由技術、嵌套的控制器之間傳遞資料、scope的繼承、 http通訊、內連結傳遞變數等。首先建立一個首頁模板<!DOCTYPE html><html
Time of Update: 2017-01-19
最近一同事在學習AngularJS,在路由與模板的學習過程中遇到了一些問題,於是今天給她寫了個例子,順便分享出來給那些正在學習AngularJS的小夥伴們。話說這AngularJs
Time of Update: 2017-01-19
常用的表單驗證指令1. 必填項驗證某個表單輸入是否已填寫,只要在輸入欄位元素上添加HTML5標記required即可:複製代碼 代碼如下:<input type="text" required /> 2. 最小長度驗證表單輸入的文本長度是否大於某個最小值,在輸入欄位上使用指令ng-minleng= "{number}":複製代碼 代碼如下:<input type="text" ng-minlength="5" /> 3.
Time of Update: 2017-01-19
學習使用angular中,ui-route是其中的一個痛點,簡單使用沒什麼問題,但涉及到多級嵌套,就感覺有茫然,查了很多資料,踩過很多坑,到目前為止也不能說對ui-route有全面瞭解;這裡只是把填補的幾個坑記錄一下備忘:1.abstract的使用:$stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({
Time of Update: 2017-01-19
身分識別驗證許可權的設計中比較常見的就是RBAC角色型存取控制,基本思想是,對系統操作的各種許可權不是直接授予具體的使用者,而是在使用者集合與許可權集合之間建立一個角色集合。每一種角色對應一組相應的許可權。
Time of Update: 2017-01-19
看了一個關於Angularjs的視頻,視頻內容講解的是如何製作一款TODO list形式的SPA(Simple Page Application,單頁面應用)。為了增強理解,下面寫了一篇文章,用以複習鞏固。準備Angularjs下載說是下載,其實只要能在我們的頁面中引用到Angularjs即可。可以有如下方式。CDN加速使用國內的CDN加速服務也是可以的。複製代碼 代碼如下:<script
Time of Update: 2017-01-19
在我們平常的開發中,有時候會需要擷取一下check框選中的值,以及check框選中行的所有資訊。這個時候有一個小技巧那就是我們可以把要擷取的資訊全部放到check框的值裡面,這樣我們可以擷取check框選中值的時候也就相當於擷取了當前行的資訊。複製代碼 代碼如下:<td><input class="states" type="checkbox" name="orders" value="{{e.merchantId}},{{e.orderCode}},{
Time of Update: 2017-01-19
AngularJS裡控制器繼承,常用的就是範圍嵌套範圍。預設情況下,當前範圍中無法找到某個屬性時,就會在父級範圍中進行尋找,若找不到直至尋找到$rootScope。但有些情況下,rootScope下就是我們的controller,不可能將大量的公用屬性方法寫到rootScope裡去。比如說有多個類似的頁面,都有麵包屑,搜尋欄,工具列,表格等元素,麵包屑表格這種元素考慮做成directive,那麼必然會有許多類似的配置需要從controller傳到組件裡去,也會產生很多工具類方法用於處理資料等,這
Time of Update: 2017-01-19
一、引言 本文將介紹如何把AngularJs應用到實際項目中。本篇文章將使用AngularJS來打造一個簡易的許可權管理系統。下面不多說,直接進入主題。二、整體架構設計介紹 首先看下整個項目的架構設計圖: 從上圖可以看出整個項目的一個整體結構,接下來,我來詳細介紹了項目的整體架構: 採用Asp.net Web API來實現REST 服務。這樣的實現方式,已達到後端服務的公用、分別部署和更好地擴充。Web層依賴應用服務介面,並且使用Castle
Time of Update: 2017-01-19
廢話不多說了,直接看乾貨吧。使用service來共用資料定義一個共用服務的service//家電維修共用資料的服務 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //緩衝當前需要維修的裝置名稱、數量、唯一標識 deviceRepairObj : [], //小區位置 xiquLocation:{}, //預約時間
Time of Update: 2017-01-19
迴圈輸出資料行表很多項目在web服務端做,前端做好模版後後端寫jsp代碼,雙方需要緊密合作,分清責任。有些項目由後端提供restful方法,前端用ajax調用自己迴圈,這種一般是大把的jquery拼字串,太不直觀,有人搞出了js模板,也沒好到哪裡去。用AngularJS就爽多了,文法和JSP類似:<!doctype html><html ng-app><head> <meta charset="utf-8">
Time of Update: 2017-01-19
表單是最常用的一種組建。在Angular.js中,其實並沒有單獨的為表單添加多少特殊功能。但是,利用Angular.js架構本身的特點,可以更友好的呈現表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現的。1.根據輸入欄位資料即時更新輸出資料下面代嗎實現了一個簡易的計算表單,它能將使用者輸入的資料進行處理,並且即時顯示在表單輸出域中:<div ng-app="" ng-init="quantity=1;price=5"> 數量: <input
Time of Update: 2017-01-19
指令(Directives)是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令,但還是經常需要建立應用特定的指令。這篇教程會為你講述如何自訂指令,以及介紹如何在實際項目中使用。在這篇文章的最後(第二部分),我會指導你如何使用Angular指令來建立一個簡單的記事本應用。概述一個指令用來引入新的HTML文法。指令是DOM元素上的標記,使元素擁有特定的行為。舉例來說,靜態HTML不知道如何來建立和展現一個日期選取器控制項。讓HTML能識別這個文法,我們需要使用指
Time of Update: 2017-01-19
指令(Directives)是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令,但還是經常需要建立應用特定的指令。說到AngularJS,我們首先想到的大概也就是雙向資料繫結和指令系統了,這兩者也是AngularJS中最為迷人的地方。雙向資料繫結呢,感覺沒什麼好說的,那麼今天我們就來簡單的討論下AngularJS這個架構的指令系統,本人也是初學,查閱了一些資料,要是有一些說的不好的地方,萬望指出。指令作為AngularJS中最為重要的部分,所以這個架構本身也
Time of Update: 2017-01-19
Filter作用就是接收一個輸入,通過某個規則進行處理,然後給使用者返回處理後的結果。Filter可以用在模板、控制器、或者服務,同時也會很容易自訂一個Filter過濾器。在模板中使用FilterFilter可以用於在視圖模板中使用一下文法運算式:{{ expression | filter }}例如:格式{{ 12 | currency
Time of Update: 2017-01-19
angular-material 是 AngularJS 的一個子項目,用來提供實現了 Material Design 風格的組件。Material 提供了大量的android 風格的UI組件,使用 angularjs + Material 可以很容易開發出風格接近原生 Android 5.x 的web介面。但在實際使用的過程中並不總是能滿足我們的需求。開發一個組件就成了我們必須學習的內容。下面是一個組件的實現://前面省略若干代碼
Time of Update: 2017-01-19
我們知道在應用的頁面或者組件需要載入資料時,瀏覽器和angular渲染頁面都需要消耗一定的時間。這裡的間隔可能很小,甚至讓人感覺不到區別;但也可能很長,這樣會導致讓我們的使用者看到了沒有被渲染過的頁面。這種情況被叫做Flash Of Unrendered Content (FOUC)(K)?and is always
Time of Update: 2017-01-19
隨著你的單頁應用擴大,其下載時間也越來越長。這對提高使用者體驗不會有好處(提示:但使用者體驗正是我們開發單頁應用的原因)。更多的代碼意味著更大的檔案,直到代碼壓縮已經不能滿足你的需求,你唯一能為你的使用者做的就是不要再讓他一次性下載整個應用。這時,消極式載入就派上用場了。不同於一次性下載所有檔案,而是讓使用者只下載他現在需要的檔案。所以。如何讓你的應用程式實現消極式載入?它基本上是分成兩件事情。把你的模組拆分成小塊,並實施一些機制,允許按需載入這些塊。聽起來似乎有很多工作量,不是嗎?如果你使用
Time of Update: 2017-01-19
AngularJS 簡介AngularJS 是一個 JavaScript 架構。它可通過 <script> 標籤添加到 HTML 頁面。AngularJS 通過 指令 擴充了 HTML,且通過 運算式 綁定資料到 HTML。什麼是 AngularJS?AngularJS 使得開發現代的單一頁面應用程式(SPAs:Single Page Applications)變得更加容易。AngularJS 把應用程式資料綁定到 HTML 元素。AngularJS 可以複製和重複 HTML 元素。