AngularJS 学习笔记---AngularJS 简介
AngularJS 简介
http://www.runoob.com/angularjs/angularjs-intro.html
https://docs.angularjs.org/api/ng
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
我们建议把脚本放在 <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://apps.bdimg.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。
如果您移除了 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>
尝试一下 »
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://apps.bdimg.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";
});
在接下来的教程中你将学习到更多的应用和模块的知识。
转载于:https://my.oschina.net/weaver/blog/682811
AngularJS 学习笔记---AngularJS 简介相关推荐
- AngularJS 学习笔记---AngularJS 表达式
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...
- 学习笔记-AngularJs(十)
前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
- 【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- 【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- OptiX资料学习笔记1——简介
OptiX资料学习笔记1--简介 OptiX引擎的现状 目前有三种开源的API支持NVIDIA的光线追踪功能,分别为: DirectX Raytracing (DXR) DX的光线追踪API Vulk ...
- PCL学习笔记-PCL简介
PCL(点云库)学习笔记 1.简介 点云数据的处理可以采用获得广泛应用的Point Cloud Library(点云库,PCL库). PCL库是一个最初发布于 2013年的开源c++库,它实现了大量点 ...
- RNN学习笔记(一)-简介及BPTT RTRL及Hybrid(FP/BPTT)算法
RNN学习笔记(一)-简介及BPTT RTRL及Hybrid(FP/BPTT)算法 本文假设读者已经熟悉了常规的神经网络,并且了解了BP算法,如果还不了解的,参见UFIDL的教程. - 1.RNN结构 ...
- 51单片机学习笔记1 简介及开发环境
51单片机学习笔记1 简介及开发环境 一.51单片机 1. STC89C52单片机简介 2. 命名规则 3. 封装 (1)PDIP (2)LQFP (3)PLCC (4)PQFP 二.STC8051结 ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
最新文章
- iview template模式_使用Iview Menu 导航菜单(非 template/render 模式)
- el-select 多选取值_AR? ATOS?? DRA???这些都是英语阅读分级?聊一聊我知道的兰斯值(lexile measure))...
- MySQL高级 - 日志 - 二进制日志(statement)
- 单向链表的建立和简单的增删改查
- Delphi版 IsNumeric 函数
- 牛!发出中国第一封电子邮件,注册登记域名 CN,中国互联网之父传奇
- GMF:示例Mindmap 练习一
- Flash 第七章 元件,帧,库管理
- linux如何安装yum
- 卸下重负,苏宁易购重组价值逻辑
- 第三章:logback 的配置
- BIGEMAP GIS Office
- 同比和与环比的计算公式
- 程序员的日常工作是怎样的?
- c++ vector基本函数、排序、查找用法
- android 程序颜色,android – 以编程方式设置scrim颜色
- DAVINCI DM365-DM368开发攻略—U-boot-2010.12-rc2-psp03.01.01.39及UBL的移植 .
- Linux网络容灾,一个简单的两个Linux之间的容灾备份的Demo
- Linux脚本方式修改Mac地址,两种修改Linux系统中MAC地址的方法
- Java语法理论和面经杂疑篇《七. 数据结构与集合源码》
热门文章
- 虚拟机jdk安装,配置环境变量
- IBM服务器安装linux黑屏,IBM x3650 M3服务器安装老版Linux系统
- 近三成职场人春节假期开销超过月收入,福州西安合肥等在孝顺金压岁钱开销比重明显高 | 美通社头条...
- 一起来学孟德尔随机化(Mendelian Randomization)
- 完全免费的手机短信天气预报与免费发送祝福短信(谷歌短信服务)
- 无人驾驶汽车需要怎样的设计?
- 【loj2586】【APIO2018】选圆圈
- C语言之父 UNIX之父 Dennis M. Ritchie
- 基于javaweb+jsp的甜品店奶茶店管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
- 10位专家预测2007年巨大潜力技术[转]