AngularJS 知识总结

前端之家收集整理的这篇文章主要介绍了AngularJS 知识总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习链接

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>

我们建议把脚本放在 <body> 元素的底部
这会提高网页加载速度,因为 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>

猜你在找的Angularjs相关文章