AngularJS

    這個簡單的架構最後只剩下了js的控制部分了，angular架構有自己的邏輯部分，有自己的controller和service層，由於我們可能要用到angular的一些內建的resource和cookie，所以我們需要再加入angular的一些lib：    --------------index.html------------------<script src="lib/angular/angular-strap.js"

1.用AngularJs app種子初步搭載好架構之後就需要我們手動往裡面填充一些東西了，首先開啟我們的app檔案夾下面的index.html,加入一些我們需要用的js和css（當然是bootstrap的），代碼如下：<script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></script>

1.關於什麼是AngularJs以及什麼是bootstrap我就不多說了，簡單說下，AngularJs是一個比較強大前台MVC架構，bootstrap是Twitter推出的一個用於前端開發的開源工具包，可以迅速搭建web前台，可以去官網看看（AngularJs：http://angularjs.org/ ，bootstrap：http://twitter.github.io/bootstrap/）。2.github上有一個比較好的純淨AngularJs

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

在剛開始沒有給輸入框添加焦點之前，沒有任何效果。見下圖：然後點擊其中任何一個，焦點就會觸發一個動畫，動畫的結果見圖二：中間的輸入登入密碼文字，會自動添加到頂部（原諒我沒有截取到動畫過程的圖片）。我測試了一下，這樣的效果只有進階瀏覽器支援（IE只有IE10、IE11、Edge支援）。下面我來把代碼貼上來，原理很簡單，就是通過事件觸發類名的增加和刪除。具體的動畫由CSS3來實現，這也是為什麼低級瀏覽器不支援的原因。原生JS實現樣本：<!DOCTYPE html><html

前言AngularJS易於開發、較多的特徵及較好的效果導致了較多的應用，伴隨而來的是一些陷阱。本文列舉了AngularJS的一些共同的易於出問題的地方，下面來一起看看吧。一、MVC目錄結構AngularJS，直白地說，就是一個MVC架構。它的模型並沒有像backbone.js架構那樣定義的如此明確，但它的體繫結構卻恰如其分。當你工作於一個MVC架構時，普遍的做法是根據檔案類型對其進行歸類：templates/ _login.html _feed.htmlapp/ app.js

先來看看效果圖首先先來說一下指令嵌套，指令嵌套顧名思義就是兩個以上的指令嵌套在一起，比如下面這樣：<A-deirective> <B-directive></B-directive> <C-directive></C-directive></A-directive>下面這個tabs功能的指令，剛好用到了這個，可以讓代碼更加簡潔。<!DOCTYPE html><html lang="en" ng-app=

指令directive('bsPopup', function ($parse) {return {require: 'ngModel',restrict: 'A',link: function (scope, elem, attrs, ctrl) {scope.$watch(function () {return $parse(ctrl.$modelValue)(scope);}, function (newValue) {if (newValue ==0)

AngularJs 的 ng-repeat 讓我們非常方便的遍曆數組產生 Dom 元素，但是使用不當也會有效能問題。下面給大家分享在項目中使用ng-repeat指令實現下拉框。1、問題背景select下拉框裡option組裝成下拉框，這裡利用ng-repeat指令來建立2、實現源碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之下拉框（方式二）&

一、什麼是Scope？　　scope（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope）是一個指嚮應用model的object。它也是expression（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）的執行內容。scope被放置於一個類似應用的DOM結構的階層中。scope可以監測（watch,$watch）expression和傳播事件。二、s

Internet Explorer Compatibility一、總括　　這文章描述Internet Explorer（IE）處理自訂HTML 屬性、標籤的特性（可以理解為“特別糟糕的性質”）。如果我們打算讓應用相容IE8以及以下的版本，那麼可以繼續往下看。二、Short Version（簡述）　　為了讓我們的angular應用在IE上工作，請確保：　　1.

ng-option指令使用很簡單，只需要綁定兩個屬性：一個是ng-model用於擷取選定的值；另一個是ng-options用於確定下拉式清單的元素數組。1、問題背景一般情況下，select下都會有option，但是AngularJS中有指令ng-options，就可以實現select下拉框2、實現源碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

簡介在ng的生態中scope處於一個核心的地位，ng對外宣稱的雙向繫結的底層其實就是scope實現的，本章主要對scope的watch機制、繼承性以及事件的實現作下分析。監聽1. $watch1.1 使用// $watch: function(watchExp, listener, objectEquality)var unwatch = $scope.$watch('aa', function () {}, isEqual);使用過angular的會經常這上面這樣的代碼，俗稱“手動”添加監聽，

在這一步中，我們會改進我們APP擷取資料的方式。請重設工作目錄：git checkout -f

在這一步，你會在手機詳細資料頁面讓手機圖片可以點擊。請重設工作目錄：git checkout -f step-10手機詳細資料檢視展示了一幅當前手機的大號圖片，以及幾個小一點的縮圖。如果使用者點擊縮圖就能把那張大的替換成自己那就更好了。現在我們來看看如何用AngularJS來實現它。步驟9和步驟10之間最重要的不同在下面列出。你可以在GitHub裡看到完整的差別。控制器app/js/controllers.js...function PhoneDetailCtrl($scope,

在這一步你將學習到如何建立自己的顯示過濾器。請重設工作目錄：git checkout -f

一、概述 AngularJS有一經典之處就是依賴注入，對於什麼是依賴注入，熟悉spring的同學應該都非常瞭解了，但，對於前端而言，還是比較新穎的。 依賴注入，簡而言之，就是解除寫入程式碼，達到解偶的目的。 下面，我們看看AngularJS中常用的實現方式。 方法一：推斷式注入聲明，假定參數名稱就是依賴的名稱。因此，它會在內部調用函數對象的toString()方法，分析並提取出函數參數列表，然後通過$injector將這些參數注入進對象執行個體。 

在這一步你會增加一個讓使用者控制手機列表顯示順序的特性。動態排序可以這樣實現，添加一個新的模型屬性，把它和迭代器整合起來，然後讓資料繫結完成剩下的事情。請重設工作目錄：git checkout -f step-4你應該發現除了搜尋方塊之外，你的應用多了一個下來菜單，它可以允許控制電話排列的順序。步驟3和步驟4之間最重要的不同在下面列出。你可以在GitHub裡看到完整的差別。模板app/index.htmlSearch: <input ng-model="query">Sort by:

關於最佳化ng的手段網上已經有很多了,核心都是從$$watchers這個範圍內部屬性說起的,今天我來說點別的,本質還是不變的,因為這是ng的硬傷,不過我相信只要運用合適的手法,這些問題還是可以避免的.ng簡介angularjs簡稱ng,是google出品的mvvm架構,此在提高前端項目開發效率(實踐中來看確實很能提高開發效率),以控制器,指令,服務來圍繞整個項目,內部以專屬的DI來解決三層之前的調用問題.更多的詳情資訊可以參考我之前寫的ng源碼分析.ng的硬傷說到硬傷就要先說下它的簡單的資料繫結