学习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/