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