【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.注册成功后进入首页,在 小程序发布流程->小程序 ...
随机推荐
- bash的配置
Bash的启动文件 启动文件也是一种脚本,不过它是在Bash在启动之初就执行它的.不同的启动方式使用的启动文件也有不同. 1. 作为交互的登录脚本环境“交互的”是指你可以再这个环境下输入命令.而所谓的 ...
- libusb-win32简介~
libusb-win32简介 libusb-win32 is a port of the USB library libusb (http://sf.net/projects/libusb/) to ...
- codevs 1229 数字游戏（可重集的全排列）
传送门 Description Lele 最近上课的时候都很无聊,所以他发明了一个数字游戏来打发时间. 这个游戏是这样的,首先,他拿出几张纸片,分别写上0到9之间的任意数字(可重复写某个数字),然后 ...
- Mysql学习笔记（四）聊聊数据库索引
小心情(可直接跳到分割线后) 今天心情好些了.一些浓的化不开的坏情绪,也渐渐的在晚上解决掉一个复杂的逻辑问题后,渐渐消散了. 今天中午去吃饭的时候,坤哥漫不经心的说:'我这么多年终于悟出了一个道理,人 ...
- OpenGLES入门笔记二
#import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #import <OpenGLES/ES2/gl.h& ...
- 3秒后自动跳转页面【js】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux查看CPU和内存使用情况
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
- /MT、/MD编译选项，以及可能引起在不同堆中申请、释放内存的问题
一.MD(d).MT(d)编译选项的区别 1.编译选项的位置 以VS2005为例,这样子打开: 1) 打开项目的Property Pages对话框 2) 点击左侧C/C ...
- C#实现录制屏幕
以前写过两篇录制麦克风语音和摄像头视频的文章(实现语音视频录制.在服务器端录制语音视频),最近有朋友问,如果要实现屏幕录制这样的功能,该怎么做了?实际上原理是差不多的,如果了解了我前面两篇文章中介绍的 ...
- 谁再说Matlab速度慢，我跟谁急
谁再说Matlab速度慢,我跟谁急 一.未进行内存预分配 y = 0; tic; for i=2:100000; y(i+1) = y(i)+ randn; end; toc 时间已过 0.03122 ...