AngularJs模块
概念：AngularJs将相关的代码封装起来，通过某种命名方式进行调用
一个AngularJs模块包含两部分：
- 模块可以定义自己的控制器,服务,工厂类（factory）以及指令。这些代码或者函数在整个模块中都是可以访问到的
- 模块也可以依赖于其他模块，这些依赖在模块示例化时就已经定义完毕。这就意味着AngularJs可以通过命名找到相应的模块，并确保该模块中所有的函数，控制器，服务等在当期模块内都是可用的
模块的功能不仅仅是用于包含相关JavaScript代码的容器，AngularJs也用它来启动应用。我们可以通过将模块名称传给ng-app指令来告诉AngularJs应用的入口在哪里
定义模块的方式，该模块的名称为notesApp：
angular.module('notesApp',[]);
- AngularJs中的module函数的第一个参数代表了模块名称。在例子中模块名是notesApp
- 第二个参数是一个数组，表示该模块所依赖的模块名称列表。请注意例子中的第二个参数是一个空数组，这意味着我们想要创建的notesApp模块不需要依赖其他模块
加载定义在其他源文件中的模块，那么angular.module函数只需要第一个参数：
`angular.module('notesApp');
这行代码将会通知AngularJs去查找名为notesApp的模块，并确保我们能够在当前文件中使用，增加或者修改该模块。我们可以通过这个方法在不同的源文件中引用同一模块并进行扩展。
两个常见的错误：
- 想定义一个模块却忘记传入第二个参数。这会导致AngularJs去查找该模块而不是定义该模块，AngularJs会给出“找不到模块”（No module found）错误
- 想从另一个文件中加载某个模块并修改它，但包含该模块的文件却没有预先加载。请确保所有需要的文件在引用之前都已经被正确地加载到HTML中
ng-app指令可以接受一个可选参数，该参数表示启动时需要加载的模块名称
<html ng-app="notesApp">
<head>
<title>Hello AngularJs</title>
</head>
<body>
Hello{{1+1}}nd time AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[]);
</script>
</body>
</html>
上例中定义了一个模块（注意angular.moudle函数中第二个参数是个空数组），然后让AngularJs通过ng-app指令来启动该模块。
创建自定义控制器
控制器包揽了AngularJs中的杂活，通过JavaScript函数来执行或触发与UI相关的任务。
AngularJs控制器的主要职责有：
- 从服务器获取所需数据以生成页面UI
- 决定哪些数据将会被呈现给用户
- 一些与页面相关的逻辑，比如如何显示元素，UI中的哪些部分是可见的，它们的风格又是什么样的
- 用户交互，比如响应用户单击事件以及验证文本输入框中的值
AngularJs控制器通常和某个HTML视图是直接关联的。控制器不会孤零零地游离于UI之外而不被其中任何一个所引用（如果有的话，这些业务逻辑更应该用服务来实现）。
模型中数据驱动着整个应用，视图用于和用户交互，而控制器则是两者之间的门户。
让我们再来看看如何为noteApp模块创建控制器：
<html ng-app="notesApp">
<head>
<title>Hello AngularJs</title>
</head>
<body ng-controller="MainCtrl">
Hello{{1+1}}nd time AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
//此处为与控制器相关的代码
console.log('MainCtrl has been created');
}]);
</script>
</body>
</html>
在这里，我们用controller函数定义了一个控制器，它对于AngularJs中的某个模块是可见的。
- controller函数中的第一个参数表示该控制器的名称，在上例中就是“MainCtrl”。
- 第二个参数定义了控制器的真正的行为，做什么和怎么做
细节注意：controller函数中定义的匿名函数包含在一个数组内。也就是说，controller函数的第一个参数表示控制器名称（MainCtrl），而第二个参数则是一个数组。
这个数组以字符串格式包含了控制器所依赖的模块名称，数组中最后那个参数是真正的控制函数。本例中，我们没有任何依赖关系，因此数组中只包含控制函数了。该函数包含了所有与控制器相关的代码
指令ng-controller：该指令可以让AngularJs通过名称创建出控制器实例，然后将它关联到DOM元素上。
通过显示“Hello World”,代码如下：
<html ng-app="notesApp">
<head>
<title>Notes App</title>
</head>
<body ng-controller="MainCtrl as ctrl">
{{ctrl.helloMsg}}AngularJs.
<br/>
{{ctrl.goodbyeMsg}}AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
//此处为与控制器相关的代码
this.helloMsg = 'Hello';
var goodbyeMsg = 'Goodbye';
}]);
</script>
</body>
</html>
上例结果中我们只看到了“Hello AngularJs.”，“Goodbye”并没有显示在UI中
任何定义在控制器实例上（通过控制器中的this关键字而不是像googbyeMsg变量那样通过var关键字来定义）的变量都是可以访问的，也能在HTML中呈现给用户
任何用户想看的信息或者HTML中需要用到的数据，都必须通过this关键字将它定义成控制器实例的成员变量。反过来说，如果不想HTML直接控制某个变量，就不能把它定义成控制器的成员变量，这种情况下倒是应该像例子中的goodbyeMsg那样定义成控制器作用域中的局部变量
网友评论