写作时间：2019-10-23
实现目标：AngularJS基础入门
涉及知识：AngularJS

【AngularJS简介】

AngularJS是一个创建富客户端应用的JavaScript MVC框架。你仍然需要具有服务端后台，但大多数的用户交互逻辑将放到客户端上处理。它可以创建单页的应用程序，一个页面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，由JavaScript来控制不同view在这个页面上的呈现。

【常用指令】

【ng-app】

声明AngularJS所管辖的区域。一般写在body或者html标签上，原则上一个页面只能有一个

<body ng-app="myApp"></body>

【ng-model】

把元素值（比如输入域的值）绑定到应用程序的变量中

<input type="text" ng-model="name"/>

【ng-init】

初始化AngularJS应用程序中的变量值

<body ng-app="" ng-init="name='NAME'">

【ng-bind】

把应用程序变量中的值，输出到页面HTML视图中，可以与表达式{ { } }互相替换

<p ng-bind="5+5+'Angular'"></p>

【表达式】

AngularJS使用{ { } }绑定表达式。用于将表达式的内容输出到页面中。
表达式中可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果

<p>{{5+5+"Angular"}}</p>
<p ng-bind="5+5+'Angular'"></p>

【MVC与作用域】

<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>

Model(模型层)：应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)在AngularJS中，Model特指的是：应用程序中的各种数据
View(视图层)：用户可以看到的用户显示数据的页面
Controller(控制器):控制器是连接View和Model的桥梁，负责从View读取数据，接受用户的操作输入；并将数据发送给Model层

【Controller】

在AngularJS的模块上，创建一个控制器，需要传入两个参数

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

});

【作用域】

$scope局部作用域，声明在$scope上的属性和方法。只能在当前controller使用。

$rootScope根作用域。声明在$rootScope上的属性和方法，可以在整个ng-app所包含的范围使用。

【Service】

$location:返回当前页面的URL地址信息，是一个对象

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$http:向服务器发送请求，类似于JQuery中的Ajax

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: ''
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });

});