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

转载于:https://www.cnblogs.com/allencxw/p/8729016.html

day21—AngularJS学习初体验相关推荐

【头歌平台】人工智能-深度学习初体验
深度学习初体验第1关:什么是神经网络第一题神经网络中也有神经元,这些神经元也会与其他神经元相连接,这样就形成了神经网络,而且这种网络我们称之为全连接网络.如下图所示(方块表示神经元): 从图可以 ...
yii schema.mysql.sql_YII学习,初体验 ,对YII的一些理解.
先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...
编程学习初体验（4. 编程的核心）
初学编程的朋友,总觉得写程序是件单纯的事情:知道如何使用一种语言,熟悉一个开发环境,了解系统的编程接口(API)就已经能够成为一个合格的程序员了.在我刚刚接触编程学习的时候,我也是这么认为的.这种认 ...
编程学习初体验（5. 如何自学编程）（3）
3 少量项目实践--自学和上学的区别有句老话叫做学以致用,说的是如果不是为了用而学,是没有意义的: 同样,在用中学才能真正的掌握学到内容.编程跟着书本走,入书之后终究需要脱离书本,做到"出 ...
spring框架 c p标签的区别_Spring学习初体验
训练大纲(第057天)60 大家如果想快速有效的学习,思想核心是"以建立知识体系为核心",具体方法是"守破离".确保老师课堂上做的操作,反复练习直到熟练. 第1 ...
人工智能导论：深度学习初体验
唠点什么最后一次实训了,做完就是成功,嘿嘿嘿注意:本博客仅供参考!!! 第一关:什么是神经网络 1.全连接网络包含输入层.隐藏层和输出层 A.对 B.错 A 2.层数较多的神经网络为深层神经网络 ...
【170】◀▶ IDL 学习初体验-全
IDL Reference 操作符号数组字符及字符串结构体指针链表 & 哈希表程序控制(循环.条件.跳转语句) 过程 & 函数输入与输出系统变量文件系统操作直接图形 ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
我的Go+语言初体验——（4）零基础学习 Go+ 爬虫
我的Go+语言初体验--(4)零基础学习 Go+ 爬虫 "我的Go+语言初体验" | 征文活动进行中- Go+ 语言非常适合编写爬虫程序,具有并发机制完善.并发数量大.占用资源少. ...

day21—AngularJS学习初体验

day21—AngularJS学习初体验相关推荐

最新文章

热门文章