AngularJS 知识总结
来源:互联网 发布:基于云计算的oracle 编辑:程序博客网 时间:2024/05/24 03:33
学习链接:
http://www.runoob.com/angularjs/angularjs-intro.html
AngularJS 简介
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>
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
实例:
<!doctype html><html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> 示例1: <div ng-app=""> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}!<br/> </div> 示例2: <div ng-app="" ng-init="firstName='John'"><p>姓名为 <span ng-bind="firstName"></span></p></div><br/> 示例3:AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。<div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p></div><br/> 示例4:<div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p></div> </body></html>
<!doctype html><html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <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> </body></html>
<!doctype html><html ng-app=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> AngularJS 数字: <div ng-init="quantity=1;cost=5"><p>总价: {{ quantity * cost }}</p><p>总价: <span ng-bind="quantity * cost"></span> </p></div><br/> AngularJS 字符:<div ng-init="quantity='1';cost='5'"><p>总价: {{ quantity + cost }}</p><p>总价: <span ng-bind="quantity + cost"></span> </p></div><br/> AngularJS 对象:<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p><p>姓为 <span ng-bind="person.lastName"></span></p></div><br/> AngularJS 数组:<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p><p>第三个值为 <span ng-bind="points[2]"></span></p></div> </body></html>
0 0
- AngularJS 知识总结
- AngularJS初识--指令相关知识总结
- AngularJs 知识
- AngularJs 总结
- angularjs 总结
- angularJS总结
- AngularJS 总结
- angularJS总结
- Angularjs总结
- AngularJS总结
- AngularJs 总结
- AngularJS总结
- angularjs 总结
- angularJS之项目知识
- AngularJS入门知识
- AngularJS 开发知识架构
- angularJS使用总结
- AngularJs学习总结
- LeetCode 12. Integer to Roman
- 关于证书笔记
- JAVA实现链表
- 策略模式
- leetcode(58)-Range Sum Query - Immutable
- AngularJS 知识总结
- vb13
- Windows 7(Win7)下Visual Studio 2012(VS2012)编译jrtplib与MinGW编译jrtplib
- TensorFlow0.7 的安装
- 开源控件GifView
- VB程序语言1
- 【JS】:JS实现页面反向显示
- Android活动的四种启动方式(standard singleTop singleTask singleInstance)
- 问题:iOS8设置tableview的setSeparatorInset:UIEdgeInsetsZero不起作用