AngularJS+npm+bower相關筆記(三)

0.AngularJS所有的代碼版本信息都在https://code.angularjs.org/這個網站上,各種AngularJS的壓縮版、非壓縮版、獨立模塊兒(Angular插件)都有。


1.JSONP是一種跨域的解決方案


2.AngularJS自定義服務(每一個服務實際上在代碼上呈現的就是一個模塊兒)
◆factory:【
◇App.factory("showTime",['$filter',function($filter){
// 在方法中可以做任何事兒,但最後必須直接顯式返回一個對象
return {
now:function(){
console.log(Date);
}
}
}]);
◇定義好的服務就可以在控制器中直接依賴注入,就像依賴注入其它服務一樣
App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
$scope.now =showTime.now();
}]);

◆ service:【
◇App.service("showTime",['$filter',function($filter){
//要以this的名義來添加方法
this.now=function(){
console.log(Date);
}
}]);
◇定義好的服務就可以在控制器中直接依賴注入,就像依賴注入其它服務一樣
App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
$scope.now =showTime.now();
}]);

◆ value:【
◇本質上一個服務,從表現形式上是一個常量,常量就是不變的值與變對量相對應,直接使用應用.value來定義,是一個自定義的常量服務,App.value("author",'zzz');
◇// 聲明依賴調用服務
App.controller('DemoController', ['$scope', 'author', 'version', function ($scope, author, version) {
$scope.author = author;
}]);
◇直接使用value方法定義,然後立馬可以在控制器中依賴注入,直接使用,最爲方便了。



◆ factory是需要返回一個對象的,service是需要在this上添加成員的,value是直接定義,這三種各有各的特點。


3.AngularJS模塊兒加載
◆AngularJS模塊可以在被加載和執行之前對其自身進行配置。可以在應用的加載階段配置不同的邏輯。
◆ 開始->瀏覽器解析DOM樹->遇到angular.js停止解析,開始執行腳本呢->Angular監聽DOMContentLoaded事件(頁面dom加載結束後)->啓動Angular應用(也就是ng-app)->查找模塊兒依賴->尋找ng-app指令->初始化必要組件($injector/$compie/$rootScope,也就是解析指令、依賴注入的一些必要模塊兒)->配置和運行(你自己改變的AngularJS默認配置)->開始解析DOM樹->$compie遍歷DOM數,蒐集指令->執行每個指令的compile函數->處理DOM轉換,編譯模板->調用鏈接函數,生成實時視圖->等待時間觸發,執行$digest循環,檢測到變化,調用$watch函數->再次執行$digest循環,直到沒有變化->結束
◆ 配置模塊兒(功能上講就是配置服務):【
◇通過config方法實現對模塊兒的配置,AngularJS中的服務大部分都對應一個provider,用來執行與
◇$log、$http、$location都是內置服務,相對應的“provider”分別是$logProvider、$httpProvider、$locationPorvider。
◇取消某一個默認的功能:App.config(["$logProvider","$httpProvider",function($logProvider,$httpProvider){
$logProvider.debugEnabled(false);//那麼就禁用了$log.debug這個功能了,當你在調用的時候就會無效。
}]);,允許一次配置多個服務(模塊兒),傳遞的是一個數組,也還是以依賴注入的方式。
◇新註冊某一個默認的功能:App.config(["$filterProvider",function($filterProvider){
//默認的九個格式化過濾器,通過配置可以新增加格式化過濾器
$filterProvider.register('capitalize'){
return function(input) {
//首字母大寫
return input[0].toUpperCase()+input.slice(1);
}
}
}]);

◆ 運行模塊兒:【
◇服務也是以模塊形式存在的,且對外提供特定功能,前面學習中都是將服務做爲依賴注入進去的,然後再進行調用,除了這種方式外,也可以直接運行相應的服務模塊,AngularJS提供了run方法來實現。
◇不但如此,run方法還是最先執行的,利用這個特點,可以將一些需要優先執行的功能通過run方法來運行,比如驗證用戶是否登錄,未登錄則不允許進行任何其它操作。
◇App.run(['$http',function($http){
$http({
url:'example.php',
method:'get'
})
}]);
◇$rootScope是應用的根作用域,也是一個應用最外層的服務,
App.run(['$rootScope',function($rootScope){
$rootScope.name='祖宗';
}]);,直接可以在視圖中使用{{name}}來調用了,不要通過控制器來注入模型的方式使用了,$rootScope的作用域是根作用域,而$scope的作用域在rootScope作用域之中,也就是說$rootScope是應用程序的作用域,而$scope是一個控制器的作用域,一個應用可以有多個控制器,一個控制器只能有一個應用,所以應用的作用域就是根作用域。




