Angular JS 学习之简介
1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面:
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
2.Angular JS通过指令扩展了HTML,且通过表达式绑定数据到HTML
3.Angular JS扩展了HTML:
(1)Angular JS通过ng-directives扩展了HTML;
(2)ng-app指令定义了一个Angular JS应用程序;
(3)ng-model指令把元素(比如输入域的值)绑定到应用程序;
(4)ng-bind指令把应用程序数据绑定到HTML视图;
<!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=""> //ng-app指令告诉AngularJS ,<div>元素是AngularJS应用程序的所有者
<p>名字:<input type="text" ng-model="name"></p> //ng-model指令把输入域的值绑定到应用程序变量name
<h1>Hello {{name}}</h1> //ng-bind指令把应用程序变量name绑定到某个段落的innerHTML
</div>
</body>
</html>
4.AngularJS使得开发现代的单一页面应用程序变得更加简单;
**AngularJS把应用程序数据绑定到HTML元素
**AngularJS可以克隆和重复HTML元素
**AngularJS可以隐藏和显示HTML元素
**AngularJS可以在HTML背后添加代码
**AngularJS支持输入验证
5.AngularJS指令:AngularJS指令是以ng作为前缀的HTML属性,ng-init指令初始化AngularJS应用程序
<div ng-app="" ng-init=" firstName='John'">
<p>姓名为:<span ng-bind="firstName"></span></p>
</div>
6.AngularJS表达式:
**AngularJS表达式写在双大括号内:{{expression}}
**AngularJS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙;
**AngularJS将在表达式书写的位置"输出"数据;
**AngularJS表达式很像JavaScript表达式:它们可以包含文字,运算符和变量;
<!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>
7.AngularJS应用:
**AngularJS模块(Module)定义了AngularJS应用;
**AngularJS控制器(Controller)用于控制AngularJS应用;
**ng-app指令定义了应用,ng-controller定义了控制器;
<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',[]); //AngularJS模块定义应用
app.controller('myCtrl',function($scope){ //AngularJS控制器控制应用
$scope.firstName="John";
$scope.lastName="Doe";
});
</script>
Angular JS 学习之简介的更多相关文章
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- angular.js学习的第一天
第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS学习之表达式
1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
随机推荐
- 【leetcode】Maximal Rectangle (hard)★
Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...
- 【编程题目】在 O(1)时间内删除链表结点
60.在 O(1)时间内删除链表结点(链表.算法).题目:给定链表的头指针和一个结点指针,在 O(1)时间删除该结点.链表结点的定义如下:struct ListNode{int m_nKey;List ...
- NCPC 2015 October 10, 2015 Problem D
NCPC 2015Problem DDisastrous DowntimeProblem ID: downtimeClaus Rebler, cc-by-saYou’re investigating ...
- PHP安全编程:对输出要进行转义
为了区分数据是否已转义,我还是建议定义一个命名机制.对于输出到客户机的转义数据,我使用$html数组进行存储,该数据首先初始化成一个空数组,对所有已过滤和已转义数据进行保存. 1 <?php 2 ...
- HTML/CSS题库
一. 填空题 使用文本编辑器编辑完HTML后,扩展名可以是__html___或___htm__. 表格的标签是____table______,单元格的标签是____td______. 在编辑ta ...
- 通过颜色代码初始化UIColor
#define UIColorFromHEX(rgbValue) [UIColor \ colorWithRed:((float)((rgbValue & 0xFF0000) >> ...
- [Android] 如何查看apk需要支持的Android版本
reference to : http://blog.csdn.net/huiguixian/article/details/39928089 如果有一个apk,需要知道他最低安装支持的Android ...
- [Android Pro] android 4.4 Android原生权限管理:AppOps
reference : http://m.blog.csdn.net/blog/langzxz/45308199 reference : http://blog.csdn.net/hyhyl1990/ ...
- hdu3038(带权并查集)
题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=3038 题意: n表示有一个长度为n的数组, 接下来有m行形如x, y, d的输入, 表示 ...
- C#实现http协议下的多线程文件传输
用C#实现HTTP协议下的多线程文件传输转自 http://developer.51cto.com/art/201105/263066_all.htm C#(C Sharp)是微软(Microsof ...