博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【AngularJS】—— 3 我的第一个AngularJS小程序
阅读量:6820 次
发布时间:2019-06-26

本文共 1094 字,大约阅读时间需要 3 分钟。

通过前面两篇的学习,基本上对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

  

  解决了资源文件的下载问题,就可以手动编写小程序了:

                            
Invoice:
num1 num2

Total: {
{number1 * number2 | currency}}

  首先分析一下代码:

  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 过滤器 ,展现成为货币格式。

  运行结果:

转载地址:http://czozl.baihongyu.com/

你可能感兴趣的文章
循环结构进阶
查看>>
关于数据库查询时报“query block has incorrect number of result columns”
查看>>
margin注意问题
查看>>
事物的回滚
查看>>
Xcode7 iOS9.0 的真机调试
查看>>
Constraint3:check约束 和 null
查看>>
Fabric 1.0环境搭建
查看>>
c冒泡排序
查看>>
第十五篇、OC_同一个View实现两个手势响应
查看>>
sql server 2008学习8 sql server存储和索引结构
查看>>
Java软件架构设计慨论
查看>>
15-用户手册(GB8567——88)
查看>>
JAVA 访问WebRoot下的目录文件
查看>>
0913数据库约束之主键 外键 非空 默认值约束 唯一约束 级联操作 表与表之间的联系...
查看>>
微信 {"errcode":40029,"errmsg":"invalid code, hints: [ req_id: Cf.y.a0389s108 ]"}
查看>>
C#中的接口
查看>>
DataTable数据存入指定路径的Excel文件
查看>>
【Lua】特性和一些基础语法
查看>>
Jaxb2 实现JavaBean与xml互转
查看>>
easyui的 getSelections 与 getSelected 对比区别
查看>>