AngularJS入门

引入AngularJS文件

我们在使用AngularJS之前，需要先引入AngularJS的文件

    <script src="../js/angular.min.js"></script>

启动引擎

ng-app命令：启动引擎

在引入AngularJS文件后，其并不会直接生效，我们需要在使用AngularJS的页面中，使用ng-app命令来加载引擎。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS-Demo1</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app>
    {{100+100}}
</body>
</html>

此时，html中{{}}中的内容就会被计算，否则输出的仍是常量。

AngularJS的{{}}

在前端页面中如果正确引用了AngularJS文件，也启动了引擎，那么在{{}}中就可以输出AngularJS的变量值。

ng-model：双向绑定

在AngularJS中可以在标签中加入ng-model属性，用于绑定标签的值，这个变量的值在angularJS的全局作用域中只要发生了改变，这个标签的值也会发生相应的改变。标签的值发生了改变，那么这个变量也会随之改变，这就是双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS-demo2</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app>
    请输入姓名:<input ng-model="name">
    我也是姓名:<input ng-model="name">
    {{name}}
</body>
</html>

ng-init初始化

在angular中ng-init指令用于初始化，即加载页面就执行的内容，一般配合方法使用，这里展示一个ng-init的实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS-demo2</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app ng-init="name='jack'">
    请输入姓名:<input ng-model="name">
    我也是姓名:<input ng-model="name">
    {{name}}
</body>
</html>

ng-app：建立模块

var app = angular.mudule("模块名",[]);

上述代码创建一个angularJS的模块，模块中我们可以写自己的实现代码，有了模块才能进一步的书写代码。

ng-controller ：创建控制器

此命令用于创建控制器，控制器中我们可以书写js代码，创建方法、声明变量。等一系列的操作。

创建控制器的时候需要传入两个参数

参数1：控制器名称

参数2：方法体

 <script>
        //建立模块
        var app = angular.module("myApp",[]);
        //创建控制器
        app.controller("myController",function ($scope) {

        });
    </script>

使用控制器需要在前端页面的body标签中引入模块和控制器

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

ng-click：事件指令

在angularJS中同样提供了一系列的事件操作的指令，其中最常用的一个当属ng-click指令。

用法：在标签中加入ng-click指令，即可绑定单击事件，事件需要在ng-click中通过$scope声明。

案例：计算两个数的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJS-demo4-控制器</title>
    <script src="../js/angular.min.js"></script>
    <script>
        //建立模块
        var app = angular.module("myApp",[]);
        //创建控制器
        app.controller("myController",function ($scope) {

            //结果
            $scope.result = 0;

            //计算结果
            $scope.getResult = function() {
                $scope.result = parseInt($scope.num1)+ parseInt($scope.num2);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    第一个数字：<input type="text" ng-model="num1">
    第二个数字：<input type="text" ng-model="num2">
    <button ng-click="getResult()">计算</button>
    结果:{{result}}
</body>
</html>

注意：如果使用的是谷歌浏览器，AngularJS很容易出现缓存导致结果运行不出的情况，如果出现这种情况可以清空缓存再重试即可。

ng-repeat循环和迭代

在我们开发过程中，会进行大量的页面展示，其中会用到循环。angularJS提供了很方便的循环操作。它的用法类似于jsp中的c:foreach，接下来我们来通过一个案例介绍一下其用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo5-循环</title>
    <script src="../js/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module("myApp",[]);
        //创建控制器
        app.controller("myController",function ($scope) {
            //创建数组
            $scope.list = [1,3,5,7,9];
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        //迭代数组
        <tr ng-repeat="item in list">
            //展示数据
            <td>{{item}}</td>
        </tr>
    </table>
</body>
</html>

使用$http发送http请求

在开发过程中，必然是要从后台查询数据的，angularJS为我们提供的解决方案就是$http。

首先，在controller中需要先引入$http.

然后就可以在controller中的方法中使用$http发送请求，获取数据。

    <script src="../js/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module("myApp",[]);
        //创建控制器
        app.controller("myController",function ($scope,$http) {
            //查询
            $scope.findList = function () {
                //TODO 此处存在跨域问题 暂未解决
                $http.post("../json/data.json").success(function (response) {
                    $scope.list = response;
                });
            }
        });
    </script>

ng-init初始化

在页面加载的时候，我们经常会做一些查询操作，这个时候往往需要调用js方法，对于这种需求，AngularJS也为我们提供了对应的解决方案。

在body标签中加入ng-init="method()"，就会在页面加载到时候为我们执行method方法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$http</title>
    <script src="../js/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module("myApp",[]);
        //创建控制器
        app.controller("myController",function ($scope,$http) {
            //查询
            $scope.findList = function () {
                //TODO 此处存在跨域问题 暂未解决
                $http.post("../json/data.json").success(function (response) {
                    $scope.list = response;
                });
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>数学成绩</th>
        </tr>
        <tr ng-repeat="item in list">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.math}}</td>
        </tr>
    </table>
</body>
</html>