《AngularJS实战》——2.3 Angular中的模板-阿里云开发者社区

开发者社区> 华章计算机> 正文

《AngularJS实战》——2.3 Angular中的模板

简介:
+关注继续查看

本节书摘来自华章出版社《AngularJS实战》一 书中的第2章,第2.3节,作者:陶国荣,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.3 Angular中的模板

Angular自身提供了一整套完整的模板系统,配合$scope对象和数据双向绑定机制,将页面纯静态元素经过行为、属性的添加和格式的转换,最终变成在浏览器中显示的动态页。
在模板系统中,可以包含Angular的指令、数据绑定、表单控件和过滤器,同时,在处理复杂程序时,可以构建多个模板页面作用于视图层。在主页中,再通过包含(include)的方式加载这些零散的模板页。这样做的好处在于,一次定义可多处调用,增加代码的重复使用,减少维护成本。

2.3.1 构建模板内容

构建模板的内容是使用模板功能的前提,一般通过下列几种方式来实现。
直接在页面中添加元素和Angular指令,依赖控制器中构建的属性和方式绑定模板中的元素内容和事件,实现应用需求。
通过“type”类型为“text/ng-template”的

<!doctype html>
<html ng-app="a2_9">
<head>
    <title>构建模板内容</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
</head>
<body>
    <script type="text/ng-template" id="tplbase">
        姓名:{{ name }},<br />邮箱:{{email}}
    </script>
    <div ng-include src="'tplbase'" ng-controller="c2_9"></div>
    <script type="text/javascript">
        var a2_9 = angular.module('a2_9', []);
        a2_9.controller('c2_9', ['$scope', function ($scope) {
            $scope.name = '陶国荣';
            $scope.email = 'tao_guo_rong@163.com';
        }]);
    </script>
</body>
</html>

(3)页面效果
执行HTML文件2-9.html,最终实现的页面效果如图2-9所示。

dbaa1d122ad87fc3b9be3e11916a3ebfc1984635

(4)源码分析
在本示例的源码中,先添加一个“type”类型为“text/ng-template”的

2.3.2 使用指令复制元素

在构建模板内容的过程中,有时需要反复将不同的数据加载到一个元素中,例如,通过

元素绑定一个数组的各成员。此时,可以使用“ng-repeat”指令,它的功能是根据绑定数组成员的数量,复制页面中被绑定的元素,并在复制过程中添加元素相应的属性和方法,通过这种方式,实现数组数据与元素绑定的过程。
在使用“ng-repeat”指令复制元素的过程中,还提供了几个非常实用的专有变量,可以通过这些变量来处理显示数据时的各种状态。这些变量的功能分别如下。
$f?irst,该变量表示记录是否是首条,如果是则返回true,否则返回false。
$last,该变量表示记录是否是尾条,如果是则返回true,否则返回false。
$middle,该变量表示记录是否是中间条,如果是则返回true,否则返回false。
$index,该变量表示记录的索引号,其对应的值从0开始。
接下来,通过一个示例来演示使用“ng-repeat”指令复制元素的过程。
示例2-10 使用指令复制元素
(1)功能描述
在页面中,通过元素显示一个数组中的全部成员数据,并且在显示数据时列出当条记录是否为“首条”和“尾条”记录的状态信息。
(2)实现代码
新建一个HTML文件2-10.html,加入如代码清单2-10所示的代码。
代码清单2-10 使用指令复制元素
<!doctype html>
<html ng-app="a2_10">
<head>
    <title>使用指令复制元素</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
        ul {
            list-style-type: none;
            width:400px;
            margin: 0px;
            padding: 0px
        }
            ul li {
                f?loat: left;
                padding: 5px 0px;
            }
                ul li span {
                    width: 50px;
                    f?loat: left;
                    padding: 0px 10px;
                }
    </style>
