《AngularJS实战》——1.2 开发简单的Angular应用

简介:

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

1.2 开发简单的Angular应用

首先,我们来编写一个简单的Angular应用,参见下列的示例。
示例1-1 编写一个简单的Angular程序
(1)功能描述
当页面加载时,在页面的正文部分显示“Hello,欢迎来到angular世界!”的字样。
(2)实现代码
新建一个HTML文件1-1.html,加入如代码清单1-1所示的代码。
代码清单1-1 第一个简单的Angular程序

<!doctype html>
<html ng-app>
<head>
    <title>第一个简单的angular程序</title>
    <script src="../Script/angular.min.js" 
            type="text/javascript"></script>
</head>
<body>
    {{'Hello,欢迎来到angular世界!'}}
</body>
</html>

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

daad7b0ddec78f6320bc0c7ab036414766dcdab1

(4)源码分析
在本示例的代码中,我们先在元素中增加了一个“ng-app”属性,这一属性的功能是通知引入的Angular文件框架,页面中的哪个部分开始接受它的管理。既然是在元素中增加这个属性,表明Angular可以管理整个页面文件,“ng-app”属性还可以添加至某个

元素中,表明仅在这个
范围内,可以调用Angular框架管理其中包含的DOM元素。
此外,在页面的元素中,使用两个大括号的方式包含了一个字符串,其中两个大括号是Angular框架插入动态数据的一种方式,我们称之为“双花括号插值语法”。在通常情况下,通过这种方式插入的数据均为表达式,并且在插入时已获取了表达式的结果值,并直接将该值显示在页面中。在本实例中,由于表达式是字符串内容,因此,直接显示在页面中。
接下来,我们再来看一个Angular示例,进一步了解Angular数据插入功能。
示例1-2 编写一个具有计算功能的Angular程序
(1)功能描述
当页面加载时,在页面的正文部分通过插入数据的方式计算任意一对数值的和,并将计算后的结果显示在页面中。
(2)实现代码
新建一个HTML文件1-2.html,加入如代码清单1-2所示的代码。
代码清单1-2 一个计算功能的Angular程序
<!doctype html>
<html ng-app>
<head>
    <title>一个计算功能的angular程序</title>
    <script src="../Script/angular.min.js" 
            type="text/javascript"></script>
</head>
<body>
    <h3>计算并显示下列两个数值的和</h3>
    1.98 + 2.98 = {{ 1.98 + 2.98 | number:0}}
</body>
</html>

(3)页面效果
HTML文件1-1.html最终实现的页面效果如图1-3所示。

128c793de0ebb3487262093d98810203d8771072

(4)源码分析
在本示例的代码中,除了在元素中添加“ng-app”属性,表明整个页面代码都由Angular框架进行管理外,在使用双花括号插入数值时,先通过加号“+”运算符计算出两个数值的结果并返回给页面,然后,在计算数值时使用了一个“|”管道符号,这个符号在Angular中表示调用过滤器格式化数据,它的调用方法如下。

{{exp | f?iltername : para1:...paraN}}

在上述调用方法中,exp表示Angular可以识别的任意表达式,f?iltername表示过滤器的名称。
Angular内置了很多的过滤器,如currency、date、number和uppercase等,para1表示对过滤器功能的进一步描述,如示例中的“number:0”表示除掉小数后的数值,保留整数部分。当然,除使用Angular内置的过滤器外,还可以自定义自己的过滤器,具体实现的方式将会在后续的章节中进行详细的介绍。
通过上述两个示例的介绍,相信大家已经被Angular的语法所吸引,更被它“神奇”的数据插入功能所折服。上述两个示例都采用以双花括号插入表达式的形式,将数据添加至页面的模板中,如果将表达式的数据与页面中的元素直接进行绑定,又会发生什么样的事情呢?接下来,我们再来看一个简单的示例。
示例1-3 编写一个绑定页面元素的Angular程序
(1)功能描述
在页面中,先添加一个用于文本输入的元素,并通过Angular指令绑定一个表达式,然后,再添加一个

元素,通过Angular中的双花括号插入相同的表达式,当文本输入框中的内容变化时,
元素插入的内容也随之发生变化。
(2)实现代码
新建一个HTML文件1-3.html,加入如代码清单1-3所示的代码。
代码清单1-3 一个绑定页面元素的Angular程序
<!doctype html>
<html ng-app>
<head>
    <title>一个绑定页面元素的angular程序</title>
    <script src="../Script/angular.min.js" 
            type="text/javascript"></script>
