百度百科对Angular JS的简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
我的学习
写个小程序看看Angular JS的效果
下载Angular Js文件,跟其他js引用方式一样,能用url,也能下载都本地直接加载。
下载或者引用url可为:
http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js
当然,现在已经到2.0+版本了,可以下载最新版本去玩。
我是下载放到本地,跟html同一目录。
目录结构:
Angular JS表达式使用双大括号{{}},如{{name}}。必须声明ng-app才能显示angular js的效果。
程序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="name='Lily'">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<span ng-bind="name" style="background-color:red"></span>
<h2>1+2={{1+2}}</h2>
<h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
<h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
<h2>1+''+2={{1+''+2}}</h2>
<h2>''+1+2={{''+1+2}}</h2>
<h2>''+1+2+3={{''+1+2+3}}</h2>
<h2>1+2+''={{1+2+''}}</h2>
</div>
<div>
<p>未申明ng-app/名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div></body>
</html>
思考:为什么不给ng-app取个名字呢
如果ng-app指定一个名字,则该模块下必须要有ng-controller 且javascript要定义该controller,否则表达式不起作用。
如上述代码,如果 ng-app=""改为 ng-app="myApp",则无angular js的效果,如下图:
正确打开方式,应该为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body><div ng-app="myApp" ng-init="name='Lily'" ng-controller="myControl">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<span ng-bind="name" style="background-color:red"></span>
<h2>1+2={{1+2}}</h2>
<h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
<h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
<h2>1+''+2={{1+''+2}}</h2>
<h2>''+1+2={{''+1+2}}</h2>
<h2>''+1+2+3={{''+1+2+3}}</h2>
<h2>1+2+''={{1+2+''}}</h2>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('myControl',function($scope){
$scope.name = 'Huang';
});
</script></body>
</html>
给ng-model初始化值
上述代码包括了两种初始化值的方式:
1) ng-init="name='Lily'"
2) 使用了controller为name赋值,初始化为Huang
最后页面显示的Lily,所以可以认为ng-init的赋值优先级比较高。
思考:同一个ng-app可以调用多个control吗?
当然可以,同一个ng-app可以调用多个controller,目前我只知道在不同html元素调用不同controller,不知道同一个元素是否能调用多个controller。
比如一个ng-app中有两个子div,每个div都分别调用不同的controller。
<div ng-app="myApps" > <div ng-controller="myCtrl">名: <input type="text" ng-model="firstName" ><br></div>
<div ng-controller="myCtrl1">姓: <input type="text" ng-model="lastName"><br></div> </div>javascript:
var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Zor";
}).controller('myCtrl1', function($scope) {
$scope.lastName= "OY";
});
每个control只能对调用它的元素里的ng-model做操作。上述,如果myCtrl中对lastName赋值是赋不了;同样myCtrl1中对firstName赋值也是赋不了的。
思考:一个页面是否能加载多个ng-app
我觉得行,那么如何加载?试过就简单的写两个ng-app,第二个ng-app里的表达式显示出来仍然是表达式。所以这个问题就留给下次再说。