4.頁面性能優化
◆ js會阻塞瀏覽器解析html標籤
◆ js最好不要卸載head裏面
◆ 性能優化,直接百度搜索,雅虎14條,就能夠看到。
◆ 


5.路由
◆ SPA(Single Page Application)單頁面應用
◇不產生頁面跳轉
◇把若干功能集成到一個頁面
◇動態生成數據,通過ajax異步獲取
◇爲了增強用戶體驗
◇可以提升性能
◇仿製手機APP的交互
◆ 錨點是前端的功能,路由是通過對錨點的處理來實現的
◇監聽錨點改變的事件:hashchange
◇window.addEventListener('hashchage',function(){
var hash=location.hash;//獲取錨點部分的信息
//創建異步對象
var xhr=new XMLHttpRquest();
//設置請求方式和url
xhr.open('get',url,true);
//監聽狀態改變 xhr.onreadystatechange=function(){
//判斷請求是否成功
if(xhr.readyState==4&&xhr.status=200) {
//返回結果
xhr.responseText;
}
}
//發送請求
xhr.send(null);
});
◇原理是通過獲取到的錨點信息,然後異步請求對應的url,將請求的結果添加到指定的頁面活動區域中,從而實現了不刷新而切換頁面的效果
◇在單一頁面中可以通過hashchange事件監聽到錨點的變化,進而可以實現爲不同的錨點準不同的視圖,單頁面應用就是基於這一原理實現的。
◇AngularJS對這一實現原理進行了封裝,將錨點的變化封裝成路由(Route),這是與後端路由的根本區別。
◆ 在1.2版前路由功能是包含在AngularJS核心代碼當中,之後的版本將路由功能獨立成一個模塊,需要下載angular-route.js(https://code.angularjs.org/)【
◇先引入核心腳本
◇再引入其它插件腳本
◇when表示判斷是否符合某一個路由規則進入,otherwise表示當不符合其它路由規則時才進入,template表示視圖區域替換的模板(字符串內容),templateUrl表示視圖區域替換的模板(引入外來的資源文件,如html),controller表示引入的視圖模板所屬哪個控制器(用於指定某個控制器中的數據傳遞到引入的視圖中),redirectTo表示進入otherwise後跳轉某個路由規則中去(只能夠在otherwise中使用)腳本代碼:【
//依賴ngRoute模塊兒
var App=angular.module('App',['ngRoute']);
//需要對路由模塊兒進行配置,使其正常工作。
App.config(['$routeProvider',function($routeProvider){
//如果路由是 /index
$routeProvider.when('/index',{
//替換後的視圖模板內容
template:'<h1>index Pages!</h1>';
//如果路由是/introduce
}).when('/introduce',{
//替換後的視圖模板內容
template:'<h1>introducePages!</h1>';

}).when('/list',{
//直接引入外部視圖模板
templateUrl:'./list.html',
//設置視圖模板所屬的控制器
controller:'ListController'


//如果路由不是以上的而是其它的
}).otherwise({
//跳轉到其它路由
redirectTo:'/index'
});
}]);

◇html視圖代碼【
<!-- 定義錨點 -->
<a href="#/index">index</a>
<a href="#/introduce">introduce</a>
<a href="#/list">list</a>


<!-- 佔位符 如果限制了控制器則會在指定控制器中顯示替換後的模板內容,如果沒有指定控制器,則在任何地方都能夠直接替換模板內容-->
<div ng-view></div>




◆ 當制定的路由規則中需要傳遞其它參數時,有兩種傳遞方式

◇顯式傳遞,這種方式可以實現知道形式參數的名字,也就是知道key是什麼,推薦使用,$routeProvider.when('/index/:id/:name',{}),:id表示一個指定的形參,AngularJS提供了一個專門負責獲取參數的一個服務$routeParams,可以在你指定的視圖模板所屬的控制器中依賴注入這個服務,然後從中獲取,$routeParams["id"]就能夠獲取傳遞過來的數據,當然此時的html標籤的錨點格式就是這樣的<a href="#/index/1/stu">index</a>,$routeParams["id"]獲取到的值爲1,$routeParams["name"]獲取到的值爲stu。
◇隱式傳遞,這種方式不能事先知道形式參事的名字,並不會事先知道key是什麼,第二種傳遞與路由規則沒有多大關係了,但是可以通過$routeParams來獲取,<a href="#/index/1/stu?sex=0&aihao=play">index</a>,$routeParams["sex"]獲取到的值爲0,$routeParams["aihao"]獲取到的值爲play。



◆ 


6.前端做的寫頁面,做交互,傳遞數據
◆後端會說明需要什麼樣的參數



7.在php中如果你不給數組元素設置下標或者設置的下標沒有按照順序,php會自動給數組元素按照順序的分配小標的,如$arr=Array();$arr[]=1;$arr[]=2;print_r($arr);//$arr[0]=1;$arr[1]=2;,所以不需要你手動的去寫下標了,也不用擔心下標寫錯了。



8.AngularJS內置了一個精簡版jQuery,在沒有引入jQuery的前提下AngularJS實現了簡版的jQuery Lite,通過angular.element可以將一個DOM元素轉成jQuery對象,如果提前引入了jQuery,則angular.element則完全等於jQuery了。
◆AngularJS可以通過element方法將一個dom對象轉換爲jquery對象,var box=document.getElementById("box");box=angular.element(box);console.log(box);//一個簡單的jQuery.fn.init對象,



9.一款管理靜態資源的軟件 bower
◆基於NodeJS來開發的一個靜態資源管理工具,由twitter公司開發維護,解決大型網站中靜態資源的依賴問題。
◆bower就是用來下載插件的,就像後端的包管理工具用來下載一些開源的插件,可以簡單快捷的從github裏面下載一個些插件,不需要你去到網上找了,而且還支持模糊搜索,通過bower search 插件部分名稱,就能夠找到與該插件相關的一些信息。
◆bower是使用nodejs開發的,要想使用bower,需要先安裝nodejs,nodejs就是一個軟件,正常安裝nodejs即可,nodejs不要裝到中文目錄裏。
◆驗證電腦是否安裝了nodejs,cmd命令輸入node -v,如果下一行返回了版本號,那麼則證明nodejs安裝成功。
◆npm(Nodejs Package Manager)是專門用來管理使用nodejs來開發的工具的管理器。
◆驗證電腦是否安裝了nodejs裏的軟件管理工具npm(Nodejs Package Manager),cmd命令輸入 npm -vv,如果下一行返回了版本號,那麼則證明npm安裝成功。
◆安裝bower,使用npm進行安裝 npm install 工具名稱(bower) -g,-g表示全局安裝,可以在操作系統任何一個地方直接訪問


10.npm(Nodejs Package Manager)是專門用來管理使用nodejs來開發的工具的管理器。
◆依賴NodeJS環境和git工具。
◆npm install -g bower --registry=https://registry.npm.taobao.org安裝bower,在國內下載bower,不然就會去國外下載bower了,國內有些人將國外的資源做了一個鏡像(備份),所以可以在國內的服務器進行下載了。
◆安裝bower完畢之後,打開git brsh,然後通過bower來進行操作【
◇原理是從github裏面進行查詢然後再下載到指定的目錄中去。
◇可以通過搜索部分資源信息來找到資源,支持模糊搜索
◇並且下載後的資源會產生強制性的依賴,通過uninstall進行卸載時必須將主資源卸載才能夠卸載其它被依賴的資源,因爲下載主資源後,會同時產生一個bower.json的文件,裏面的dependencies就寫了依賴於哪些文件,這個文件裏寫了關於這個插件的所有信息,如果有依賴文件,那麼就會去下載指定的依賴文件。
◇bower search 查找資源信息
◇bower install  安裝(下載)資源,通過#號可以指定版本號,bower install jquery#1.7.2
◇bower info 查看資源信息
◇bower uninstall 卸載(刪除)資源
◇bower init初始化(在windows下只能使用cmd來操作),用來記錄資源信息及依賴。

◆如果要查看npm安裝了哪些軟件,可以輸入npm -g list --depth=0 ,就能夠查看到本機使用npm安裝了哪些軟件,-g表示全局查找,--depth表示深度,如果不寫=0,那就會遞歸查找軟件的所有子文件,太多了,=0直接返回軟件名稱,不找子文件。







發佈了111 篇原創文章 · 獲贊 3 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章