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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
Prototype使用指南之range.js
Jan 10 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue组件name的作用小结
May 23 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
vue实现购物车案例
May 30 Javascript
js在HTML的三种引用方式详解
Aug 29 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
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
javascript事件模型介绍
2016/05/31 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python运算符重载用法实例
2015/05/28 Python
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
Python的两道面试题
2013/06/29 面试题
应届生如何写自荐信
2014/01/05 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
《太阳》教学反思
2014/02/21 职场文书
安全生产承诺书
2014/03/26 职场文书
公司股权转让协议书
2014/04/12 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
爱护环境建议书
2015/09/14 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js