學習AngularJS的一點收穫

時間 2020-07-22

原文原文鏈接

AngularJS：用來構建SPAs（Single Page Applications）html

因爲AngularJS是基於MVC模式的，因此他將Application 分解成Model View Controller。View是經過HTML和AngularJS本身的template來實現，model和controller是經過JavaScript的對象和方法來實現
jquery

AngularJS能夠寫在<script>中，經過directive來擴展HTML，用{{Expression}}將數據綁定到HTML
angularjs

咱們能夠經過<script>將AngularJS引入頁面：面試

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/{version}/angular.min.js"></script>

經過一個簡單的例子來初步瞭解一下AngularJS -- 「HelloWorld」ajax

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/{version}/angular.min.js"></script>
</head>
<body ng-app="helloApp">
    <div ng-controller="helloController">
        <p>{{hello.message}}</p>
    </div>
    <script>
        angular.module('helloApp',[])
        .controller('helloController', function($scope){
        $scope.hello = {};
        $scope.hello.message = "Hello World";
        });
    </script>
</body>
</html>

在這個例子中 ng-app定義了AngularJS應用程序爲helloApp，若是沒有ng-app，HTML將把表達式直接顯示出來而不會進行計算json

ng-controller定義了對應的controller爲helloController。在<script>中經過angular.module.controller定義了具體的controller實現方法，這個方法只在所在的module中有效api

<div>部分就是View
app

$scope是很重要的一個概念，有一個根scope和多個子scope，每個view都有一個scope，多是根也多是子。對於每個在controller聲明的scope中的每個變量對於其餘controller來講都是不可見的，每個controller中的scope都是不相同的
ide

Filter:
post

過濾器用法很簡單就是爲了篩選出特定的數據，經過 ... |filter: ...|...|... 來使用

Formating Filter：date, concurrency, number, json, uppercase, lowercase

Array Filter: limitTo, filter, orderBy

Customized: module.filter('filterName', function(){ });

自定義的過濾器方法能夠有多個參數，在使用的過程當中爲：filter: var1|var2.....

Event:

事件跟JavaScript差很少就是都變成了ng-directive了

ng-click, ng-dbl-click, ng-mousedown, ng-mouseup, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-keydown, ng-keyup, ng-keypress, ng-change

AJAX:

能夠使用$http service來實現AJAX call，有如下幾種方法：

$http.get(url, config), $http.post(url, data, config), $http.put(url, data, config), $http.delete(url, config), $http.head(url, config)

咱們也能夠經過JSON.stringify(data) 來將數據轉換成JSON string

在以上方法中的config參數，用來控制發送到server的HTTP request，他是一個JavaScript Object，包括method, url, params, headers, timeout, cache, transformRequest, transformResponse

這些包含的內容和jquery中的ajax call內容基本同樣， method定義了request的HTTP method，url定義了AJAX CALL的url， params定義了其餘要加在URL上的request params，headers定義了想要發送給server的其餘header，timeout定義了ajax call的時間，cache設置是否cache XHR GET request，transformRequest定義了再發送給server以前將request進行轉換的方法，transformResponse定義了對在傳給application以前由server發送回來的response進行轉換的方法

具體方法：

PromiseObject.success(function(data, status, headers, config){ }).error(function(data, status, headers, config){ });

$http.jsonP（url, config）也是一個獲得JSON data的方法。可是在security方面不夠好，由於當用JSONP的時候，遠程server能夠將任何可以在本地HTML頁面中運行的JavaScript發送回來。其中甚至可能有一些JS方法會竊取我的application中的信息，所以若是要使用JSONP的話最好用在信任的server中

在AngularJS中其實還有一些內部原理和方法，比方說watch(), digest(), apply(), complie(), link()等等可是在面試中我常常被問到的主要就是一些基礎的用法和概念，比方說angularjs用在什麼地方，能夠怎麼用，如何進行AJAX call，service，provider，routes這一類問題

在學習的過程當中主要參考了http://www.w3cschool.cc/angularjs/angularjs-intro.html還有http://tutorials.jenkov.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。