【1.5.8版本和1.6.2版本的區別】
1、$http
1.5.8之前 $http都是用success/error接收數據 1.6.2是通過then和catch控制成功和失敗函數,并且返回值之前是直接拿到，1.6.2返回時一個新的對象，要通過params.data才能獲取

創新互聯堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、網站建設、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的右江網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

2、路由
href錨點由 #/index --> #!/index 多了一個!號，如果不想在每一個標簽href都寫!，要通過$locationProvider配置hashPrefix（\'\'）前綴為空

3、跨域
要設置白名單，提前把你想要的跨域的域名填寫到指定位置,設置白名單后就不需要callback參數的設置
eg:
白名單操作
app.config(\'$sceDelegateProvider\',[\'$sceDelegateProvider\', function(){

$sceDelegateProvider.resourceUrlWhiteList([\'self\', \'http://localhost/api/**\']);

}])

【AngulaarJS】(ng)
1、4個特性：MVC 模塊化 自動化雙向數據綁定 指令系統

2、所有需要ng管理的代碼（容器）必須被包裹在一個ng-app指令的元素（Angular應用程序管理的邊界）中，對包裹在內的ng指令進行分析和操作 ng-xxx屬性稱之為指令(directive)

3、模塊化編程基本思想步驟（這里的步驟指的是單向綁定，即模型數據展示給視圖）

(1)創建一個模塊 var app = angular.module("模塊名稱","該模塊依賴的其他模塊名稱（沒有依賴就寫"[]"）");
(2)把模塊名稱賦值給ng-app（劃分的邊界）
(3)通過該模塊創建出一個控制器(controller) app.controller("DemoController(控制器名稱)",function($scope 該參數寫死){$scope.user = {} ...})這里的$scope就是數據庫，可以把里面的數據、行為暴露給視圖
(4)把該控制器賦值給邊界標簽的 ng-controller

4、angular.module注意細節

**傳入一個參數是獲取模塊（前提有這個模塊）傳入兩個參數是創建模塊，如果沒有這個模塊而且也沒有填寫第二個參數"[]"那么就會報錯

【MVC】
1、只是一種應用程序的開發思想，不是設計模式

Model: 處理數據和業務邏輯
View: 以友好的方式向用戶展示數據
控制器(Controller): 組織調度相應的處理模型（注:一個模型內可以有多個控制器，控制器之間不能嵌套）

【內置指令(指令系統)】
（基本）
1、ng-app 指定應用根元素,至少有一個(邊界)
2、ng-controller 指定控制器
3、ng-model 視圖層綁定數據給模型層（雙向綁定的基礎）
4、ng-init 初始化數據（當數據層沒有數據傳過來，默認用初始化數據值 eg: ng-init="name=\'zs\'"）;
5、ng-bind 綁定模型層的數據，這樣避免在內容中 "{{}}" 這樣格式先在頁面出現一次，缺點：每次只能綁定一個數據 用法: ng-bind="name"
6、ng-bind-template 綁定模型層多個數據 用法 ng-bind-template="{{name}} {{age}}"

（常用）
7、ng-switch 處理類似tab欄的例子，接收數據屬性，常與ng-switch-when使用,后者是指定屬性值
8、ng-src 增強圖片路徑，不會出現裂圖情況，因為ng-不是html原本屬性
9、ng-href 增強地址
10、ng-class 控制類名(用法 ng-class="{類名: ture/false}")
11、ng-include 引入模板（在一個網站中引入多個html文件拼接在一個網站上，ng-include="\'index.html\'" （注意里面要加上單引號）必須要在服務器上才可以正常引入）
12、ng-disabled 表單禁用
13、ng-readonly 表單只讀
14、ng-checked 單/復選框表單選中
15、ng-selected 下拉框表單選中
16、ng-click="click($event)" 這里的$event是ng提供的類似于鼠標事件中的e，傳遞參數

【ng-repeat的補充】
1、正常情況數組或者對象可以通過 no-repeat="key in property" 或者 no-repeat="(index, val) in property"在元素上進行迭代

