masamiaoi


Tomorrow is another day

AngularJS->基本

  • 2022-02-14
  • 作者 masamiaoi
  • ~12.37K 字

1 . 下载所需要的配置文件以及组件

2 . 开始使用

1 . angularjs - 表达式

  1. 创建一个html文件
  2. 导入所需要的依赖
  3. 代码的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>anluarjs-表达式</title>
    <!--这里是需要导入的依赖。你的js文件在哪里就导入哪里的路径-->
    <script src="../../plugins/angularjs/angular.min.js"></script>
</head>
    <!--这里需要注意在 body 标签上使用 ng-app 的标签-->
<body ng-app>
    <!-- 
		{{}}    ： 里面是需要输入的内容
	-->
   angularjs表达式 ： {{1+6}}
</body>
</html>

2 . angluarjs-双向数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-双向数据绑定</title>
    <!--导入的 配置文件-->
    <script src="../../plugins/angularjs/angular.min.js"></script>
</head>
<!--需要输入标签 ng-app-->
<body ng-app>
<!--
    ng-model ：里面的是将 text 的值 绑定到 里面的内容里
    username ：是绑定起的别名
    取值 ：{{里面的内容是上面的别名}}}
        注意 :
            输入为数字的时候是实时显示的
            输入为文字的时候需要回车
-->
    姓名 ：<input type="text" ng-model="username"/>
    输入的名字是：{{username}}
</body>
</html>

3 . angluarjs-控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-控制器</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <!--
        所定义的方法 ：
            $scope ：使用该元素 . 属性 进行对下面内容的赋值
    -->
    <script>
        function myController($scope) {
            $scope.username = "奈何轻许思慕い";
        }
    </script>
</head>
<!--
    ng-controller ：表示将里面需要的内容交给 外部 controller 来决定。外部使用在上面 function 中定义
-->
<body ng-app ng-controller="myController">
    姓名：<input type="text" ng-model="username"/>
    输入的姓名是：{{username}}
</body>
</html>

4 . angluarjs-模块化开发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-模块化开发</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>
        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope) {
            $scope.username = '奈何轻许思慕い';
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    姓名：<input type="text" ng-model="username"/>
    输入的姓名是：{{username}}
</body>
</html>

5 . angluarjs-初始化指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-初始化指令</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>

        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope) {
            $scope.initUserName = function () {
                $scope.username = '九纹龙';
            }
        })
    </script>
</head>
<!--
    ng-init 指令执行给定的表达式。
    ng-init 指令添加一些不必要的逻辑到 scope 中，建议你可以在控制器中 ng-controller 指令执行它 。
-->
<body ng-app="myApp" ng-controller="myController" ng-init="initUserName()">
    姓名：<input type="text" ng-model="username"/>
    输入的姓名是：{{username}}
</body>
</html>

6 . angluarjs-事件指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-事件指令</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>

        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope) {
            $scope.initUserName = function () {
                $scope.username = '九纹龙';
            };
            $scope.resetUsername = function () {
                $scope.username = '';
            }
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="initUserName()">
<!--
    ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
-->
    姓名：<input type="text" ng-model="username"/><input type="button" value="重置" ng-click="resetUsername();"/><br/>
    输入的姓名是：{{username}}
</body>
</html>

7 . angluarjs-循环数组指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-循环数组指令</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>

        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope) {
            $scope.user = [1,'张三',25];
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
<ul>
    <!--
        info : 起的别名 。 相当于是遍历 user 中的元素
    -->
    <li ng-repeat="info in user" >
        {{info}}
    </li>
</ul>
</body>
</html>

8 . angluarjs-循环对象数组指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-循环对象数组指令</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>

        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope) {
            $scope.users = [
                {id:'001', name:'李四', age:38},
                {id:'002', name:'王五', age:38}
            ];
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in users">
        <td>{{$index+1}}</td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

9 . angluarjs-内置服务

1 . 创建一个 json 文件模拟后台数据
1
2
3
4
[
  {"id":"001", "name":"李四", "age":38},
  {"id":"002", "name":"王五", "age":38}
]
2 . 创建一个 html 文件来显示 json 中的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angluarjs-内置服务</title>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script>

        //参数1：模块名，必须和ng-app一致，
        //参数2：数组，依赖的其他模块
        var app = angular.module('myApp',[]);
        //参数1：控制器名，必须和ng-controller的值一致
        //参数2：控制器函数，默认有$scope
        app.controller('myController', function ($scope, $http) {
            /*
            *   $http ： 请求中获取数据
            *            $http.get  ： 请求路径
            *            $scope.users = res ： 从请求路径中获取到对象 res 并赋值给 users
            *                   下面的内容就是从赋值好的 users 中获取的
            * */
            $http.get('./data.json').success(function (res) {
                $scope.users = res;
            })
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in users">
        <td>{{$index+1}}</td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

10 . 分页功能的演示

1 . 创建两个 json 文件来模拟后台传输的数据

pagination_1.json

1

pagination_2.json

1

2 . 创建一个 html 文件来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs-分页</title>
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/angularjs/pagination.css">
    <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../plugins/angularjs/angular.min.js"></script>
    <script src="../../plugins/angularjs/pagination.js"></script>
    <script>
        var testApp = angular.module('test',['pagination']);
        testApp.controller('testController',function ($scope, $http) {
            // 分页控件配置
            // currentPage：当前页；totalItems：总记录数；itemsPerPage：每页记录数；perPageOptions：分页选项；onChange：当页码变更后自动触发的方法
            $scope.paginationConf = {
                currentPage: 1,
                totalItems: 10,
                itemsPerPage: 10,
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function () {
                    $scope.reloadList();//重新加载
                }
            };

            //重新加载列表 数据
            $scope.reloadList = function () {
                //切换页码
                $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }

            $scope.findPage=function(page,size){
                $http.get('./pagination_'+page+'.json').success(
                    function(response){
                        $scope.list=response.rows;
                        $scope.paginationConf.totalItems=response.total;//更新总记录数
                    }
                );
            }
        });
    </script>
</head>
<body ng-app="test" ng-controller="testController">
<table border="1">
    <thead>
    <tr>
        <td>主键</td>
        <td>名称</td>
        <td>首字符</td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="entity in list">
        <td>{{entity.id}}</td>
        <td>{{entity.name}}</td>
        <td>{{entity.firstChar}}</td>
    </tr>
    </tbody>
</table>
<tm-pagination conf="paginationConf"/>
</body>
</html>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
最后编辑：2022-02-19