angularjs入門-module和controller
現在就直接來談談module吧，module是什麼東西呢?簡單來說這就像是一個模組，我在原文書看是稱為這就像一個packaging。總而言之是看各位怎麼去使用他，如果說我們今天做的是一套erp。我們可以分成會計模組，或者是財務模組。但有些人則是以程式功能性來分類，比如service或filter。現在就看看module怎麼使用吧。
首先我們就是在原本ng-app的地方多給他value。
然後我們就可以在javascript裡面寫這樣的語法
var app=angular.module('App', []);
如果我們要引用自己寫或third party的元件，我們可以像下面這樣
var app=angular.module('App',['App.service','App.filter','ui.bootstrap']);
這種方式，可以很容易讓我們定出很容易歸納的模組分辨。有在寫javascript的人，應該都很清楚全域是一種另人很頭痛的地方。尤其是越多人同時開發，這種狀況會更明顯。
在來就是controller的部份了，我們可以寫下面這樣的語法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.hello = "Hello Anson";
});
</script>
</body>
</html>
我們在controller裡面給了hello的值，所以input的欄位，預設就會有我們在controller裡面的值。
script的部份也可以寫成像下面這樣的語法
var app=angular.module('App', []);
app.controller('FirstCtrl', function ($scope) {
$scope.hello = "Hello Anson";
});
注意一下，controller裡面的值只會在自己的範圍內生效，這也很大的解決了我們全域的問題。比如像下面這樣子的範例，只能存取各自的內容，不會影響到別的區域，比如像下
面的範例。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
</div>
<hr />
<div ng-controller="SecondCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.hello = "Hello Anson";
})
.controller('SecondCtrl', function ($scope) {
$scope.hello = "Hello man";
})
</script>
</body>
</html>
controller也有繼承的問題，我們只需要使用巢狀的controller就可以有繼承的觀念。我們可以看看像下面這樣子的範例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
<br />
{{test}}
<hr />
<div ng-controller="SecondCtrl">
<input type="text" ng-model="test" class="form-control" />
{{hello}}
<br />
{{test}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
})
.controller('SecondCtrl', function ($scope) {
});
</script>
</body>
</html>
基本上FirstCtrl不能使用SecondCtrl範例的內容，但SecondCtrl卻可以使用到FirstCtrl的。但是如果巢狀的Controller使用一樣的變數呢??這樣子的話在父Ctrl輸入的時候會影響到子類別的，然後子類別輸入之後，就又都各自作業了，這很容易造成豆相干擾，用說明的很難懂，直接看DEMO實際操作比較清楚
如下面的範例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
<hr />
<div ng-controller="SecondCtrl">
<input type="text" ng-model="hello" class="form-control" />
{{hello}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
})
.controller('SecondCtrl', function ($scope) {
});
</script>
</body>
</html>
所以現在很多大師們都比較推像下面這樣的語法，這樣就算有一樣的變數，也不會互相干擾，這也可以稱為是controllerAs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl as firstCtrl">
<input type="text" ng-model="firstCtrl.hello" class="form-control" />
{{firstCtrl.hello}}
<hr />
<div ng-controller="SecondCtrl as secondCtrl">
<input type="text" ng-model="secondCtrl.hello" class="form-control" />
{{secondCtrl.hello}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
var self = this;
self.hello = "Hello Anson";
})
.controller('SecondCtrl', function ($scope) {
var self = this;
self.hello = "Hello Kin";
});
</script>
</body>
</html>
至於怎樣的做法比較好，就看團隊的定義，有些人強調controller做的事情要單一，在下比較認為盡量不要使用巢狀controller的方式，我個人覺得可讀性會比較差，而且也會間接讓程式碼變得越來越複雜，但如果界面越來越複雜的話呢?當然每個人都有自己的見解來規劃架構，為了不離題，這邊的討論先到這邊。
以上的內容再請大家指教。
