day21—AngularJS学习初体验
转行学开发，代码100天——2018-04-06
今天按照学习计划安排，开始AngularJS的学习。
关于AngularJS，在菜鸟教程上这样介绍
好吧，Angular学习起来非常简单，哈哈，现在就开始学习吧。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
接下来，按照课程写了两个小例子。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular js 初体验</title>
<!-- <script type="text/javascript" src="js/angular.min.js"></script> -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<fieldset >
<legend>第一个示例</legend>
<b>计算：</b>
<br/>
<table>
<tr>
<td>单价：(美元)</td>
<td>数量：</td>
</tr>
<tr>
<td><input type="number" ng-model="qty" required></td>
<td><input type="number" ng-model="cost" required></td>
</tr>
</table>
<b>金额：</b>{{qty*cost | currency}} </fieldset> <fieldset >
<b>改变model来控制DOM</b>
<br/><br/>
<legend>第二个例子：</legend>
<input type="text" ng-model="data.msg">
<div class="data.msg">你好，{{data.msg}}</div>
</fieldset> </body>
</html>
总结起来，其用法也相对简单：
1.引入AngularJS库，注意<script></script>标签。——因为AngularJS是一个JavaScript框架
2.AngularJS指令：
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
3.{{}}进行数据绑定。
执行效果如下：
第一个例子中，当输入单价和数量后，金额自动计算并显示。
第二个例子中，自动读取输入文本框中的内容，并显示在“你好，”之后。
注意：ng-app 指令告诉 AngularJS，<body> 元素是 AngularJS 应用程序 的"所有者"。
如果没有指定ng-app则表达式处直接显示表达式，而不是计算结果。
初体验：通过指令控制HTML元素，便捷实现数据的计算和显示，省去大量JS代码，开发更便捷，所以后期必继续补充学习。
day21—AngularJS学习初体验的更多相关文章
- YII学习,初体验 ,对YII的一些理解.
先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...
- linux学习初体验
前天买了鸟哥私房菜,昨天一早就到了.阅读了前两章. 一.Linux是什么 二.Linux如何学习 还有前面的计算机概论也值得一看.对于计算机构成,硬件解读,数据存储,比一般的电脑维修类的书深一些. 第 ...
- java学习初体验NO.1
一.学习目标: 1.理解Java编译原理 在Java编程语言中,所以源代码首先以用.Java扩展名结尾的纯文本件编写,然后,编译器将这些源文件编译成.Class文件.然后,Java启动器工具使用Jav ...
- 【学习博客】Python学习初体验
本周是正式开始学习Python的第一周.很久不写代码了,毕业第5年了,期间几乎没怎么动过手.这段时间比较规律.密集的学习又让我找回了当时的感觉,还不算陌生,我挺喜欢的这种能实实在在看到自己知识增长的状 ...
- JSP学习初体验
JSP简介: 1)JSP--Java Server Pages 2)拥有servlet的特性与优点(本身就是一个servlet) 3)直接在HEML中内嵌JSP代码 4)JSP程序由JSP Engin ...
- json学习初体验--第三者jar包实现bean、List、map创json格式
1.的需要jar包裹json-lib.jar 下载链接: http://sourceforge.net/projects/json-lib/files/json-lib/ 此包还须要下面的依赖包, c ...
- java学习初体验之课后习题
import java.util.Scanner; public class HelloWorld { public static void main(String[] args) { //打印Hel ...
- angularjs入门初体验
1. http://www.zouyesheng.com/angular.html#toc39
- 【170】◀▶ IDL 学习初体验-全
IDL Reference 操作符号 数组 字符及字符串 结构体 指针 链表 & 哈希表 程序控制(循环.条件.跳转语句) 过程 & 函数 输入与输出 系统变量 文件系统操作 直接图形 ...
随机推荐
- mysql查询字段类型为json时的两种查询方式。
表结构如下: id varchar(32) info json 数据: id = info = {"age": "18","di ...
- Java学习day2关键字
java的基本语法(1) 一.关键字 定义:被Java语言赋予特殊含义,用做专门用途的字符串 特点:关键字中的所有字母都为小写 二.标识符 定义:java对各种变量.方法和类等要素命名时所使用的的字符 ...
- Codeforces 1163D Mysterious Code（AC自动机+DP）
用 AC自动机 来做有点想不到,捞一手就是学一手. 设 dp[ i ][ j ] 表示字符串 c 中的第 i 位到字典树上节点 j 的最大值是多少, word[ j ] 表示在节点 j 下对答案修改的 ...
- host文件无操作权限
把先用其它启动方式启动电脑,如winpe(网上有制作方法,很简单的),启动后找到FWPKCLNT.SYS所在文件夹, 一般在c/windows/system32/drivers,将drivers文件夹 ...
- Python的__pycache__的文件夹
· 前言 用python编写好一个工程,在第一次运行后,总会发现工程根目录下生成了一个__pycache__文件夹,里面是和py文件同名的各种 *.pyc 或者 *.pyo 文件. 先大概了解一下py ...
- 手写一个SpringMVC框架(转)
一:梳理SpringMVC的设计思路 本文只实现自己的@Controller.@RequestMapping.@RequestParam注解起作用,其余SpringMVC功能读者可以尝试自己实现. 1 ...
- 谷歌浏览器安装插件时出现：程序包无效:“CRX_HEADER_INVALID" 后的解决办法
以安装书签管理插件Neater Bookmarks为例: 1.下载:网址http://www.cnplugins.com/zhuanti/sixbookmarksintroduce.html 2.将下 ...
- Tomcat 8.5 apr 模式配置
tomcat APR模式配置 一.环境 操作系统:Ubutnu 14 ubuntu@ubuntu:~$ uname -a Linux ubuntu 4.4.0-31-generic #50~14.04 ...
- Java JNA （四）—— void**、void*、char**、char*、int*等类型映射关系及简单示例
ByReference类有很多子类,这些类都非常有用. ByteByReference.DoubleByReference.FloatByReference. IntByReference.LongB ...
- 【记录】解决windows中nginx明明退出了，为什么还能反向代理？CMD强制杀死进程命令
博主今天遇到一个很奇怪的问题,nginx在windows中明明已经退出了,而且在任务管理器中也没发现nginx进程, 为什么还能反向代理呢? 找了半天资料终于解决,现记录如下,希望能帮助到你. 步骤一 ...