AngularJS 简介
AngularJS是一个JavaScript框架,它可以通过script标签添加到HTML页面。AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。
AngularJS是一个JavaScript框架
AngularJS是一个JavaScript框架,它是以javascript编写的库。
AngularJS是以一个JavaScript文件形式发布,可通过Script标签添加到网页中,建议把脚本放到body元素的底部,这样会提高网页的加载速度,因为HTML的加载不受制于脚本的加载。
AngularJS扩展了HTML
AngularJS通过ng-directives扩展了HTML。
ng-app指令定义了一个AngularJS应用程序。
ng-model指令把元素的值绑定到应用程序。
ng-bind指令把应用程序数据绑定到HTML视图。
<!DOCTYPE html >
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container" ng-app="">
<p>在输入框尝试输入:</p>
<p><input type="text" size="20"maxlength="16" ng-model="name"/></p>
<p ng-bind="name"></p>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>
实例讲解
页面加载完毕,AngularJS自动开启。
ng-app指令告诉AngularJS,div元素是AngularJS应用程序的“所有者”。
ng-model指令把输入域的值绑定到应用程序变量name。
ng-bind指令把应用程序变量name绑定到某个有段落的innerHTML。
提示:如果移除了ng-app指令,HTML直接把表达式显示出来,不会去计算表达式的结果。