最近湾揽、接到一個老項目需要維護開發(fā)新的功能瓤逼。用到的技術(shù)棧主要是AngularJS、對于近幾年一直用react库物、vue的前端來說還是有點不適應(yīng)呢霸旗,早些年當(dāng)vue和react還不溫不火的時候用過。一個多年不用的技術(shù)棧差不多都遺忘了差不多了戚揭,現(xiàn)在就項目中運用到的一些api進行一些小小的總結(jié)诱告;就當(dāng)是鞏固知識點了吧、有剛?cè)胄械耐瑢W(xué)可以參考民晒;AngularJS 可以和react精居、vue一樣構(gòu)建一個單一頁面SPA應(yīng)用程序锄禽。
1、AngularJS 表達式寫在雙大括號內(nèi):{{ expression }}箱蟆。
2沟绪、AngularJS 指令:如:ng-app?指令初始化一個 AngularJS 應(yīng)用程序刮便,ng-init?指令初始化應(yīng)用程序數(shù)據(jù)空猜,ng-model?指令把元素值(比如輸入域的值)綁定到應(yīng)用程序,ng-repeat?指令會重復(fù)一個 HTML 元素恨旱,你可以使用?.directive?函數(shù)來添加自定義的指令辈毯。
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
??? return {
??????? template : "<h1>自定義指令!</h1>"
??? };
});
</script>
3、AngularJS 控制器搜贤,ng-controller?指令定義了應(yīng)用程序控制器
<div?ng-app="myApp"?ng-controller="myCtrl">
名:?<input?type="text"?ng-model="firstName"><br>
姓:?<input?type="text"?ng-model="lastName"><br>
<br>
姓名:?{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
??? $scope.firstName = "John";
??? $scope.lastName = "Doe";
});
</script>
4谆沃、AngularJS 過濾器,可以使用一個管道字符(|)添加到表達式和指令中仪芒。
<div?ng-app="myApp"?ng-controller="personCtrl">
<p>姓名為?{{ lastName | uppercase }}</p>
</div>
5唁影、AngularJS 服務(wù),是一個函數(shù)或?qū)ο蟮嗝稍谀愕?AngularJS 應(yīng)用中使用据沈。
AngularJS 內(nèi)建了30 多個服務(wù)$location、$http饺蔑、$timeout锌介、$interval 服務(wù)等等、猾警、可以參考官網(wǎng)
6孔祸、AngularJS事件,ng-click?指令定義了 AngularJS 點擊事件
7发皿、AngularJS依賴注入崔慧,依賴注入(Dependency Injection,簡稱DI)是一種軟件設(shè)計模式穴墅,在這種模式下弊琴,一個或更多的依賴(或服務(wù))被注入(或者通過引用傳遞)到一個獨立的對象(或客戶端)中兢卵,然后成為了該客戶端狀態(tài)的一部分。該模式分離了客戶端依賴本身行為的創(chuàng)建,這使得程序設(shè)計變得松耦合观挎,并遵循了依賴反轉(zhuǎn)和單一職責(zé)原則。與服務(wù)定位器模式形成直接對比的是昂验,它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴缘滥。一句話 --- 沒事你不要來找我,有事我會去找你惩坑。
AngularJS 提供很好的依賴注入機制掉盅。以下5個核心組件用來作為依賴注入:value也拜、factory、service趾痘、provider慢哈、constant
8、AngularJS 路由
1永票、載入了實現(xiàn)路由的 js 文件:angular-route.js卵贱。
2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊侣集。angular.module('routingDemoApp',['ngRoute'])
3键俱、使用 ngView 指令<div ng-view></div>
4、配置 $routeProvider世分,AngularJS $routeProvider 用來定義路由規(guī)則编振。
module.config(['$routeProvider', function($routeProvider){ $routeProvider
? ? ? ? .when('/',{template:'這是首頁'})? ? ? ? .when('/computers',{template:'這是計算機頁面'})? ? ? ? .when('/goods',{template:'這是商品頁面'})? ? ? ? .otherwise({redirectTo:'/'});}]);
9、等等臭埋、踪央、、瓢阴、畅蹂、、還有很多知識點炫掐。用到了再總結(jié)魁莉、、募胃、旗唁、