【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.注册成功后进入首页,在 小程序发布流程->小程序 ...
随机推荐
- RAC 相关概念解释
1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. Oracle RAC 是利用DL ...
- poj1811 数论
题意:判断一个数是否是质数+分解质因数 sol:模板题 分解质因数用xudyh模板,注意factor返回的是无序的,factorG返回是从小到大的顺序(包括了1) 判断质数用kuangbin随机化模板 ...
- Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)
catalog . 引言 . Windows 2000网络结构和OSI模型 . NDIS驱动 . NDIS微端口驱动编程实例 . NDIS中间层驱动编程实例 . NDIS协议层驱动编程实例 . TDI ...
- [iOS Keychain本地长期键值存储]
目前本地存储方式大致有:Sqlite,Coredata,NSUserdefaults.但他们都是在删除APP后就会被删除,如果长期使用存储,可以使用Keychain钥匙串来实现. CHKeychain ...
- C#保存图片设置图片质量的方法
主要用到System.Drawing.Imaging命名空间下的ImageCodecInfo.Encoder.EncoderParameter.EncoderParameters四个类 实现代码 代码 ...
- primefaces 上传文件尺寸受限制 Connection terminated as request was larger than
standalone.xml like this: <http-listener name="default" socket-binding="http" ...
- python requests
快速上手http://docs.python-requests.org/zh_CN/latest/user/quickstart.html Requests 是使用 Apache2 Licensed ...
- PHP 基本语法，字符串处理，正则
<?php //注释语法 /*多行注释*/ 输出语法 Echo "hello","worle"; //可以输出多个字符串 Print ...
- 未签名有元程序集 Unsigned Friend Assemblies
C#中的访问修饰符internal可以使类型在同程序集中可以被相互访问.但有时会有这样一个要求,我们希望一个程序集中的类型可以被外部的某些程序集访问,如果设置成public的话,就被所有的外部程序集访 ...
- CURL函数的GET和ＰＯＳＴ方式的两种写法（实现ajax跨域调用）
POST请求 function curl_post($url='',$postdata='',$options=array()){ $ch=curl_init($url); curl_setopt($ ...