AngularJS 教程及实例代码


Posted in Javascript onOctober 23, 2017

angularjs 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

Note 我们建议把脚本放在 <body> 元素的底部。

这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

各个 angular.js 版本下载: https://github.com/angular/angular.js/releases

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> 
<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>
</body>
</html>

实例讲解:

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

Note 如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

什么是 AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

Note HTML5 允许扩展的(自制的)属性,以 data- 开头。

AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5:

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}。

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="">
  <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS 模块定义应用:

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

总结

以上所述是小编给大家介绍的AngularJS 简介及实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 #Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 #Javascript
angularjs实现猜大小功能
Oct 23 #Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
You might like
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
asp 的 分词实现代码
2007/05/24 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JS实现显示当前日期的实例代码
2018/07/03 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
原生js实现购物车
2020/09/23 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
分享Python文本生成二维码实例
2016/01/06 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
售后专员岗位职责
2013/12/08 职场文书
酒店led欢迎词
2014/01/09 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
授权委托书样本
2014/09/25 职场文书
教师求职简历自我评价
2015/03/10 职场文书
安全生产感想
2015/08/07 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
JavaScript实现登录窗体
2021/06/22 Javascript
MySQL 十大常用字符串函数详解
2021/06/30 MySQL