AngularJS学习笔记一:简单入门
阿里云网站的前端是AngularJS实现的。
先下载AngularJS的开发工具包,我下载的angular-1.4.0。
在合适位置引入js文件:
<script src="angular-1.4.0/angular.min.js"></script>
1. AngularJS 入门指令:
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。
案例如下:
<!DOCTYPE html> <html> <body><div ng-app=""><p>在输入框中尝试输入:</p> <p>姓名: <input type="text" ng-model="name" ng-init="name='json'"></p> <p ng-bind="name"></p></div><script src="angular-1.4.0/angular.min.js"></script></body> </html>
2. AngularJS 表达式:
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
案例入下:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="quantity=1;cost=5"> <p>总价是:{{quantity*cost}}</p></div><script src="angular-1.4.0/angular.min.js"></script></body> </html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="quantity=1;cost=5"> 总价是:<p ng-bind="quantity*cost"></p> </div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
3. AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: {{ firstName + " " + lastName }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
4.AngularJS 对象
AngularJS 对象就像 JavaScript 对象:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 <span ng-bind="person.lastName"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
5.AngularJS 数组
AngularJS 数组就像 JavaScript 数组:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 <span ng-bind="points[2]"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>
转载于:https://www.cnblogs.com/longshiyVip/p/4582922.html
AngularJS学习笔记一:简单入门相关推荐
- Hadoop学习笔记(1) ——菜鸟入门
Hadoop学习笔记(1) --菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户能够在不了解分布式底层细节的情况下.开发分布式 ...
- 【学习笔记】密码学入门(2) 单向散列函数,消息认证码,数字签名,证书
[学习笔记]密码学入门(2) 单向散列函数,消息认证码,数字签名,证书 学习笔记 2 – 混合密码系统 在密码学入门(1)中提到了基本的密码形式,对称密码和公钥密码以及混合密码系统. 这一部分将学习到 ...
- 逐梦旅程学习笔记 DirectX开发入门02:旋转的彩色立方体
本文是 系列笔记DirectX部分的第2篇,上一篇参见 逐梦旅程学习笔记 DirectX开发入门01:应用程序基本框架 这个示例增加了一些实际的内容,首先是绘制一个颜色随机变幻的彩色立方体,其二是显示 ...
- 【学习笔记】Mininet 入门
[学习笔记]Mininet入门实战 课程介绍 Mininet是由一些虚拟的终端节点.交换机.路由器连接而成的一个网络仿真器,它采用轻量级的虚拟化技术使得系统可以和真实网络相媲美. Mininet可以很 ...
- 【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用 按照官网教程学习使用组件,并且重点把容器组件的应用进行了练习. 1.官网关于组件的介绍 组件是视图层的基本组成单元,是一个单独且可复用的 ...
- python自训练神经网络_tensorflow学习笔记之简单的神经网络训练和测试
本文实例为大家分享了用简单的神经网络来训练和测试的具体代码,供大家参考,具体内容如下 刚开始学习tf时,我们从简单的地方开始.卷积神经网络(CNN)是由简单的神经网络(NN)发展而来的,因此,我们的第 ...
- VC学习笔记:简单绘图
VC学习笔记:简单绘图 SkySeraph Oct.29th 2009 HQU Email-zgzhaobo@gmail.com QQ-452728574 Latest Modified Date ...
- iOS学习笔记-地图MapKit入门
代码地址如下: http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错 ...
最新文章
- 高德APP启动耗时剖析与优化实践(iOS篇)
- 【arduino】用VSCode替代Arduino编辑器,arduino VSCode编辑器
- 【Python】原创 | 写一个符合人类思维的四舍五入函数(No round !!!)
- 20应用统计考研复试要点(part35)--简答题
- [MyBatisPlus]常用注解_@TableName_@TableId_@TableField_@TableLogic通过全局配置配置主键生成策略
- python函数参数学习_python函数学习1
- U-GAT-IT中的一些细节以及变量含义
- 微信小程序学习笔记-1-环境及基础结构
- Web前端入门学习之JS基础知识梳理汇总
- RFID:ISO14443、15693、18000体系分析
- SSD和FTL概述:SSD主控维护FTL
- java读取加密excel_Java 加密和解密Excel文档
- BatchFormer: Learning to Explore Sample Relationships for Robust Representation Learning
- 双网络安全nvr/布控球,可双向同时接入国网B接口视频监控平台和国标28181平台
- 【C++笔试强训】第三天
- 领域驱动架构(DDD)建模中的模型到底是什么? 1
- activiti+app+mysql_SpringBoot Activiti6系列教程(一)-activiti-app部署
- Android原生图表库调研
- java中怎么让字体可以显示下划线呢_Java如何在数字文字中使用下划线?
- 计算机故障诊断与失误,计算机系统故障诊断与维护常见故障及排除.ppt
热门文章
- linux日志队列长度,Linux 消息队列长度处理
- python批量ping50台服务器_使用python编写批量ping主机脚本
- hive 0.11 mysql_Hive的升级(0.8.0到0.11.0)
- 阿里云 FaaS 架构设计与创新实践
- Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
- 阿里雷卷:Reactive 基金会的成立将对开发方式带来哪些影响?
- php读写分离数据不能同步,thinkphp 下数据库读写分离代码剖析
- c++和c语言的区别_C 语言和 C++ 有什么区别?老程序员居然这样理解,不怕你不懂...
- 苹果手机java_iphone手机,苹果手机如何登陆网易163邮箱
- jmeter+mysql+set_Jmeter中如何进行对数据库压测(上)