1.ng-controller与多控制器思想
描述：能够看到angular的操作，实际上脚本代码都是写在controller之中的。而刚刚我们将所有的脚本都堆积到一个控制器中的操作虽然理解上变得容易，但是实际开发过程中则会造成灾难所以为了便于团队开发，为了便于维护 NG提出了【多控制器思想】
说明：
(1)多控制器思想：
类似于div中的布局思想，是将控制器按照页面的不同模块功能进行切分 一个控制器只用来控制一个功能模块，多个控制器之间互不影响，独立工作。
(2)优势：
分工明确，代码清晰，便于维护
当系统出现问题，能够立即定位到问题坐标
(3)弊端：
对于初学者而言，前期代码的架构会变得很繁琐，对初学者不是很友好。
强调：
(1)每一个控制器只要被声明，就必须通过.controller实现
即便控制器中没有代码，也必须写出。
(2)每一个控制器作用域可以认为是嵌套的，
即外层controller可以直接访问到内层controller内的NG变量
而同级controller之间互不影响
(3)对于程序，习惯上mainController作为用户默认加载页面的根控制器
有且仅有唯一一个
<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title>lesson6_angularJS多控制器思想与模块化编程架构</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<br/><br/><br/>
<div class="container" ng-controller='commentController'>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<!-- 评论模块 -->
<div class="input-group">
<input type="text" class="form-control" ng-model='comt'>
<span class='input-group-btn'>
<button class="btn btn-primary" ng-click='submitComment(comt)'>评论</button>
</span>
</div>
<!-- 评论标题 -->
<h2 ng-show='commentArr.length>0'>评论</h2>
<!-- 评论内容 -->
<ul class="list-group">
<li class="list-group-item" ng-repeat='comment in commentArr track by $index'>
<span>{{comment}}</span>
<a href="javascript:;" class="btn btn-link" ng-click='deleteComment($index)'>删除本条评论</a>
</li>
</ul>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<ul ng-controller='namelistController'>
<li ng-repeat='liInfo in liInfoList track by $index'>{{liInfo}}</li>
</ul>
<script src='angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
}]);
//评论控制器
app.controller('commentController', ['$scope', function ($scope){
$scope.commentArr = [];
//评论功能
$scope.submitComment = function (comt){
$scope.commentArr.push(comt);
$scope.comt = '';
};
//删除评论
$scope.deleteComment = function (index){
$scope.commentArr.splice(index, 1);
};
}]);
//名称列表控制器
app.controller('namelistController', ['$scope', function ($scope){
$scope.liInfoList = ['frank','lily','lucy','hanMeiMei'];
}]);
