Time of Update: 2017-01-19
1.關於什麼是AngularJs以及什麼是bootstrap我就不多說了,簡單說下,AngularJs是一個比較強大前台MVC架構,bootstrap是Twitter推出的一個用於前端開發的開源工具包,可以迅速搭建web前台,可以去官網看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/)。2.github上有一個比較好的純淨AngularJs
Time of Update: 2017-01-19
對於指令,可以把它簡單的理解成在特定DOM元素上啟動並執行函數,指令可以擴充這個元素的功能。首先來看個完整的參數樣本再來詳細的介紹各個參數的作用及用法:angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or
Time of Update: 2017-01-19
一.win7環境下安裝ubuntu系統 http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 注意:在安裝的第四步選擇“安裝ubuntu系統,與win7系統共存”這一項,這樣可以免去後面的分區,安裝更方便二.安裝jdk8 http://hi.baidu.com/270460591/item/5a6a9bcf8f352e4dbdef69cd 注意:設定檔改為在~/.bashrc裡面加入e
Time of Update: 2017-01-19
在剛開始沒有給輸入框添加焦點之前,沒有任何效果。見下圖:然後點擊其中任何一個,焦點就會觸發一個動畫,動畫的結果見圖二:中間的輸入登入密碼文字,會自動添加到頂部(原諒我沒有截取到動畫過程的圖片)。我測試了一下,這樣的效果只有進階瀏覽器支援(IE只有IE10、IE11、Edge支援)。下面我來把代碼貼上來,原理很簡單,就是通過事件觸發類名的增加和刪除。具體的動畫由CSS3來實現,這也是為什麼低級瀏覽器不支援的原因。原生JS實現樣本:<!DOCTYPE html><html
Time of Update: 2017-01-19
前言AngularJS易於開發、較多的特徵及較好的效果導致了較多的應用,伴隨而來的是一些陷阱。本文列舉了AngularJS的一些共同的易於出問題的地方,下面來一起看看吧。一、MVC目錄結構AngularJS,直白地說,就是一個MVC架構。它的模型並沒有像backbone.js架構那樣定義的如此明確,但它的體繫結構卻恰如其分。當你工作於一個MVC架構時,普遍的做法是根據檔案類型對其進行歸類:templates/ _login.html _feed.htmlapp/ app.js
Time of Update: 2017-01-19
先來看看效果圖首先先來說一下指令嵌套,指令嵌套顧名思義就是兩個以上的指令嵌套在一起,比如下面這樣:<A-deirective> <B-directive></B-directive> <C-directive></C-directive></A-directive>下面這個tabs功能的指令,剛好用到了這個,可以讓代碼更加簡潔。<!DOCTYPE html><html lang="en" ng-app=
Time of Update: 2017-01-19
1、問題背景給定一個數組對象,裡面是div的id;迴圈產生div元素,並給id賦值2、實現源碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS動態產生div的ID</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
Time of Update: 2017-01-19
指令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)
Time of Update: 2017-01-19
AngularJs 的 ng-repeat 讓我們非常方便的遍曆數組產生 Dom 元素,但是使用不當也會有效能問題。下面給大家分享在項目中使用ng-repeat指令實現下拉框。1、問題背景select下拉框裡option組裝成下拉框,這裡利用ng-repeat指令來建立2、實現源碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之下拉框(方式二)&
Time of Update: 2017-01-19
ng-option指令使用很簡單,只需要綁定兩個屬性:一個是ng-model用於擷取選定的值;另一個是ng-options用於確定下拉式清單的元素數組。1、問題背景一般情況下,select下都會有option,但是AngularJS中有指令ng-options,就可以實現select下拉框2、實現源碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
Time of Update: 2017-01-19
簡介在ng的生態中scope處於一個核心的地位,ng對外宣稱的雙向繫結的底層其實就是scope實現的,本章主要對scope的watch機制、繼承性以及事件的實現作下分析。監聽1. $watch1.1 使用// $watch: function(watchExp, listener, objectEquality)var unwatch = $scope.$watch('aa', function () {}, isEqual);使用過angular的會經常這上面這樣的代碼,俗稱“手動”添加監聽,
Time of Update: 2017-01-19
在這一步中,我們會改進我們APP擷取資料的方式。請重設工作目錄:git checkout -f
Time of Update: 2017-01-19
在這一步,你會在手機詳細資料頁面讓手機圖片可以點擊。請重設工作目錄:git checkout -f step-10手機詳細資料檢視展示了一幅當前手機的大號圖片,以及幾個小一點的縮圖。如果使用者點擊縮圖就能把那張大的替換成自己那就更好了。現在我們來看看如何用AngularJS來實現它。步驟9和步驟10之間最重要的不同在下面列出。你可以在GitHub裡看到完整的差別。控制器app/js/controllers.js...function PhoneDetailCtrl($scope,
Time of Update: 2017-01-19
找不到的API?AngularJS提供了一些功能的封裝,但是當你試圖通過全域對象angular去 訪問這些功能時,卻發現與以往遇到的庫大不相同。$http比如,在jQuery中,我們知道它的API通過一個全域對象:$ 暴露出來,當你需要 進行ajax調用時,使用$.ajax()就可以了。這樣的API很符合思維的預期。AngularJS也暴露了一個全域對象:angular,也對ajax調用進行封裝提供了一個 $http對象,但是,但是,當你試圖沿用舊經驗訪問angular.$http時,發現不是
Time of Update: 2017-01-19
在這一步,你將學習如何建立一個布局模板並且通過路由功能來構建一個具有多個視圖的應用。請重設工作目錄:git checkout -f
Time of Update: 2017-01-19
一、概述 AngularJS有一經典之處就是依賴注入,對於什麼是依賴注入,熟悉spring的同學應該都非常瞭解了,但,對於前端而言,還是比較新穎的。 依賴注入,簡而言之,就是解除寫入程式碼,達到解偶的目的。 下面,我們看看AngularJS中常用的實現方式。 方法一:推斷式注入聲明,假定參數名稱就是依賴的名稱。因此,它會在內部調用函數對象的toString()方法,分析並提取出函數參數列表,然後通過$injector將這些參數注入進對象執行個體。 
Time of Update: 2017-01-19
關於最佳化ng的手段網上已經有很多了,核心都是從$$watchers這個範圍內部屬性說起的,今天我來說點別的,本質還是不變的,因為這是ng的硬傷,不過我相信只要運用合適的手法,這些問題還是可以避免的.ng簡介angularjs簡稱ng,是google出品的mvvm架構,此在提高前端項目開發效率(實踐中來看確實很能提高開發效率),以控制器,指令,服務來圍繞整個項目,內部以專屬的DI來解決三層之前的調用問題.更多的詳情資訊可以參考我之前寫的ng源碼分析.ng的硬傷說到硬傷就要先說下它的簡單的資料繫結
Time of Update: 2017-01-19
個人覺得,要很好的理解AngularJS的運行機制,才能儘可能避免掉到坑裡面去。在這篇文章中,我將根據網上的資料和自己的理解對AngularJS的在啟動後,每一步都做了些什麼,做一個比較清楚詳細的解析。 首先上一小段代碼(index.html),結合代碼我們來看看,angular一步一步都做了些什麼。<!doctype html><html ng-app> <head> <script src=
Time of Update: 2017-01-19
自訂指令中使用AngularJS擴充HTML的功能。自訂指令使用的“指令”的功能定義。自訂指令只是替換了它被啟用的元素。引導過程中AngularJS應用程式找到了匹配的元素,並做好使用自訂指令compile()方法一次活動再處理使用基於指令的範圍自訂指令link()方法的元素。 AngularJS提供支援,以下列元素的類型來建立自訂指令。Element directives - 指令遇到時啟用一個匹配的元素。Attribute - - 指令遇到時啟用一個匹配的屬性。CSS - -
Time of Update: 2017-01-19
依賴注入是一個在組件中給出的替代了硬的組件內的編碼它們的依賴關係的軟體設計模式。這減輕一個組成部分,從定位的依賴,依賴配置。這有助於使組件可重用,維護和測試。AngularJS提供了一個至高無上的依賴注入機制。它提供了一個可注入彼此依賴下列核心組件。值工廠服務提供者常值值值是簡單的JavaScript對象,它是用來將值傳遞過程中的配置相位控制器。//define a modulevar mainApp = angular.module("mainApp", []);//create a