AngularJS

最新推荐文章于 2021-10-21 11:35:36 发布

大大126

最新推荐文章于 2021-10-21 11:35:36 发布

阅读量335

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_59938047/article/details/120354714

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.AngularJS简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

2.引入AngularJS CDN文件

当然，你还有更多选择，那就是引入AngularJS CDN文件。

AngularJS官网本身采用AngularJS库构建，页面中的AngularJS库通过Google的CDN（内容分发网络）引入，所以国内访问会有问题。

国内我们一般推荐是以下CDN

引入百度CDN

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

bootcdn

<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

3.AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
    <h4>ng-app-----定义一个 AngularJS 应用程序</h4>
    <h4>ng-model----将AngularJS 应用程序中的变量与当前文本框绑定</h4>
    <h4>{{}}------在html文件中显示变量值/表达式运算结果</h4>
    <h4>ng-bind------应用程序数据绑定到 HTML元素</h4>
    <div ng-app="">
        <input type="text" ng-model="city">
        <h1>城市：{{city}}</h1>
        <p ng-bind="city"></p>
    </div>
</body>

</html>

当网页加载完毕，AngularJS 自动开启。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 city。

ng-bind 指令把应用程序变量 city 绑定到某个段落的 innerHTML

移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
    <h4>移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。</h4>
    <input type="text" ng-model="name">
    <h3 ng-bind="name"></h3>
    <h3>你好：{{name}}</h3>
</body>

</html>

4.AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

<body ng-app="">
    <p>{{50*2}}</p>
</body

4.1AngularJS 数字

AngularJS 数字就像 JavaScript 数字：

<body ng-app="" ng-init="x=5;y=20">
    <h3>ng-init初始化指令</h3>
    <p>z={{x*y}}</p>
    <h3>使用ng-bind,x+y</h3>
    <p>z=<span ng-bind="x+y"></span></p>
</body>

4.2AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串

    <div ng-app="" ng-init="name='wangxiao';home='xian'">
        <p>{{name+":"+home}}</p>
        <h3>使用 ng-bind </h3>
        <p>信息 <span ng-bind="name+'--'+home"></span></p>
    </div>

4.3AngularJS 数组

AngularJS 数组就像 JavaScript 数组

    <div ng-app="" ng-init="arr=[25,10,20,45]">
        <p>第二个值为{{arr[1]}}</p>
        <h3>使用 ng-bind </h3>
        <p>第1个值为 <span ng-bind="arr[0]"></span></p>
    </div>

4.4AngularJS 对象

AngularJS 对象就像 JavaScript 对象

    <div ng-app="" ng-init="obj={name:'wangxiao',age:22,home:'beijing'}">
        <p>年龄{{obj.age}}</p>
        <h3>使用 ng-bind </h3>
        <p>住址<span ng-bind="obj.home"></span></p>
    </div>

5.AngularJS ng-repeat 指令

ng-repeat 指令会重复一个 HTML 元素

数组

    <h3>数组</h3>
    <div ng-app="" ng-init="arr=['beijing','xian','shanghai'];">
        <p ng-repeat="city in arr">{{city}}</p>
    </div>

数组内多个对象

    <div ng-app="" ng-init="obj=[{stuid:1001,stuname:'wangxiao',stuhome:'xianyang'},
    {stuid:1002,stuname:'zhangsan',stuhome:'xian'},
    {stuid:1003,stuname:'wangxiaoxiao',stuhome:'beijing'}];">
        <table border="1px">
            <tr ng-repeat="stuobj in obj">
                <td>{{stuobj.stuid}}</td>
                <td>{{stuobj.stuname}}</td>
                <td>{{stuobj.stuhome}}</td>
            </tr>
        </table>
    </div

6.AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块

6.1创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

angular.module("newmodule", []);

在指定的html元素上通过ng-app指令引用模块

    <div ng-app="newmodule">
    </div>

6.2AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

