AngularJS__基础、指令

slom_fxt

于 2021-10-21 11:35:36 发布

阅读量413

点赞数

分类专栏： AngularJS 文章标签： angular.js

本文链接：https://blog.csdn.net/slom_fxt/article/details/120872757

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

注意:我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

目前最新版本是1.5.8 下载地址：https://code.angularjs.org/

实际操作

1.引入angularJS文件

2.在指定的HTML元素中使用ng-app指令

通常情况ng-app指令放在body元素中

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--导入内部下载的文件-->
        <!--<script src="../angular-1.4.6/angular.min.js"></script>-->
        <!--导入angularJs的网络地址-->
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-app="">
        <h4>angular是一个JavaScript框架</h4>
        <h4>angular通过指令扩展了HTML，且通过表达式绑定数据到HTML元素</h4>
        <h4>angular是以一个JavaScript文件形式发布的，后缀为.js结尾</h4>
        <h4>angularJS的用法</h4>
        <h5>1.通过script标记引入本地的angular文件</h5>
        <h5>下载地址:https://code.angularjs.org/ </h5>
        <h5>angular.js核心文件</h5>
        <h5>2.引入angularJs CDN文件</h5>
        <h5>https://code.angularjs.org/1.8.2/angular.min.js</h5>
        <h4>实际操作</h4>
        <h5>1.引入angularJS文件</h5>
        <h5>2.在指定的HTML元素中使用ng-app指令</h5>
        <h5>通常情况ng-app指令放在body元素中</h5>
    </body>
</html>

二、引入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>

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

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

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

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

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

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

例如：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

</head>

<body>

<div ng-app="">

  <p>名字 : <input type="text" ng-model="name"></p>

  <h1>Hello {{name}}</h1>

  <p ng-bind="name"></p>

</div>

</body>

</html>

三、 AngularJS 表达式

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

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

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

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

<div ng-app="">

<p>我的第一个表达式： {{ 5 + 5 }}</p>

</div>

AngularJS 数字就像 JavaScript 数字

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价： {{ quantity * cost }}</p>

</div>

使用 ng-bind 的相同实例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: <span ng-bind="quantity * cost"></span></p>

</div>

AngularJS 字符串就像 JavaScript 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名: {{ firstName + " " + lastName }}</p>

</div>

AngularJS 对象就像 JavaScript 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

</div>

