转行学开发,代码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学习初体验的更多相关文章

  1. YII学习,初体验 ,对YII的一些理解.

    先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...

  2. linux学习初体验

    前天买了鸟哥私房菜,昨天一早就到了.阅读了前两章. 一.Linux是什么 二.Linux如何学习 还有前面的计算机概论也值得一看.对于计算机构成,硬件解读,数据存储,比一般的电脑维修类的书深一些. 第 ...

  3. java学习初体验NO.1

    一.学习目标: 1.理解Java编译原理 在Java编程语言中,所以源代码首先以用.Java扩展名结尾的纯文本件编写,然后,编译器将这些源文件编译成.Class文件.然后,Java启动器工具使用Jav ...

  4. 【学习博客】Python学习初体验

    本周是正式开始学习Python的第一周.很久不写代码了,毕业第5年了,期间几乎没怎么动过手.这段时间比较规律.密集的学习又让我找回了当时的感觉,还不算陌生,我挺喜欢的这种能实实在在看到自己知识增长的状 ...

  5. JSP学习初体验

    JSP简介: 1)JSP--Java Server Pages 2)拥有servlet的特性与优点(本身就是一个servlet) 3)直接在HEML中内嵌JSP代码 4)JSP程序由JSP Engin ...

  6. json学习初体验--第三者jar包实现bean、List、map创json格式

    1.的需要jar包裹json-lib.jar 下载链接: http://sourceforge.net/projects/json-lib/files/json-lib/ 此包还须要下面的依赖包, c ...

  7. java学习初体验之课后习题

    import java.util.Scanner; public class HelloWorld { public static void main(String[] args) { //打印Hel ...

  8. angularjs入门初体验

    1. http://www.zouyesheng.com/angular.html#toc39

  9. 【170】◀▶ IDL 学习初体验-全

    IDL Reference 操作符号 数组 字符及字符串 结构体 指针 链表 & 哈希表 程序控制(循环.条件.跳转语句) 过程 & 函数 输入与输出 系统变量 文件系统操作 直接图形 ...

随机推荐

  1. Tesseract5.0训练字库,提高OCR特殊场景识别率,合并字库(二)

    一.准备工作 需要的文件 tif文件和box文件. 如果你打标打好了,但是是分批次打标的,那么可以合并字库,我们最初只需要 tif 和 box 文件,如下: 二.生成对应的 .tr 训练文件 根据不同 ...

  2. Node.js实战11:fs模块初探。

    fs模块封装了对文件操作的各种方法,比如同步和异步读写.批量操作.流.监听. 我们还是通常例程学习, 获取目录下的文件清单: var fs =require("fs"); fs.r ...

  3. [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping, 对象关系映射)

    一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...

  4. POJ-3122.Pie(二分法最大化平均值)

    二分法的主题思路就是逐步逼近,所以这道题的思路自然一目了然,做题思路也是... 本题大意:题主过生日,它买了N块半径为R[ i ],高为1的圆柱形蛋糕,现在他要将这N块蛋糕等分给F + 1个人,为了好 ...

  5. 洛谷P1095守望者的逃离题解-伪动态规划/贪心

    链接 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很 ...

  6. Hdu 4578 Transformation (线段树 分类分析)

    Transformation Time Limit: 15000/8000 MS (Java/Others)    Memory Limit: 65535/65536 K (Java/Others)T ...

  7. Gorgeous Sequence(线段树)

    Gorgeous Sequence Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  8. 解决Vscode编辑器不能打开多标签页问题

    问题描述:编辑代码时,初用vscode,不能打开多个文件:每打开一个文件,都会替换前面一个文件标签,很不方便切换编码: 想要的效果: 解决方式: 方法一: 找到setting.json文件,最外层花括 ...

  9. python去除字符串中间空格的方法

    1.使用字符串函数replace a = 'hello world' a.replace(' ', '') # 'helloworld' 2.使用字符串函数split a = ''.join(a.sp ...

  10. 如何在Linux下手动编译安装gcc

    如果可以通过apt来安装的话,尽量不要手工编译了,手工编译是最后的选择.用apt安装,只需要输入一条命令: sudo apt-get install gcc 手工编译的话,gcc和其他软件包存在如下的 ...