</head>
<body>
    <div ng-controller="c2_10">
        <ul>
            <li>
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>是否首条</span>
                <span>是否尾条</span>
            </li>
            <li ng-repeat=" stu in data">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{$f?irst?'是':'否'}}</span>
                <span>{{$last?'是':'否'}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a2_10 = angular.module('a2_10', []);
        a2_10.controller('c2_10', ['$scope', function ($scope) {
            $scope.data = [
            { name: "张明明", sex: "女" },
            { name: "李清思", sex: "女" },
            { name: "刘小华", sex: "男"},
            { name: "陈忠忠", sex: "男" }
            ];
        }]);
    </script>
</body>
</html>

(3)页面效果
执行HTML文件2-10.html,最终实现的页面效果如图2-10所示。

dfc8df966ac4574c29c78af02afb85859f33b2fd

(4)源码分析
在本示例的源码中,首先,在对应页面的控制器代码中,以$scope属性的方式添加了一个名为“data”的数组,用作页面中

元素绑定的数据源;然后,在页面中添加
  • 元素,并在该元素中再添加两个
  • 元素,第一个用于标题显示,第二个用于绑定“data”数组内容。
    在用于绑定“data”数组内容的第二个
  • 元素中,调用Angular中的“ng-repeat”指令完成数据与页面元素的绑定。在绑定过程中,Angular先遍历“data”数组,在遍历时复制一份
  • 元素,并通过“stu”对象将控制器中的属性和方法添加至该元素中,在遍历完成后便生成了与数组成员数量对应的
  • 元素,并且在这些元素中也添加了需要显示的内容和方法,从而最终实现以列表方式显示集合数据的功能。
    在通过“ng-repeat”指令复制元素过程中,可以通过表达式的方式直接调用Angular提供的几个专用的变量$f?irst、$middle、$last和$index。由于这些变量均返回布尔值,因此,可以根据返回的布尔值,再借助“?:”运算符转成中文显示的文字内容,实现的过程如本示例中的源码所示。

    2.3.3 添加元素样式

    在Angular中,添加元素的样式也非常简单,概括起来可以通过下列几种方式来进行。
    (1)直接绑定值为CSS类别名称的$scope对象属性
    这种方式的操作非常简单,先在控制器中添加一个值为CSS类别名称的属性,然后在页面元素的class或ng-class属性值中,通过双花括号方式绑定属性名即可,如以下代码。

    $scope.red="red";

    上述代码表示在控制器中添加了一个名为“red”的属性,它的属性值是名为“red”的CSS类别名。在添加完“red”属性后,在页面中可以通过下列代码进行调用。

    <div ng-class="{{red}}"></div>

    等价于下列代码:

    <div class="{{red}}"></div>

    这种方式操作起来虽然简单,但在控制器中定义CSS类别名称,并不是Angular所提倡的,我们在开发Angular应用时,尽量保证控制器的代码都是处理业务逻辑,并不涉及页面元素。
    (2)以字符串数组方式选择性添加CSS类别名称
    这种方式将根据控制器中一个布尔类型的属性值来决定页面中元素添加的CSS样式名,当该属性值为true时,添加一个CSS样式名,当属性值为false值时,添加另外一个CSS样式名。下列代码添加一个名为“blnfocus”属性,由它决定页面中

    元素的样式。
    $scope.blnfocus=true;

    接下来在页面的

    元素中添加ng-class属性,并在属性值中通过字符串数组方式来添加CSS类别名称,代码如下。
    <div ng-class="{true:'red',false:’green’}[blnfocus]"></div>

    在上述代码中,

    的CSS样式取决于“blnfocus”属性值,当该值为true时,添加“red”样式名,当该值为false时,添加“green”样式名。这种方式只能在两种样式中选择一种,并且{}和[]顺序不可颠倒。在{}中设置可选择的两种样式名称,在[]中放置控制样式的属性名。
    (3)通过定义key/value对象的方式来添加多个CSS类别名称
    与前面介绍的两种添加CSS类别名的方法相比,第三种方法的功能要强大很多,它可以根据控制显示样式的属性值添加多个样式名。例如,先添加两个用于控制样式显示的“a”和“b”属性,这两个属性的类型均为布尔型,代码如下。
    $scope.a=false;
    $scope.b=true;

    接下来在页面的

    元素中,添加ng-class属性。在设置属性值时,通过定义key/value对象的方式来添加多个CSS样式名,代码如下。
    <div ng-class="{'red':a ,'green':b}"></div>

    在上述ng-class属性值设置过程中,样式名“red”和“green”分别为“key”值,属性值“a”和“b”分别为对应的“value”值。当“value”属性值为true时,则添加对应的“key”即CSS样式名。因此,这种方式可以实现添加多种CSS样式名称,适合在处理复杂样式时使用。
    此外,在Angular中,还有另外两个用于添加样式的页面指令,分别为“ng-class-odd”和“ng-class-even”,这两个样式指令是专用于以列表方式显示数据,对应奇数行与偶数行的样式。
    接下来,通过一个完整的示例来详细介绍样式在页面中的使用。
    示例2-11 添加元素样式
    (1)功能描述
    在示例2-10的基础之上,在样式方面增加3个功能。首先,将第一个

  • 元素中显示的字体加粗;其次,添加“ng-class-odd”和“ng-class-even”两个指令,实现列表的隔行变色的功能;最后,当单击某行
  • 的元素时,显示相应的背景色。
    (2)实现代码
    新建一个HTML文件2-11.html,加入如代码清单2-11所示的代码。
    代码清单2-11 添加元素样式
    <!doctype html>
    <html ng-app="a2_11">
    <head>
        <title>添加元素样式</title>
        <script src="../Script/angular.min.js"
                type="text/javascript"></script>
        <style type="text/css">
            body {
                font-size: 12px;
            }
            ul {
                list-style-type: none;
                width: 408px;
                margin: 0px;
                padding: 0px
            }
                ul li {
                    f?loat: left;
                    padding: 5px 0px;
                }
                ul .odd {
                    color:#0026ff;
                }
                ul .even {
                    color:#ff0000;
                }
                ul .bold{
                    font-weight:bold;
                }
                ul li span {
                    width: 52px;
                    f?loat: left;
                    padding: 0px 10px;
                }
                ul .focus {
                    background-color:#cccccc;
                }
        </style>
    </head>
    <body>
        <div ng-controller="c2_11">
            <ul>
                <li ng-class="{{bold}}">
                    <span>序号</span>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>是否首条</span>
                    <span>是否尾条</span>
                </li>
                <li ng-class-odd="'odd'" 
                    ng-class-even="'even'" 
                    ng-repeat=" stu in data"
                    ng-click='li_click($index)' 
                    ng-class='{focus: $index==focus}'>
                    <span>{{$index+1}}</span>
                    <span>{{stu.name}}</span>
                    <span>{{stu.sex}}</span>
                    <span>{{$f?irst?'是':'否'}}</span>
                    <span>{{$last?'是':'否'}}</span>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var a2_11 = angular.module('a2_11', []);
            a2_11.controller('c2_11', ['$scope', function ($scope) {
                $scope.bold = "bold";
                $scope.li_click = function (i) {
                    $scope.focus = i;
                };
                $scope.data = [
                { name: "张明明", sex: "女" },
                { name: "李清思", sex: "女" },
                { name: "刘小华", sex: "男" },
                { name: "陈忠忠", sex: "男" }
                ];
            }]);
        </script>
    </body>
    </html>

    (3)页面效果
    执行HTML文件2-11.html,最终实现的页面效果如图2-11所示。

    cb0d7c0ba663b088f4e031da3c69e57e22b117c4

    (4)源码分析
    在本示例的源代码中,首次定义了名称为“odd”、“even”、“bold”和“focus”的4个样式,分别用于隔行时的两种字体色、标题栏字体变粗和单击某行时的背景色。
    其次,在示例的控制器代码中,除添加“data”数组集合外,再添加了一个“bold”属性,用于指定加粗显示字体时的样式名。另外,还添加了一个带参数的“li_click”方法,当调用该方法时,将“focus”属性值设为传入参数值。
    再有,在示例的页面代码中,先通过双花括号方式将第一个

  • 元素的“ng-class”值与“bold”属性值绑定,由于该值指定的是一个加粗时的样式名,因此,在绑定后,
  • 元素中的字体变粗;然后,使用“ng-class-odd”和“ng-class-even”样式指令分别绑定奇数和偶数行的样式名,实现隔行换色的功能;最后,在
  • 元素的单击事件中,将执行$scope对象中添加的“li_click()”方法,在该方法中将“$index”(行号值)作为实参传给方法,并且将“focus”属性值设置为“$index”值。因此,当单击某行
  • 元素时,“focus”属性值将变为相应的“$index”值。
    最后,在示例页面
  • 元素的“ng-class”样式指令值中通过key/value对象的方式指定该元素需要添加的样式。由于单击
  • 元素时,“$index”变量值和“focus”属性值相同,也就是说,表达式“$index==focus”的返回值为true。因此,“ng-class”样式指令值变为“focus”,最终实现当单击
  • 元素时,添加背景样式的页面效果。

    2.3.4 控制元素的隐藏与显示状态

    在Angular中,可以通过“ng-show”“ng-hide”和“ng-switch”指令来控制元素隐藏与显示的状态,前两个指令直接控制元素的显示和隐藏状态,当“ng-show”值为true或“ng-hide”值为false时,元素显示,反之,元素隐藏。
    后一个“ng-switch”指令的功能是显示匹配成功的元素,该指令需要结合“ng-switch-when”和“ng-switch-defalut”指令使用。在“ng-switch”指令中,当指定的“on”值与某个或多个添加“ng-switch-when”指令的元素匹配时,这些元素显示,其他未匹配的元素则隐藏。如果没有找到与“on”值相匹配的元素时,则显示添加了“ng-switch-defalut”指令的元素。
    接下来,通过一个示例来演示控制元素隐藏或显示状态的过程。
    示例2-12 控制元素的隐藏与显示状态
    (1)功能描述
    在页面中,调用“ng-show”“ng-hide”和“ng-switch”指令绑定$scope对象的属性值,控制

  • 元素显示或隐藏的状态。
    (2)实现代码
    新建一个HTML文件2-12.html,加入如代码清单2-12所示的代码。
    代码清单2-12 控制元素的隐藏与显示状态
    <!doctype html>
    <html ng-app="a2_12">
    <head>
        <title>控制元素显示和隐藏的状态</title>
        <script src="../Script/angular.min.js"
                type="text/javascript"></script>
        <style type="text/css">
            body {
                font-size: 12px;
            }
            ul {
                list-style-type: none;
                margin: 0px;
                padding: 0px
            }
            div {
                margin: 8px 0px;
            }
        </style>
    </head>
    <body>
        <div ng-controller="c2_12">
            <div ng-show={{isShow}}>陶国荣</div>
            <div ng-hide={{isHide}}>tao_guo_rong@163.com</div>
            <ul ng-switch on={{switch}}>
                <li ng-switch-when="1">陶国荣</li>
                <li ng-switch-when="2">tao_guo_rong@163.com</li>
                <li ng-switch-default>更多...</li>
            </ul>
        </div>
        <script type="text/javascript">
            var a2_12 = angular.module('a2_12', []);
            a2_12.controller('c2_12', ['$scope', function ($scope) {
                $scope.isShow = true;
                $scope.isHide = false;
                $scope.switch = 3;
            }]);
        </script>
    </body>
    </html>

    (3)页面效果
    执行HTML文件2-12.html,最终实现的页面效果如图2-12所示。

    9dada575901ab31114eac330ad112a4e592da04a

    (4)源码分析
    在本示例的源代码中,前两个

    元素分别添加了“ng-show”和“ng-hide”,并通过双花括号绑定了“isShow”属性和“isHide”属性,这两个属性在控制器中添加时的值分别为true和false,因此,这两个
    元素都将显示在页面中。
    此外,在添加“ng-switch”指令的
    • 元素中,由于“on”值绑定了“switch”属性,而该属性在控制器中添加时的值为3,并且在页面中添加了“ng-switch-when”指令的
    • 元素中,没有找到“ng-switch-when”指令值为3的元素,因此,只能显示添加了“ng-switch-default”指令的
    • 元素,即最后一行显示内容为“更多…”的
    • 元素,最终显示效果如图2-12所示。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7995 0
Auto Scaling 通过启动模板来使用伸缩服务
功能说明 AutoScaling伸缩组长期依赖的伸缩配置信息本质上就是Ecs实例配置,考虑到Ecs推出了持久化Ecs实例配置的启动模板,因此AutoScaling 将伸缩组与启动模板结合,用户可以通过直接在创建伸缩组时选择启动模板来使用弹性伸缩 伸缩组使用启动模板的默认版本与最新版本而非指定版本时.
3102 0
数据进入Maxcompute的N种方式,大数据实战Demo系统数据上云实践
2018 “MaxCompute开发者交流”钉钉群直播分享,由阿里云数据技术专家彬甫带来以“数据进入MaxCompute的N种方式”为题的演讲。本文讲述了在阿里云内部开发了一个实战Demo系统,它能够实现自动全链路的大数据处理流程,其中包括离线的和实时数据的,接下来将为大家揭晓实战Demo系统是怎样实现自动全链路的大数据处理流程的。
4727 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9763 0
JSTL 模板中 &lt;c:forEach&gt; 标签详解
详解 标签的语法定义如下所示。                                                 body content                                标签具有以下一些属性:l            var:迭代参数的名称。
798 0
python设计模式(十四):模板方法模式
定义一个算法或者流程,部分环节设计为外部可变,用类似于模板的思想来实例化一个实体,可以往模板中填充不同的内容;在模板思想下,实体的整体框架是确定的,他是一个模板,但是模板下内容可变,从而实现了动态的更新流程或算法。
757 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载