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代码，开发更便捷，所以后期必继续补充学习。