AngularJS 知识总结

发布时间：2020-12-17 10:12:58 所属栏目：安全来源：网络整理

导读：学习链接： http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 script 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 AngularJS 是一个 Java

学习链接：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!