【AngularJS】—— 3 我的第一个AngularJS小程序
通过前面两篇的学习，基本上对AngularJS的使用有了一定的了解。
本篇将会自己手动写一个小程序，巩固下理解。
首先要注意的是，引用AngularJS的资源文件angular.min.js文件。
由于这个框架是Google的工作人员开发的，因此国内访问的时候，会被墙导致无法下载资源文件。
因此，可以使用百度开源的静态链接：
http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js
代替原来的国外的资源文件链接：http://code.angularjs.org/angular-1.0.1.min.js
解决了资源文件的下载问题，就可以手动编写小程序了：
<!doctype html>
<html ng-app>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="testCtrl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>num1</td><td>num2</td></tr>
<tr>
<td><input type="number" min="0" max="10" ng-model="number1" required ></td>
<td><input type="number" min="2" max="10" ng-model="number2" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{number1 * number2 | currency}}
</div>
<script>
function testCtrl($scope) {
$scope.number1 = 2;
$scope.number2 = 5.6;
}
</script>
</body>
</html>
首先分析一下代码：
1 在<head>中我们首先 加载了angularjs的js文件。
2 在html标签中，定义了 ng-app 应用程序，意思是angularjs的作用范围是真个html。类似地，如果在div中定义ng-app，那么就只能在这个div中使用angularjs了。
3 在div中定义了一个 控制器 ，该控制器的采用构造函数的方法，在脚本中初始化两个变量。
4 table中，采用 ng-model ，绑定数据元素number1,number2。
5 在div的结束部分，通过 {{表达式}} 产生结果，这里并没有任何的方法调用，完全是动态的根据ng-model所绑定的值，自动改变。
6 通过currency 过滤器 ，展现成为货币格式。
运行结果：
【AngularJS】—— 3 我的第一个AngularJS小程序的更多相关文章
- 手把手教你写一个RN小程序!
时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
- 第一个mpvue小程序开发总结
前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...
- 搭建Spring开发环境并编写第一个Spring小程序
搭建Spring开发环境并编写第一个Spring小程序 2015-05-27 0个评论 来源:茕夜 收藏 我要投稿 一.前面,我写了一篇Spring框架的基础知识文章,里面没 ...
- Day1：第一个python小程序
Day1:第一个python小程序与开发工具Pycharm 一.Hello World C:\Users\wenxh>python Python 3.6.2 (v3.6.2:5fd33b5, J ...
- 第一个servlet小程序
第一个servlet小程序 com.fry.servlet.HelloServlet package com.fry.servlet; import javax.servlet.ServletExce ...
- 一个支付宝小程序在一段时间内只能保留一个 WebSocket 连接
一个支付宝小程序在一段时间内只能保留一个 WebSocket 连接 my.connectSocket - 支付宝开放平台 https://opendocs.alipay.com/mini/api/vx ...
- 快速了解微信小程序的使用，一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 一个Hibernate小程序
基本步骤 在前一篇博文Hibernate环境搭建中为大家详细的介绍如何搭建一个学习新类库的学习环境.今天,为大家带来一个Hibernate小例子,让大家能够快速上手. 步骤如下: 1.配置hibern ...
- 开发一个微信小程序教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...
随机推荐
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- ubuntu使用备忘
今天在一个古董机子上(03年的)安装了lubuntu14.04,内存512M,奔腾处理器,好像是什么迅驰不支持linux需要的某项技术pae,安装时提示cpu不支持pae,但可以在内核参数中添加for ...
- 遵循PSR-4的自动加载
一.简介 首先这里要了解PSR,Proposing a Standards Recommendation(提出标准建议)的缩写,就是一种PHP开发规范,让我们研发出来的代码更合理.更好维护.可读性更高 ...
- 如何自己编写一个easyui插件
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对e ...
- CentOS找回root密码
如果忘记了root密码,可以进入单用户模式进行密码重置. 重启系统,在grub的启动菜单中按下e键,然后编辑kernel那一行,在最后的quiet后加上single. 按下Enter后,再按b开机进入 ...
- Linux命令点滴积累
1.批量删除当前目录及子目录中指定类型的文件: [root@localhost logs]# find ./ -name *.bak | xargs rm -rf [root@localhost lo ...
- STL之vector
参考资料: 1.codeproject 2.csdn 3.cplusplus
- python 动态调用模块、类、方法（django项目）
需求:近一段时间基于django框架,开发各业务层监控代码,每个业务的监控逻辑不同,因此需要开发监控子模块,动态的导入调用. 项目名称:demo_django App:common_base.moni ...
- ubuntu下Eclipse安装
安装的版本是MARS 直接复制安装包到安装的目录,然后tar zxvf XXXX 对于不能输入中文,把系统的输入法改成ibus就行了,fctix不支持eclipse 汉化包的下载地址 http://d ...
- （转）HBase 的原理和设计
转自:HBase的原理和设计 HBase架构: