AngularJS核心特性（四大点）
本人刚刚接触AngularJS，还不太熟悉，就说说我目前遇到的一些注意点吧。
1、调用外来文件script文件
AngularJS核心特性一 MVC
MVC设计模式
html文件
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
//ng 表示 angular ,ng-app放在这一行的div上，就决定与Angular脚本放哪里，表示作用于只在这一行内的div有效；ng-controller 表示控制器；greeting.text 表示 module参数
//注意： 调外来文件的时候，ng-app 不需要带参数，如：ng-app="myAPP"
<div ng-app ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
<script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
<script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
</body>
</html>
scrript文件
//不需要（function(){表达式}）();只需要一个函数 function HelloAngular（ng-controller的控制器参数）{表达式}
function HelloAngular($scope){
$scope.greeting = {
text : 'hello'
};
}
AngularJS核心特性二 模块化
//但是上面的script是全局，这样做会污染全局空间，这样做不怎么高大尚，所以将其模块化
html文件
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
//ng 表示 angular ,ng-app放在这一行的div上，就决定与Angular脚本放哪里，表示作用于只在这一行内的div有效；ng-controller 表示控制器；greeting.text 表示 module参数
//ng-app="myAPP"相当于 js里面的main方法
//注意： 调外来文件的时候，ng-app 不需要带参数，如：ng-app="myAPP"
<div ng-app="helloAngular" ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
<script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
<script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
</body>
</html>
scrript文件
//不需要（function(){表达式}）();只需要一个函数 function HelloAngular（ng-controller的控制器参数）{表达式}
var app = angular.module("helloAngular",[]); //第一个参数：定义一个模块 “helloAngular” ； 第二个参数： [] 表示 本模块所依赖的子模块的集合（就像是main函数下的调用的子函数）
app.controller("HelloAngular",['$scope', //$scope 告诉AngularJS 要使用$scope参数 $scope 必须与下面调用的函数带的参数 $scope 是一样的
function (函数名(随便取))($scope){
$scope.greeting = {
text : 'Hello'
}
}
]);
AngularJS核心特性三 ---- 指令系统（可以自定义标签名，然后写封装他们标签名；除了可以封装自定义标签，还可以做其他的功能）
html文件
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta charset="UTF-8">
<title>driection指令系统</title>
</head>
<body>
<hello></hello> //随便去的标签名字
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular_Direction.js" ></script>
</body>
</html>
angular_Direction.js文件
var myModule = angular.module("myModule",[]); //angular.module创建模块
myModule.directive("hello",function(){ //‘hello’ 自定义标签名
return {
restrict:"E",
template:'<div>Hi everyone!</div>', //替换“hello”标签名的模块
replace: true
}
});
AngularJS核心特性四 ----- 双向数据绑定（MVVM）
html文件 不需要JS文件
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input ng-model="greeting.text" />
<p>{{greeting.text}},AngularJS</p>
</div>
<script type="text/javascript" src="js/angular.min.js" ></script>
</body>
</html>
