最近、接到一個(gè)老項(xiàng)目需要維護(hù)開發(fā)新的功能。用到的技術(shù)棧主要是AngularJS、對于近幾年一直用react、vue的前端來說還是有點(diǎn)不適應(yīng)呢，早些年當(dāng)vue和react還不溫不火的時(shí)候用過。一個(gè)多年不用的技術(shù)棧差不多都遺忘了差不多了，現(xiàn)在就項(xiàng)目中運(yùn)用到的一些api進(jìn)行一些小小的總結(jié)；就當(dāng)是鞏固知識點(diǎn)了吧、有剛?cè)胄械耐瑢W(xué)可以參考；AngularJS 可以和react、vue一樣構(gòu)建一個(gè)單一頁面SPA應(yīng)用程序。
1、AngularJS 表達(dá)式寫在雙大括號內(nèi)：{{ expression }}。
2、AngularJS 指令：如：ng-app?指令初始化一個(gè) AngularJS 應(yīng)用程序，ng-init?指令初始化應(yīng)用程序數(shù)據(jù)，ng-model?指令把元素值（比如輸入域的值）綁定到應(yīng)用程序，ng-repeat?指令會重復(fù)一個(gè) 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 過濾器，可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。
<div?ng-app="myApp"?ng-controller="personCtrl">
<p>姓名為?{{ lastName | uppercase }}</p>
</div>
5、AngularJS 服務(wù)，是一個(gè)函數(shù)或?qū)ο螅稍谀愕?AngularJS 應(yīng)用中使用。
AngularJS 內(nèi)建了30 多個(gè)服務(wù)$location、$http、$timeout、$interval 服務(wù)等等、、可以參考官網(wǎng)
6、AngularJS事件，ng-click?指令定義了 AngularJS 點(diǎn)擊事件
7、AngularJS依賴注入，依賴注入（Dependency Injection，簡稱DI）是一種軟件設(shè)計(jì)模式，在這種模式下，一個(gè)或更多的依賴（或服務(wù)）被注入（或者通過引用傳遞）到一個(gè)獨(dú)立的對象（或客戶端）中，然后成為了該客戶端狀態(tài)的一部分。該模式分離了客戶端依賴本身行為的創(chuàng)建，這使得程序設(shè)計(jì)變得松耦合，并遵循了依賴反轉(zhuǎn)和單一職責(zé)原則。與服務(wù)定位器模式形成直接對比的是，它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴。一句話 --- 沒事你不要來找我，有事我會去找你。
AngularJS 提供很好的依賴注入機(jī)制。以下5個(gè)核心組件用來作為依賴注入：value、factory、service、provider、constant
8、AngularJS 路由
1、載入了實(shí)現(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:'這是計(jì)算機(jī)頁面'})? ? ? ? .when('/goods',{template:'這是商品頁面'})? ? ? ? .otherwise({redirectTo:'/'});}]);
9、等等、、、、、、還有很多知識點(diǎn)。用到了再總結(jié)、、、、