AngularJS 数组就像 JavaScript 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs模块对象创建一个控制器对象
            mytestmodule1.controller('mytestcontroller1',function($scope){
                //声明定义angularjs变量
                $scope.name="zhangsan";
                $scope.number=1234;
                $scope.boo=true;
                $scope.myarr=["zhangsan","lisi","wangwu"];
                $scope.mystu={stuid:1001,stuname:"zhangsanfeng",stuaddress:"武当山"};
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller1">
        <h4>AngularJS 表达式写在双大括号内：{{expression}}。</h4>
        <h4>AngularJS 表达式把数据绑定到 HTML</h4>
        <h5>算术运算:{{12.5+25.8}}</h5>
        <h5>比较运算:{{100 < 20}}</h5>
        <h5>逻辑运算:{{(100 > 20) || (20 < 10) }}</h5>
        <h5>angularjs变量值的创建过程:</h5>
        <h5>1.创建angularjs模块:  angular.module("模块名称", []);</h5>
        <h5>2.在ng-app指令中引入模块名称:ng-app="模块名称" </h5>
        <h5>3.通过angularjs模块创建一个控制器对象:<br>
            angularjs模块对象.controller('控制器名称',function($scope){})</h5>
        <h5>4.通过ng-controller="控制器名称"引入控制器对象到html网页</h5>
        <h5>6.在定义的控制器中声明定义angularjs变量: $scope.变量名称=变量值;</h5>
        <h5>字符串变量name=={{name}}</h5>
        <h5>数字变量number=={{number}}</h5>
        <h5>boolean变量boo=={{boo}}</h5>
        <h5>数组变量myarr[2]=={{myarr[2]}}</h5>
        <h5>对象变量mystu.stuaddress=={{mystu.stuaddress}}</h5>
    </body>
</html>

四、AngularJS 的双向绑定以及事件绑定

AngularJS 的双向绑定
第一向:angularjs变量，第二向:html元素
双向绑定：angularjs变量值变化html元素中的值随之变化
html元素中的值变化angularjs变量值随之变化
ng-model 指令把html元素值（比如输入域的值）绑定到angularjs变量中。
angularjs的事件绑定
1.为html元素添加ng-click="事件处理方法"
ng-click指令设置点击事件
2.在控制器中定义事件处理方法:

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs模块对象创建一个控制器对象
            mytestmodule1.controller('mytestcontroller1',function($scope){
                //声明定义angularjs变量
                $scope.name="张三";
                $scope.stuid=1001;
                $scope.getname=function(){
                    //得到的变量值随绑定的输入域变化，属输入域的值也随变量变化
                    alert($scope.name);
                }
                $scope.getstuid=function(){
                    alert($scope.stuid);
                }
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller1">
        
        <h4>AngularJS 的双向绑定</h4>
        <h5>第一向:angularjs变量，第二向:html元素</h5>
        <h5>双向绑定：angularjs变量值变化html元素中的值随之变化<br>
            html元素中的值变化angularjs变量值随之变化
        </h5>
        <h5>ng-model 指令把html元素值（比如输入域的值）绑定到angularjs变量中。</h5>
        <input type="text"  ng-model="name"><br>
        <h5>holle:{{name}}</h5>
        <p ng-bind="name"></p>
        <input type="button" value="angular的双向绑定" ng-click="getname()">
        <h5>angularjs的事件绑定</h5>
        <h5>1.为html元素添加ng-click="事件处理方法"</h5>
        <h5>ng-click指令设置点击事件</h5>
        <h5>2.在控制器中定义事件处理方法:</h5>
        <h5 ng-bind="stuid"></h5>
        <input type="button" value="得到变量的值" ng-click="getstuid()">
    </body>
</html>

五、AngularJS 指令

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

ng-app 指令--初始化一个 AngularJS 应用程序。

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块

            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs对象创建一个控制器
            mytestmodule1.controller('mytestcontroller1',function($scope){
                $scope.testrepeat=function(){
                    //创建一组学生信息
                    $scope.stulist=[{stuid:1001,stuname:"zhangsan",stuage:23,stuaddress:"西安"},
                                {stuid:1002,stuname:"lisi",stuage:24,stuaddress:"北京"},
                                {stuid:1003,stuname:"王五",stuage:25,stuaddress:"上海"}];
                }
              
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller1">
        <h4>ng-repeat指令--会重复一个html元素</h4>
        <h5>实例：在一个表格中输出一组学生信息</h5>
        <input type="button" value="测试ng-repeat指令" ng-click="testrepeat()">
        <table border="1px">
            <tr align="center">
                <td>学生编号</td>
                <td>学生姓名</td>
                <td>学生年龄</td>
                <td>学生地址</td>
            </tr>
            <tr align="center"  ng-repeat="stu in stulist">
                <td>{{stu.stuid}}</td>
                <td>{{stu.stuname}}</td>
                <td>{{stu.stuage}}</td>
                <td>{{stu.stuaddress}}</td>
            </tr>
        </table>
        <p>名字 : <input type="text" ng-model="name"></p>
        <h1>Hello {{name}}</h1>
        <p ng-bind="name"></p>
    </body>
</html>

ng-init指令--页面初始化指令【变量值/对象/数组/方法[控制器中]】

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs模块对象创建一个控制器对象
            mytestmodule1.controller('mytestcontroller1',function($scope){
               $scope.initmethod=function(){
                   alert("页面初始化方法");
               }
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller1" 
    ng-init="name='zhangsan';myobj={perid:1001,pername:'lisisi',perage:23};
    stulist=[{stuid:1001,stuname:'zhangsan',stuage:23,stuaddress:'西安'},{stuid:1002,stuname:'lisi',stuage:24,stuaddress:'北京'}];
    initmethod();">
        <h4>ng-init指令--页面初始化指令【变量值/对象/数组/方法[控制器中]】</h4>
        <h4>ng-init指令--舒适化变量值：{{name}}</h4>
        <h5>ng-init指令--初始化对象{{myobj.perid}}-{{myobj.pername}}-{{myobj.perage}}</h5>
       <ul>
           <li ng-repeat="stu in stulist">
            {{stu.stuid}}--{{stu.stuname}}--{{stu.stuage}}--{{stu.stuaddress}}
           </li>
       </ul>
    </body>
</html>

六、AngularJS 模块

模块--表示一个angularjs应用程序【控制器{变量/方法} / 服务】
模块是应用程序中不同部分的容器
我们在html元素中使用ng-app引入模块，那么模块中的内容就只能在当前html元素中使用
模块是应用控制器的容器。模块可以创建控制器
创建模块: angular.module("模块名称", []);
在指定的html元素上body / div 通过ng-app指令引用模块

例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
        </script>
    </head>
    <body ng-app="mytest1">
        <h4>angularjs模块</h4>
        <h5>模块--表示一个angularjs应用程序【控制器{变量/方法} / 服务】</h5>
        <h5>模块是应用程序中不同部分的容器。<br>
            我们在html元素中使用ng-app引入模块，那么模块中的内容就只能在当前html元素中使用</h5>
        <h5>模块是应用控制器的容器。模块可以创建控制器</h5>
        <h5>创建模块: angular.module("模块名称", []);</h5>
        <h5>在指定的html元素上body / div 通过ng-app指令引用模块</h5>
    </body>
</html>

七、angularjs中的控制器和$cope作用域

AngularJS控制器

AngularJS 应用程序被控制器控制。页面中使用的变量/方法都是定义在控制器中来使用

创建控制器:模块对象.controller('控制器名称',function($scope){})

ng-controller 指令定义了应用程序控制器.我们创建好的控制器需要ng-controller 指令引入到当前页面

控制器中的变量: $scope.变量名称=变量值;

定义的变量可以通过ng-model绑定到html元素上，也可以通过"{{"表达式"}}"显示变量的值到html元素上

注意:变量与html元素的值双向绑定

控制器中的方法: $scope.方法名称=function([参数]){ };

定义的方法可以通过ng-init指令/ng-click指令/控制器内部可以调用。

$scope---Scope(作用域)

是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带

$scope是一个对象，有可用的方法和属性。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs模块对象创建一个控制器
            mytestmodule1.controller("mytestcontroller",function($scope){
                //声明定义变量
                $scope.name="zhangsan";
                //声明一个方法在初始化指令中引用
                $scope.testmethod=function(){
                    alert("testmethod");
                }
                $scope.testclick=function(){
                    alert("testclick")
                }
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller" ng-init="testmethod();">
        <h4>AngularJS控制器</h4>
        <h5>AngularJS 应用程序被控制器控制。页面中使用的变量/方法都是定义在控制器中来使用</h5>
        <h5>创建控制器:模块对象.controller('控制器名称',function($scope){})</h5>
        <h5>ng-controller 指令定义了应用程序控制器.我们创建好的控制器需要ng-controller 指令引入到当前页面</h5>
        <h5>控制器中的变量: $scope.变量名称=变量值;<br>
            定义的变量可以通过ng-model绑定到html元素上，也可以通过"{{"表达式"}}"显示变量的值到html元素上<br>
            注意:变量与html元素的值双向绑定
        </h5>
        <h4>{{name}}</h4>
        <h5>控制器中的方法: $scope.方法名称=function([参数]){  };<br>
            定义的方法可以通过ng-init指令/ng-click指令/控制器内部可以调用。
        </h5>
        <input type="button" value="测试方法" ng-click="testclick();">
        <h4>$scope---Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带</h4>
        <h4>$scope是一个对象，有可用的方法和属性。</h4>
    </body>
</html>