1. 理论知识
-
定义模块
形如： angular.module('notesApp', ['notesApp.ui', 'fusioncharts'])
第一参数：表示模块名称。
第二参数：是数组，notesApp模块依赖的其他模块名称 -
加载模块
形如：angular.module('notesApp')
让AngularJS去import这个模块（跟java的import类似） -
定义控制器
形如：
```
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl', ['depenencyModule', function(){
var self = this;
console.log('Main Ctrl');
}]);
</script>
```
控制器：
第一个参数表示控制器名称。
第二个参数是数组。字符串(可以多个也可以没有)表示控制器所依赖的模块。最后一个function是匿名函数，是真正的控制函数
2. hello_angularjs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello AngularJS</title>
<meta name="keywords" content="HelloWorld" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="js/common/angular.min.js"></script>
<script src="js/common/angular-ui-router.min.js"></script>
</head>
<body ng-app="notesApp" ng-controller="MainCtrl as ctrl">
{{ctrl.helloMsg}} AngularJS
<br/>
{{ctrl.goodbyeMsg}} AngularJS
</body>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl', [function(){
var self = this; //this指向MainCtrl实例
self.helloMsg = 'hello';
self.goodbyeMsg= 'goodbye'
}]);
</script>
</html>
3. 页面展示
hello_angularjs.html
4. 解析
- 定义模块：angular.module('notesApp',[])
- 加载模块：ng-app="notesApp"，AngularJS启动时候并加载notesApp模块
- 定义控制器： .controller('MainCtrl', [function(){
- 加载控制器：ng-controller="MainCtrl as ctrl" （重命名）
- 调用控制器： {{ctrl.helloMsg}}来获取控制器中的成员变量helloMsg
网友评论