</head>
<body>
    <h3>请在下列文本框中输入任意内容</h3>
    <div ng-controller="usercontroller">
        <input id="Text1" type="text" ng-model="user.name" />
        <div>{{user.name}}</div>
    </div>
    <script type="text/javascript">
        function usercontroller($scope) {
            $scope.user = { name: "" };
        }
    </script>
</body>
</html>

(3)页面效果
HTML文件1-3.html最终实现的页面效果如图1-4所示。

(4)源码分析
在本示例的源代码中,在元素中添加了“ng-app”属性,表明Angular可以管理整个页面。此外,向

元素添加了一个名为“ng-controller”的属性,该属性是Angular的另外一个指令,用来声明Angular中控制器类的名称,并且这个被声明的类将管理
中的全部元素。

06768674002d9addc379cd7a71f5d889fc450e2e

接下来,再向文本框元素添加一个“ng-model”属性,绑定逻辑层中的user.name数据,并同时通过双花括号向页面中的另外一个

元素插入相同的user.name内容。在Angular中,使用“ng-model”方式绑定数据是双向变化的,即如果数据源发生了变化,被绑定的元素中的内容也将会自动进行同步变化,反之,数据源也会随被绑定的元素值的变化而变化。
因此,当用户在文本框中输入任意内容时,改变了绑定的数据源,而其他插入的相同数据源也将随之进行同步,页面插入的user.name内容也将跟随变化,而实现这一切,都无需注册任何文本框的change事件去监听,就可以让页面中的元素绑定的数据自动刷新。
这一特征也同样适用于服务器端的更新,即当我们向服务器请求一个数据时获取了最新的user.name值,而在页面中绑定的输入框内容和插入显示的数据也将会同时自动更新为最新值。
除此之外,Angular还可以通过数据绑定的方式,将重复格式的多项数据内容显示在页面各个元素中,接下来我们再通过一个简单的示例来进行说明。
示例1-4 编写一个绑定多个页面元素的Angular程序
(1)功能描述
在页面中,通过Angular中的数据元素绑定的方式,将一个数组集合中的各项元素与页面中的多个 元素绑定,并通过遍历的方式将全部数据插入至页面的模板中。
(2)实现代码
新建一个HTML文件1-4.html,加入如代码清单1-4所示的代码。
代码清单1-4 一个绑定多个页面元素的Angular程序
<!doctype html>
<html ng-app>
<head>
    <title>一个绑定多个页面元素的angular程序</title>
    <script src="../Script/angular.min.js" 
            type="text/javascript"></script>
</head>
<body>
    <h3>以列表的方式显示绑定的多项数据</h3>
    <div ng-controller="stucontroller">
       <ul>
          <li ng-repeat="stu in data">
              <span>{{stu.name}}</span>
              <span>{{stu.sex}}</span>
              <span>{{stu.age}}</span>
              <span>{{stu.score}}</span>
          </li>
       </ul>
    <div>
    <script type="text/javascript">
        function stucontroller($scope) {
            $scope.data = [
            { name: "张明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "刘小华", sex: "男", age: 28, score: 86 },
            { name: "陈忠忠", sex: "男", age: 23, score: 97 }
            ];
        }
    </script>
</body>
</html>

(3)页面效果
HTML文件1-4.html最终实现的页面效果如图1-5所示。

84f61b20f7bf08654cadeca17e36609b729145f3

(4)源码分析
在本示例的源代码中,除在

元素中声明的控制器管理类“stucontroller”之外,还在元素中添加了一个名为“ng-repeat”的属性,该属性是Angular的一个新指令,表示复制的意思,即对于“data”数组中的每个元素,都会将元素中的结构复制一次,在每次复制使用时,再将“stu”的属性值赋予复制的中各个元素。因此,“data”数组中的数量与复制后的元素的数量是一致的,并且在每次复制成功之后,都将数组中的各个元素内容通过双花括号的方式插入到元素中,从而实现了在元素中显示全部“data”数组内容的功能。
而当“data”数组中的源数据发生变化后,使用双花括号绑定的数据内容也将会随之发生变化,而这些变化,在Angular中都是自动完成的,无须注册任何监测的事件。
相关文章
|
3月前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
189 58
|
2月前
|
缓存 监控 JavaScript
Angular 应用打包和部署
【10月更文挑战第16天】Angular 应用的打包和部署是一个综合性的过程,需要考虑多个方面的因素。通过合理的打包和部署策略,可以确保应用在生产环境中稳定运行,并为用户提供良好的体验。你需要根据实际情况选择合适的部署方式,并不断优化和改进部署流程,以适应业务的发展和变化。
|
4月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
54 0
|
4月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
50 0
|
4月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
59 0
|
4月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
72 0
|
4月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
43 0
|
4月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
70 0
|
4月前
|
开发者 Java 存储
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
41 0
|
4月前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
56 0