转行学开发，代码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. js：获取单选组radio中的被选择的数据

    现在有一name为sex的单选组,代表的是选择性别,要求获取radio中被选择的选项值 <div class="sexDiv"> 用户性别: <input cla ...

  2. JAVA总结--JDK版本区别

    jdk1.5的新特性:  1.泛型  2.自动拆箱装箱  3.foreach   4.静态导入(Static import) 此外,枚举.元数据(Metadata).线程池.Java Generics ...

  3. 2019牛客暑期多校训练营（第三场） - D - Big Integer - 数论

    https://ac.nowcoder.com/acm/contest/883/D \(A(n)\) 是由n个1组成的一个整数. 第一步:把 \(A(n)\) 表示为 \(\frac{10^n-1}{ ...

  4. Leetcode Lect7 哈希表

    传统的哈希表 对于长度为n的哈希表,它的存储过程如下: 根据 key 计算出它的哈希值 h=hash(key) 假设箱子的个数为 n,那么这个键值对应该放在第 (h % n) 个箱子中 如果该箱子中已 ...

  5. Log4Net 之将日志记录到数据库的配置 （一）

    原文:Log4Net 之将日志记录到数据库的配置 (一) 前段时间我一直想做一个通用一点的日志记录系统,可以便于不同的业务组调用进行日志记录及分析.本来打算着自己下手写一个,后面发现各业务组可能会需要 ...

  6. C# xml格式字符串，插入到数据库出现非法字符

    在debug模式下快速监视看到的数据是完全正常的,即取到的是<xml>,但是把该字符串拷贝到UltraEdit中,取到的第一个字符是问号.使用正则表达式^[^<]进行替换,意思是把开 ...

  7. win32 socket 编程（六）——UDP

    基于 UDP 无连接的 socket 编程 一.服务器端操作流程 1.1加载套接字库(WSAStartup) 1.2 创建套接字  (socket) 1.3将创建的套接字绑定到一个本地地址和端口上   ...

  8. github(1):

    1.目的:借助github托管项目带按摩 2.仓库:创建一个Repository 3.收藏(Start):仓库主页start按钮,意思是收藏项目的人数,在github上如果有一个项目获得100个sta ...

  9. Canvas和SVG的比较

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  10. Centos7 配置rsyslog客户端接收远程日志

    rsyslog 因为路由器我设定每天重启,但是日志一重启就会清除,并且路由器最多只能保存1024条记录,所以我想把路由器的日志记录到一台服务器上,发现路由器包含远程日志功能 于是我就在我的centos ...