百度百科对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的效果，如下图：
ng-app指定名字未使用control
正确打开方式，应该为：
<!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里的表达式显示出来仍然是表达式。所以这个问题就留给下次再说。
网友评论