在开始做第一个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)...
[完成的] 将分页添加到您从第一个功能显示的 Github 存储库问题表中。 可以指定每页的项目数。 对于给定的页面大小,确保您从服务器查询的数据永远不会超过您必须在给定页面上显示的问题所需的数据。 [完成的] 实施...
angularjs-deckconf-教程我已经使用...Node.js和MongoDB 在第二个控制器中,我建立了一个简单的“ view”应用程序,它使用node.js与mongodb本地数据库进行接口,以通过一个小的下拉菜单打印出其中包含的所有卡片组。
启动您的第一个AngularJS应用程序该项目是使用角晶锅炉板创建的。 Seed只是快速引导标准AngularJS应用程序的样板。 该项目的文件夹结构是非常重要的部分,克隆存储库后每个人都应检查。 一旦了解了项目的主要体系...
指令:* small-iscroll该指令需要一个ID属性,并将父级和第一个子级设置为绝对位置。 还可以设置隐藏在父级上的溢出。您可以传递以下属性来配置指令:refreshInterval:'@',(默认值:200ms)config:'=',(默认值...
注意: Node.js MongoDB AngularJSWeb开发((中文版))pdf 由于文件比较大,次分为三部分上传,下载好三部分之后,放在同一个文件夹下,进行解压即可,另外两部分地址为: part2:...
多拉多拉观察者哟一个书签,...执照麻省理工学院致谢通过原始想法bookmarklet.js 使用构建变更日志0.0.2 - 使用 querySelectorAll 和 jqLite,支持多个 Angular 应用程序0.0.1 - 第一个版本,移除了 jQuery 依赖
音板 In-Dash SoundCloud 概念...###使用的第三方库该项目使用“plangular”库,这是一个使用 AngularJS 的 SoundCloud 自定义指令。 ###APIs 使用此应用程序使用的唯一 API 是 SoundCloud。 在此处阅读更多信息: :
#魔镜 受这个酷项目启发的基于 Node/AngularJS 的 RaspberryPi 项目: : 。 该项目目前正在开发中。进行中实现服务器端“日历”模块(带有可配置的 ical url),它返回可配置的事件元数据集。 (此时模块以 ical ...
配置AngularJs应用程序,记录用户交互。 轻松确定在AngularJs Web应用程序中执行的代码。 1.按“记录”按钮。 2.与您的Web应用程序进行交互。 3.按“停止”,它将显示从该交互中执行的代码。 有助于调试Web应用程序...
配置文件AngularJs应用程序,记录用户交互 轻松确定在AngularJs Web应用程序中执行的代码。 1.按“记录”按钮。 2.与您的Web应用程序进行交互。 3.按“停止”,它将显示从该交互中执行的代码。 有助于调试Web应用...
##第1章 AngularJS简介 概念 客户端模板 模型, 视图, 控制器(MVC) 数据绑定 依赖注入 指令 示例: 购物车 小结 ##第2章 AngularJS应用程序剖析 引用Angular 加载脚本 使用ng-app声明Angular界限 模型, 视图, 控制器 ...
该文档是第一份且不完整的草案。 要实时查看样本,请转到 在本地安装源/运行样本 有关基本演示,请参阅的自述文件。 历史/出处 Couch Potato起源于但已成长为支持分层依赖关系的功能,并具有易用性和效率优化功能...
是一个jQuery插件,可将元素的内容转换为简单的<svg>图表。 这是AngularJS指令,通过将数据和选项绑定到控制器,使它们易于在任何项目中使用。 安装 该项目及其所有依赖项都通过 bower install ng-peity : ...
angular-seed — AngularJS 应用程序的种子只是使用 cloud9 (c9.io) 和 github 玩... git commit -m "第一次提交" git push -u origin master github 中包含的 .c9 文件夹面临的另一个问题要忽略添加 .gitignore 文件并
Angular-Util.zip,Util是一个.net core平台下的应用框架,旨在提升小型团队的开发输出能力,由常用公共操作类(工具类)、分层架构基类、Ui组件,第三方组件封装,第三方业务接口封装,配套代码生成模板,权限等组成。...
Asciidocular是一个小型AngularJS Web应用程序,可通过Ajax加载文件并将其呈现为完整的网站。 Asciidocular使用将AsciiDoc文件转换为HTML。 Asciidocular可用于创建您的项目或API的文档站点。 例如,您可以结合使用...
- 页眉 -> 第一页,第二页, 第三页 -> 脚本 # 单页面技术: -AngularJS是一个全面的客户端侧框架。其模板基于双向UI数据绑定。数据绑定是一种自动方法,在模型改变时更新视图,以及在视图改变时更新模型。其HTML...
婚礼桌规划师网站 ... 它将在第一次启动时安装JDK 8。 在创建一个帐户。 创建一个DIY应用程序: rhc app-create weddingtablesplanner diy-0.1 --from-code git://github.com/juanignaciosl/wedding-tab
顺便说一句,第一次提交已经用一个简单的 JavaScript 解决方案完成了要求,但真正的乐趣是将所有代码移植到 AngularJS,看到前端开发的魔力并学到很多:)引擎盖下该文档由 AngularJS 提供支持,整个主体范围与唯一的...