app.controller("newcontroller", function($scope) {}

在指定的html元素上通过ng-controller指令引用控制器

ng-controller="newcontroller"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // 创建模块
        var app = angular.module("newmodule", []);
        //创建控制器
        app.controller("newcontroller", function($scope) {
            // 数字
            $scope.x = 30;
            $scope.y = 3;
            // 字符串
            $scope.name = "wangxiao";
            // 数组
            $scope.arr = ["北京", "西安", "宝鸡"];
            //对象
            $scope.obj = {
                    name: "王小",
                    age: 23,
                    home: "西安"
                }
                // 数组中多个对象
            $scope.stuarr = [{
                stuid: 1001,
                stuname: "王小",
                stuhome: "xian"
            }, {
                stuid: 1002,
                stuname: "王二小",
                stuhome: "beijing"
            }, {
                stuid: 1003,
                stuname: "王小小",
                stuhome: "baoji"
            }]
        })
    </script>
</head>

<body>
    <!-- 模块和控制器都引入div中 -->
    <div ng-app="newmodule" ng-controller="newcontroller">
        <!-- 数字运算 -->
        <p>x*y={{x*y}}</p>
        <p>名字：{{name}}</p>
        <ul ng-repeat="city in arr">
            <li>{{city}}</li>
        </ul>
        <p>名字:{{obj.name}}--年龄：{{obj.age}}--家庭住址：{{obj.home}}</p>
        <table border="1px" width="200px">
            <tr ng-repeat="stu in stuarr">
                <td>{{stu.stuid}}</td>
                <td>{{stu.stuname}}</td>
                <td>{{stu.stuhome}}</td>
            </tr>
        </table>
    </div>
</body>

</html>

6.3 控制器方法

控制器也可以有方法（变量和函数）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制器方法</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // 模块
        var app = angular.module("mymodule", []);
        // 控制器
        app.controller("mycontroller", function($scope) {
            $scope.name = "wangxiao";
            $scope.age = 22;
            $scope.getname = function() {
                return $scope.name + ";" + $scope.age;
            }
        })
    </script>
</head>

<body>
    <div ng-app="mymodule" ng-controller="mycontroller">
        名字：<input type="text" name="" id="" ng-model="name"><br> 年龄：
        <input type="text" name="" id="" ng-model="age">
        <p>个人信息:{{getname()}}</p>
    </div>
</body>

</html>

7.AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

7.1$location 服务

它可以返回当前页面的 URL 地址。

    <script>
        // $location 服务，它可以返回当前页面的 URL 地址。
        //模型
        var app = angular.module("mymodule", []);
        //控制器
        app.controller("mycontroller", function($scope, $location) {
            $scope.url = function() {
                return $location.absUrl();
            }
        })
    </script>

7.2$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$http 服务</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据
        //模块
        var app = angular.module("mod", []);
        app.controller("con", function($scope, $http) {
            $http.post("http://localhost:8080/test").then(function(resp) {
                $scope.stu = resp.data;
            })

        })
    </script>
</head>

<body ng-app="mod" ng-controller="con">
    <table border="1px">
        <tr ng-repeat="stus in stu">
            <td>{{stus.stuid}}</td>
            <td>{{stus.stuname}}</td>
            <td>{{stus.stuage}}</td>
            <td>{{stus.stuaddress}}</td>
        </tr>
    </table>
</body>

</html>

7.3$timeout 服务

$timeout 服务对应了 JS window.setTimeout 函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$timeout  服务</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // 模型？
        var app = angular.module("mod", []);
        // 控制器
        app.controller("con", function($scope, $timeout) {
            $scope.test = "hello";
            $timeout(function() {
                $scope.test = "how are you?";
            }, 1000)
        })
    </script>
</head>

<body>
    <div ng-app="mod" ng-controller="con">
        <p>一秒后显示</p>
        <p>{{test}}</p>
    </div>
</body>

</html>

7.4$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$interval 服务</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // 模型？
        var app = angular.module("mod", []);
        //控制器
        app.controller("con", function($scope, $interval) {
            $scope.testtime = new Date().toLocaleTimeString();
            $scope.run = function() {
                $interval(function() {
                    $scope.testtime = new Date().toLocaleTimeString();
                }, 1000);
            }
        })
    </script>
</head>

<body>
    <div ng-app="mod" ng-controller="con">
        <p>每一秒显示</p>
        <input type="button" value="开始" ng-click="run()">
        <p>{{testtime}}</p>
    </div>
</body>

</html>

7.5创建自定义服务

service创建自定义服务

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS 创建自定义服务Service</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module("mod", []);
        //创建自定义服务
        app.service("mysercive", function($http) {
            this.test = function() {
                return $http.post("http://localhost:8080/test");
            }
        });
        //创建控制器
        app.controller("con", function($scope, mysercive) {
            $scope.testhttp = function() {
                mysercive.test().then(function(resp) {
                    $scope.stulist = resp.data;
                })
            }
        })
    </script>
</head>

<body ng-app="mod" ng-controller="con">
    <input type="button" value="按钮" ng-click="testhttp()" />
    <table border="1px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr ng-repeat="stu in stulist">
            <td>{{stu.stuid}}</td>
            <td>{{stu.stuname}}</td>
            <td>{{stu.stuage}}</td>
            <td>{{stu.stuaddress}}</td>
        </tr>
    </table>
</body>

</html>

点击按钮

8.AngularJS Select(选择框)

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module("mod", []);
        //自定义服务部、
        app.service("myservice", function($http) {
            this.gethttp = function() {
                return $http.get("http://localhost:8080/test")
            }
        });
        //创建控制器
        app.controller("con", function($scope, myservice) {
            $scope.arr = "";
            $scope.myname = [];
            $scope.test = function() {
                myservice.gethttp().then(function(resp) {
                    $scope.stulist = resp.data;
                    for (var i = 0; i < $scope.stulist.length; i++) {
                        var stu = $scope.stulist[i];
                        $scope.myname.push(stu.stuname);
                    }
                })
            }
        });
    </script>
</head>

<body ng-app="mod" ng-controller="con">
    <input type="button" value="按钮" ng-click="test()" />
    <select ng-init="arr=myname[0]" ng-model="arr" ng-options="x for x in myname"></select>
</body>

</html>