在开始做第一个AngularJS app之前,你需要知道AngularJS其中的一些不同组件。以下是必须了解的:
1. Model:展示给用户的数据。是简单的POJO。
2. View:这是用户访问你的页面时看到的,也就是原始的HTML牵涉到一些 directives和expressions被编译后并且链接了正确的scope后的结果。
3. Controller:驱动你的应用的业务逻辑。
4. Scope:就是一个context,其中存有 data models和functions。一个controller常常在scope中设置这些models和functions。
5. Directives:它会教html新的语法。它扩展了Html,利用定制的元素和属性。
6. Expressions:在HTML中的{{}}就是表达式。它可以用来访问scope models以及functions。
7. Template:就是HTML加上一些额外的标签,形式如指令和表达式。
好了,说的够多了,接下来开始开发这个程序。
目标:创建一个HTML,询问用户的年薪以及它们愿意花费其中的百分之多少用来购物。所以要有2个输入框,一个用于工资,一个用于百分比。还需要一个<span>标签,用于显示计算结果。只要任何输入框的值变了,结果就会立即更新。
如何实现:如果纯粹用js或jQuery,你会怎么做呢?html搞好后,给输入框注册keyup事件的回调函数。在回调函数中,读取输入框的值,计算结果,设置<span>标签的innerHTML属性为计算的结果。
但是用AngularJS的话,根本一行JS都不需要写。在下载的angular-seed-master里的app目录中,新建一个文件叫 test.html。内容如下:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>My First AngularJS App</title>
</head>
<body ng-init="salary=0;percentage=0">
Your Salary?
<input type="text" ng-model="salary">
<br/>How much should you invest in gadgets?
<input type="text" ng-model="percentage">%
<br/>The amount to be spent in shopping will be:
<span>{{salary*percentage*0.01}}</span>
<script src="lib/angular/angular.js"></script>
</body>
</html>
现在要访问这个页面,我们需要一个web服务器,要运行Angular Seed自带的web服务器,你还需要安装了Node.js。要测试是否成功安装了Node.js,在命令行中输入node,回车,就能知道了。
运行web服务器:在命令行中,转到angular-seed-master目录中,执行命令:node scripts/web-server.js,
会在8000端口上启动服务器。
访问我们新建的html:http://localhost:8000/app/test.html
就这么简单,所以AngularJS很适合快速web应用开发。
1. An AngularJS application bootstraps with the ng-app attribute (actually, it's a directive).
2. ng-init 初始化你的数据模型。
3. ng-model 将一个输入框和模型数据绑定在一起,这建立起了一个双向绑定。
4. The main purpose of an expression is binding the model data to the view uni-directionally; 也就是从模型同步到视图。
The beautiful thing is that the expression is re-evaluated each time any of the data models it depends on changes.
相关推荐
1 AngularJS与小程序架构比较 整体架构设计异同点: 1、都是基于单页应用设计思想来做的整体框架设计;小程序更极端,整个应用就是一个大模块,里面所有页面都是子模块页面; 2、都将每个页面分为页面结构(.wxml)...
AngularJS 1.3 是一个历史悠久且广泛使用的前端JavaScript框架,由Google开发并维护,用于构建动态Web应用程序。这个框架以其MVC(Model-View-Controller)架构模式、数据绑定和依赖注入等特性而著名,极大地提高了...
在本文中,我们将深入探讨如何使用AngularJS进行文件上传,这是一种强大的前端JavaScript框架,它提供了构建动态Web应用程序所需的各种功能。由于我们不依赖任何第三方插件,因此这种方法保证了更好的兼容性和更少的...
##### 第一个AngularJS程序 1. 使用Node.js、npm和bower搭建开发环境。 2. 使用命令行安装AngularJS:`bower install --save angular` 3. 创建目录结构。 4. 引入AngularJS。 5. 声明Angular模块并初始化程序。 6. ...
这个版本是 AngularJS 1.x 系列的一个稳定更新,提供了许多改进和修复,使得开发者能够更高效地开发和维护复杂的应用。 ### 1. 组件化开发 AngularJS 1.5 引入了组件的概念,这使得应用结构更加清晰,代码复用性...
创建第一个AngularJS应用,首先新建一个工程,并将AngularJS库文件复制到工程目录下。接着,我们需要创建一个HTML5页面,通过`<script>`标签引入angular.js库。在HTML文件中,`ng-app`指令用于标识AngularJS的应用...
[完成的] 将分页添加到您从第一个功能显示的 Github 存储库问题表中。 可以指定每页的项目数。 对于给定的页面大小,确保您从服务器查询的数据永远不会超过您必须在给定页面上显示的问题所需的数据。 [完成的] 实施...
AngularJS,作为一个强大的前端JavaScript框架,由Google维护,主要用于构建单页面应用程序(SPA)。它通过双向数据绑定、依赖注入、指令系统等特性,极大地简化了Web开发流程。下面我们将深入探讨AngularJS 1.x中的...
angularjs-deckconf-教程我已经使用...Node.js和MongoDB 在第二个控制器中,我建立了一个简单的“ view”应用程序,它使用node.js与mongodb本地数据库进行接口,以通过一个小的下拉菜单打印出其中包含的所有卡片组。
AngularJS是一款由Google维护的前端JavaScript框架,用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,极大地简化了客户端应用开发。AngularJS的核心特性包括数据绑定、依赖注入、指令系统和...
**Reservas-WebApp** 是一个基于 **AngularJS** 框架构建的Web应用程序,主要专注于提供一种用户友好的界面来实现特定的功能。AngularJS是Google维护的一个强大的前端JavaScript框架,它允许开发者构建动态、数据...
整合RequireJS和AngularJS的第一步是配置RequireJS。我们需要在项目中创建一个主配置文件,如`main.js`,在这个文件中,我们可以定义模块路径,指定哪些模块是应用的入口点,以及如何加载AngularJS本身: ```...
在移动应用开发中,AngularJS 和 Ionic 框架的结合使用可以构建出功能强大的混合应用程序,特别是对于创建用户界面和交互式应用来说。本文将深入探讨如何在 AngularJS 和 Ionic 中实现图片的浏览、显示以及缩放功能...
AngularJS 是一个强大的JavaScript框架,由Google维护,用于构建动态Web应用。它通过MVC(模型-视图-控制器)架构模式简化了前端开发,使得开发者能够更加高效地组织和管理代码。AngularJS的核心特性包括数据绑定、...
标题 "小型的基于Nodejs + HTML5 + Angularjs的FM网站.zip" 描述了一个使用现代Web技术构建的小型网络应用程序,特别关注了HTML5、Node.js和AngularJS的结合使用。这个项目可能是一个在线音乐平台或者电台服务,因为...
然而,AngularJS的一个显著缺点是其数据绑定机制对性能的影响。当页面上有大量监听器($$watchers)时,每次模型变更都会触发$digest循环,导致性能下降。因此,优化AngularJS应用显得尤为重要。 以下是一些实用的...
启动您的第一个AngularJS应用程序该项目是使用角晶锅炉板创建的。 Seed只是快速引导标准AngularJS应用程序的样板。 该项目的文件夹结构是非常重要的部分,克隆存储库后每个人都应检查。 一旦了解了项目的主要体系...
指令:* small-iscroll该指令需要一个ID属性,并将父级和第一个子级设置为绝对位置。 还可以设置隐藏在父级上的溢出。您可以传递以下属性来配置指令:refreshInterval:'@',(默认值:200ms)config:'=',(默认值...
AngularJS 是一个由 Google 主导开发的前端 JavaScript 框架,主要用于构建单页应用程序(SPA)。它提供了一种声明式编程方式,使得开发者可以更加专注于应用逻辑,而无需关注底层DOM操作。在"pizza-time"这个项目中...
1. 第一个CSS代码块定义了一种字体样式,包括斜体、无衬线字体、中等粗细、小型大写字母和140%行高。 2. 第二个CSS代码块定义了一个列表样式,包括内部符号、方形符号、自定义图像以及内边距。 3. 第三个CSS代码块...