但是遇到數組有重復的名字的時候，如[\'a\',\'b\',\'c\',\'a\']; 控制臺就會出現重復元素的報錯信息，解決辦法no-repeat="key in property track by $index", track by是讓數組都有一個不重復的值進行標記，后面跟隨的$index只要是數組元素不重復的信息即可，如id，下標等標識

2、ES5新增的屬性str.startsWith/endWith】
可以通過這樣的寫法得出元素開頭的字符

eg: ng-repeat="name in arr track by $index" ng-class="{red: name.startsWith="a"}"; 這樣就實現全部a開頭的綁定red類名，可以實現查找字符查找數組內容

【ng-model的補充】
1、ng-model只能給表單元素(select)進行雙向綁定，當給select標簽通過ng-model綁定屬性，那么select中的option中的value值會同步到ng-model綁定的屬性上,這樣就可通過同步的值去控制一些想要的效果

eg:

<select name="" id="" ng-model="style"> <option value="red">紅色</option> <option value="green">綠色</option> </select> <div ng-class="style"></div> //當選擇紅色時，style的值就會等于red，那么ng-class的值也會變為red

【自定義指令】
1、通過模塊對象的directive方法自定義指令

app.directive("temp", function(){
/*返回一個對象,這個對象就是自定義指定的相關內容*/
return {
restrict: "ECMA", //E: element元素 A: attribute屬性 C:class類 M: mark replace必須為true
templateUrl: "./head.html", //template:’<ul><li>列表</li></ul>’ 或者 templateUrl: ‘./head.html’
replace: true //是否替換原有標簽（指的是html標簽）
}
})

注: 這里的E 指的是 <temp></temp>這樣指定
A 指的是 <div temp></div>

【作用域】
1、angularJS作用域是通過html標簽屬性中的控制器進行嵌套，訪問方式類似函數作用域訪問方式

【管道符"|"】
1、在過濾器和正則表達式中都大量用到管道符概念，其作用是把管道符前面的結果，用后面的方式輸出（及前方的輸出結果為后者的輸入）

【過濾器】（就是一個方法）
1作用：就是接收一個輸入,通過某個規則進行處理.然后返回處理結果

2、eg:
<p>{{price|currency:\'￥\'}}</p> //默認 $20.00格式 冒號后面為參數，改變單位

<p>{{date |date:\'yyyy-MM-dd hh:mm:ss\'}}</p> //默認直接返回系統時間 冒號后面改變格式

<p>{{course|filter:\'s\'}}</p> //filter子串匹配 必須跟上參數去匹配數組中對應的字符是否有相應的參數字符

<p>{{student2|filter:{age:80}|json}}</p> //json轉換json格式

<p>{{student2|limitTo:-1}}</p> //limitTo限制個數，后面必須跟參數，可以接受負值由后往前找

<p>{{str|uppercase}}</p> //全變大寫

<p>{{str2|lowercase}}</p> //全變小寫

<p>{{num|number}}</p> //字符數字轉變成num，不接收有非數字情況 parseInt 遇到字符就終止轉換后續

<p>{{student|orderBy:\'age\':false}}</p> //orderBy排序 true 降序 false 生序

【自定義過濾器】
1、由于過濾器是一個方法，所以需要返回一個方法，并且傳入一個參數（管道符前面的屬性）

app.filter("firstUppcase", function(){ return function(input){ return input[0].toUpperCase() + input.slice(1); } })

【依賴注入】
1、是不是留意過angular.module("app", []) 或者自定義控制器時也有這樣寫法，這里的"[]"就是指該模塊或者控制器需要依賴的服務是什么

2、依賴注入分為
行內注入（開發推薦使用）: app.controller("Controller2", ["$scope", "$http", function($scope, $http){...}])

推斷注入（不推薦）: app.controller("Controller2", function($scope, $http){...})

這里的參數是ng提供的通過自身尋找ng是否存在這種服務的一種方法

缺點:在代碼進行壓縮的時候，函數的參數可能會被壓縮成a,b，但用行內注入，后面跟上是一個數組，代碼壓縮過程不會把數組內容進行壓縮

【服務】
1、常見內置服務

$location 地址欄
$timeout $interval 定時器服務
$filter 過濾器服務（不要在視圖直接用過濾器處理數據）--> $filter(\'uppercase\')
$log 控制臺服務
$http 網絡服務

【$location服務】
1、就是對window.location里面的方法進行封裝

$localtion.ablUrl() 獲取絕對路徑
$localtion.url() 獲取錨點后面的url
$localtion.protocol() 獲取協議
$localtion.port() 端口
$localtion.path() 當前路徑
$localtion.hash 獲取hash值（就是錨點后面的錨點）
$localtion.search 查詢字符串（就是？后面的參數）轉換成對象

【定時器服務】($timeout,$interval)
1、寫法
$timeout(function(){},time) $interval同理

2、內置方法
$timeout.cancel(timer) 清除定時器 timer指要清除的定時器

【$http服務】（仿ajax和跨域）
1、格式(success/error位置與ajax不一樣)2、AJAX格式

$http({ url:"./mphp.php", //請求地址 method:"get/post", params/data:{name:"xmg", age:"10"}, //當請求方式為post，請求頭格式改用form提交，參數提交方式 data:"name=xmg&&age=10",原因是ng默認沒有把 //form格式（SOAP對象形式傳遞）轉換成標準json數據傳遞（RESTFUL(json串格式)） header:{‘Content-Type’: ‘application/x-www-form-urlencoded’ }, //使用post傳遞數據要設置請求頭 }).success(function(){ }).error(function(){})

3、jsonp格式

$http({ url:url, method:"jsonp", params:{ callBack:\'JSON_CALLBACK\' } }).success(function (res) { alert(res); }).error(function(res){ console.log(res); });

注意事項:
a、當使用jsonp 并傳入參數時。內部會幫你做一些處理
b、幫你自動創建一個function 名稱是ng它自動幫你取的一個名稱。angular_callback_.0
c、會幫你創建一個script標簽 src="http://localhost/day5/jsonp.php?callBack=angular_callback_.0"
d、請示完畢時，執行完畢時，會把結果。給success之后，自動刪除創建的標簽跟函數

【當訪問的地址沒有處理跨域問題】
1.思路
$http->url沒有幫處理跨域。
$http->php->url
php->$http

解釋:
通過訪問本地的PHP文件再去訪問外域地址，因為解決跨域必須要通過后臺服務器處理，所以要借助本地的PHP去處理跨域問題
a、創建本地PHP文件，通過file_get_contents("外域地址");訪問，（原因后臺沒有跨域問題）
b、PHP文件返回訪問回來的數據給前臺
c、前臺通過ajax請求訪問本地的PHP文件回來的數據

【$watch】（三個參數,第三個參數是true/false，當第一個參數是監聽對象發生作用）
0、當第一個參數是監聽對象，那么監聽的一直是一個地址，無論值是否改變，都不會更新新值舊值，如果想監聽對象中值得變化，就要在第三個值填true

1、$watch是一個scope的函數，用于監聽模型(ng-model)變化，當你的模型部分發生變化時它會通知你

function的參數now和old是改變后的值和改變前的值，通過監聽這兩個值得變化可以很好的做一些時刻改變的頁面

2、用法: $scope.$watch("username", function(now, old){...}); 這里的username就是ng-model監聽的值

3、性能問題
太多的$watch將會導致性能問題，$watch如果不再使用，我們最好將其釋放掉。

$watch函數返回一個注銷監聽的函數，如果我們想監控一個屬性，然后在稍后注銷它，可以使用下面的方式：

var watch = $scope.$watch(\'someModel.someProperty\', callback); watch(); //執行返回的函數取消監視

【自定義服務】（一般用第二種方式service）
1、factory

app.factory(\'formatePar\',[\'\',function(){return}]);

2、service

app.service(\'formatePar\',[\'\',function(){this.fun = ...}]);

3、value（相當于全局定義常量）

app.value(\'version\',\'1.0\');

【配置塊】
1、在每一個服務當中都會有一個provider來對指定的功能進行配置,改變一些系統的默認行為。

2、用法config() --> 直接在對應服務后面加Provider eg: $filterProvider

app.config([\'$logProvider\',function ($logProvider) { $logProvider.debugEnabled(false); }]);

【運行塊】
1、一進入ng解析階段，程序一進來就會執行

2、用法run() ($rootScope為跟作用域，類似在view層的ng-init)

app.run([\'$http\',\'$rootScope\',function ($http,$rootScope){...})

【hashchange】
1、window自帶監測地址欄錨點的變化情況

【錨點后面地址更新不刷新原理】

http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third

1、當我們點擊以上的任意一個鏈接時，向服務端請的地址都是一樣的 (http://runoob.com/)。 因為 # 號之后的內容在向服務端請求時會被瀏覽器忽略掉。所以我們就需要在客戶端實現 # 號后面內容的功能實現。

【路由】(在1.2版本之后很多功能獨立出來包括路由)
0、API：$routeProvider.when(\'/index/:id\') (控制錨點參數更換模板，冒號后面為參數固定格式)
$routeParams （獲取錨點后面的參數，要通過注入控制器）

1、在angular當中路由就是錨點用來做單頁面應用程序的切換。錨點的變化，我們又稱為路由的變化。

2、用路由做單頁面的基本操作

a、在創建模塊時，注入路由模塊
var app = angular.module(\'app\',[\'ngRoute\']);

b、配置路由

app.config([\'$routeProvider\',function ($routeProvider) { /*當錨點為指定值時， 幫你處理相應的邏輯 * 路由規定，在路徑之前， 加上一個"/" * */ $routeProvider.when(\'/index\',{ template:"<h1>首頁</h1>" }) .when(\'/music\',{ template:"<h1>音樂</h1>" }) .when(\'/singer\',{ template:"<h1>首頁</h1>" }).otherwise({ redirectTo:\'/index\' }) }]);

c、在view層通過ng-view設置占位符：把模板放到哪個位置

<div class="content" ng-view></div>

【SPA和tab欄的區別】
0、盡管都是無刷新更新頁面，但運行機理不同

1、tab欄是把所有的內容固定在dom樹上（同步冗余）

SPA是通過異步獲取數據添加到對應的節點上

【修飾符\'@\'和修飾符\'=\'】
1、在自定義指令當中，通過scope屬性中的對象暴露出一個接口讓外界的父級控制器可以傳入一個常量或者變量進行控制子級的變量
用法:
scope:{
子級的變量名: "@暴露給外界的名字"
}

在

<body ng-app="app" ng-controller="xmgController"> <input type="text" ng-model="name"> <div tag msg="{{name}}"></div> //這里的tag就是子級控制器控制范圍,msg就是暴露出來的接口 </body>

2、為什么要暴露接口？
答:其實不暴露接口子級可以控制父級，父級也可以控制子級的變量，但是這樣只能通過父子級相同屬性名才可以控制，而通過修飾符的方法暴露一個接口，就可以靈活的讓不同父級控制器去控制子級的屬性，而不必要全部相同的屬性名（父級只要通過接口傳遞即可），做法更靈活

3、\'@\'、\'=\'的區別？
答:\'@\'只能通過父級傳遞數據給子級呈現，屬于單向傳遞， 而\'=\'屬于雙向傳遞，誰修改屬性都會互相影響

【廣播】（查NG參考手冊）
1、通過指令父級呼喚子級干事，或者子級呼喚父級干事

2、發送廣播時，一定要等指令加載完畢之后，才去發送廣播

【$q服務】（有類似回調，查NG參考手冊）
1、用于創建延時任務

【PhpStrome】
1、類似WebStrome，但內置php服務器，可以直接打開Php文件進行訪問，前提要配置php服務

【PHP基本寫法】

$_GET[\'name\']; //接收get請求過來的name
$_POST[\'name\']; //接收post請求過來的name
echo //輸出

$array = [\'name\'=>\'xmg\',\'age\'=>10]; //PHP寫json寫法
json_encode($array); //轉成標準json格式
file_get_contents("file.json") //PHP接收json文件（拿外域地址數據）

echo $fn."()"; //$fn為前端傳過來的函數體,通過PHP語法.拼接括號才能進行調用

【用ng配合gulp完成的項目webApp注意點】(模塊化開發體驗)

零、移動端刷新】
1、ctrl+r 強刷新

一、rem操作】
0、添加<meta name="viewport" content="width=device-width maximum-scale=1.0 minimum-scale=1.0 user-scalable=no">

1、修改視口比例需要在js代碼中添加

var font = window.screen.width / 20 + "px"; //獲取不同窗口的寬度，取20的比例
document.getElementsByTagName("html")[0].style.fontSize = font; //把比例賦值給html根標簽

二、像素轉為rem格式】
0、一般引入一個把所用到rem的地方都定義的類，在index.less中通過 @import \'url.less\'引入

1、unit指把數值以什么單位輸出，用法unit(5,rem) --> 5rem

/*把像素轉成rem*/
.fs(@px){
font-size: unit(@px/37.5,rem);
}

三、src的js文件夾】
1、一般定義config、controller、directive、service四個文件夾去存放對應的函數,在問最外層創建app.js定義模塊

四、src中的view文件夾】
1、把每一個整體的頁面分拆成一個個小的零件，如頭部有專門的只負責傳文字數據，有專門的模板去展示

五、自定義指令注意事項】
1、app.directive(\'listView\', function(){...})

--> 在html定義的屬性或者標簽名字為list-view才生效

六、應用程序可擴展性】(應用場景$http)（httpTool.js）
1、原因:自己的項目不能由第三方插件牽著走，當第三方插件有一些關鍵地方有作更新的時候，我們自己的項目很多地方就會要重新修改，如1.5.2版本的$http，success/error改為then/catch,當你的項目有100個地方用到網絡請求的時候你就要改100個地方，程序可擴展性低

2、做法:利用angular提供給我們的自定義服務，自定義一個自己的網絡請求服務，盡管第三方插件改動了一些關鍵地方，你只要修改你自定義服務里面的一個地方即可對整個項目進行修改

七、ui.router注意地方】
1、在模板位置添加ui-sref指定路由名稱相當于定義錨點

2、當要改變選中路由的樣式用ui-sref-active="類名";這個屬性去控制

八、獲取頭部信息用參數$attr.nav】
1、在html nav="內容"設置標簽和內容,在自定義指令通過link: function($scope,$jqLite,$attrs){console.log($attr.nav)} //獲取內容,達到解耦合操作

九、子頁面返回主頁面再次請求數據問題】（不能返回就重復請求相同數據）
1、解決辦法: ui.router的子路由方法，

a、在主頁面顯示主路由通過<div ui-view></div>接收4個頁面模板

b、4個頁面模板中接收內容數據的地方在設置一個<div ui-view></div>去接收list-view模板還是detail模板

b處這樣做的原因：正常思路設置這樣一個路由會導致主頁面<div ui-view></div>對這兩個路由進行來回切換，一旦切換后就會把其控制器和模板一并覆蓋，導致每次返回都會重新獲取一次數據

$stateProvider.state(\'home\',{
url:\'/home\',
templateUrl:"../view/home_tpl.html",
controller:"homeController"
}).state(\'detail\',{
url:\'/detail/:id\',
template:"../view/template/detail_tpl.html",
controller:"detailController"
});

c、設置路由（設置命名空間管理子路由home.list、home.detail）

$stateProvider.state(\'home\',{
url:\'/home\',
templateUrl:"../view/home_tpl.html",
controller:"homeController"
}).state(\'home.list\',{
url:\'/list\',
template:"<div list-view></div>", //由于home_tpl模板已經用<div ui-view></div>子路由占位，只能通過這樣去添加到子路由上顯示
controller:"homeController"
}).state(\'home.detail\',{
url:\'/detail/:id\',
templateUrl:\'../view/template/detail_tpl.html\',
controller:"detailController"
})
$urlRouterProvider.otherwise(\'home\');

d、在homeController添加$state.go(\'home.list\');
原因:在加載子路由模板第一個路由指向是列表，所以要在對應控制器中指向home.list列表的命名空間第一次跳轉

十、控制jsonp白名單sce】
1、有時候跨域拿數據，后臺會返回err信息，信息內容Error: [$sce:insecurl] ，這是ng的$http跨域拿數據時候$sce要設置可信任的網站才允許訪問

2、操作

angular.module(\'app\')
.config([\'$sceDelegateProvider\',function ($sceDelegateProvider) {

$sceDelegateProvider.resourceUrlWhitelist([
\'self\', //自身必寫
\'http://localhost/api/**\' //需要跨域的網址
]);

}]);

十一、切換路由控制器也會切換，但定義的$scope.dataList的屬性還是繼續保留】
1、$scope.dataList得到的后臺數據可以繼續再點擊其他路由繼續使用

十二、數據返回詳情頁content數據為標簽】（繞）
1、數據返回詳情頁content數據為標簽格式，所以不能直接通過ng-bind綁定，要通過創建自定義標簽detail，在自定義標簽link方法中jq操作獲取內容，其內容通過html標簽傳來的屬性detail="{{detailData}}"中獲取，這里的detailData是后臺$scope.detailData定義的

文章題目：其他框架-Angular
當前地址：http://www.yijiale78.com/article8/cggdop.html

成都網站建設公司_創新互聯，為您提供定制開發、域名注冊、自適應網站、企業建站、做網站、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