控制器以及它們應該如何在Angular中實現？

Question

對不起，如果這看起來像一個愚蠢或簡單的問題，但我有點困惑，我一直在尋找Angular的許多不同類型的教程來理解這個概念以及如何創建一個應用程序。

的問題是如何給你附加控制器到頁面上，我看到了兩種方法：

1. 添加控制器腳本的頁面
2. 顯示控制器app.js內，其中網站路由是。

這裏是我的時刻，請讓我知道是否有這個代碼的任何問題：

var app = angular.module('myApp', [ 
    'ngRoute' 
]); 

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/home.html', 
     controller: 'homeController' 
     }). 
     when('/login', { 
     templateUrl: 'partials/login.html', 
     controller: '' 
     }). 
     when('/signup', { 
     templateUrl: 'partials/signup.html', 
     controller: '' 
     }). 
     when('/dashboard', { 
     templateUrl: 'partials/dashboard.html', 
     controller: '' 
     }). 
     otherwise({ 
     redirectTo: '/404', 
     templateUrl: 'partials/404.html' 
     }); 
    }]); 

app.controller('homeController', ['$scope', function($scope) { 
    $scope.message = "This is the Home Page"; 
}]); 

我再次真正的新角度。

更新到單個控制器文件： app.js：

var app = angular.module('myApp', [ 
    'ngRoute' 
]); 

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/home.html', 
     controller: 'controllers/homeController.js' 
     }). 
     when('/login', { 
     templateUrl: 'partials/login.html', 
     controller: '' 
     }). 
     when('/signup', { 
     templateUrl: 'partials/signup.html', 
     controller: '' 
     }). 
     when('/dashboard', { 
     templateUrl: 'partials/dashboard.html', 
     controller: '' 
     }). 
     otherwise({ 
     redirectTo: '/404', 
     templateUrl: 'partials/404.html' 
     }); 
    }]); 

控制器文件：

app.controller('homeController', ['$scope', function($scope) { 
    $scope.message = "This is the Home Page"; 
}]); 

Answer 1

這是一個純粹的組織選擇。只要瀏覽器具有可用的控制器代碼，就沒有關係。

但是，除非您創建一個小型演示，否則將所有控制器定義在單個JavaScript文件中將很快變得無法管理：文件太大，您將不斷搜索控制器，團隊中的每個人將修改相同的文件，導致衝突等。

簡單的規則是：每個AngularJS組件有一個JS文件。

如果您擔心生產中的HTML頁面需要加載兩個JS文件，那麼請確保使用gulp或grunt進行學習，並從所有使用的小JS文件生成一個縮小的JS文件在開發期間。

編輯：

路由的controller屬性不應該是一個JS文件的路徑。它應該是一個控制器的名稱。因此，它應該保持與第一個工作示例中的完全一致。

您需要了解瀏覽器的工作方式：如果HTML包含兩個<script>元素，則它的工作方式與將單個代碼連接到兩個腳本的代碼相同。因此，將代碼拆分爲兩個文件並不會改變代碼的寫入方式。

Answer 2

不，你的代碼沒問題。我通常爲所有路由選項使用兩個不同的文件app.js，併爲不同的控制器使用一個controller.js文件。單個文件對我來說似乎有點混亂。 每個控制器的單個文件的工作原理，但我看到大多數用戶案例我只看到每頁的幾行代碼，但如果在每個控制器中有大量代碼，您可以使用

Answer 3

我爲每個模型創建一個Controller我的數據庫：例如：ProjectController.js，PeopleController.js等。我使用app.js只爲路由和通用控制器，如頁眉，頁腳等。

有沒有一個嚴格的方法來做到這一點，你必須根據你的架構設計來決定它。但我可以給你一個提示：永遠不要在你的.html文件中定義你的控制器，因爲它使得它很糟糕，可讀性較差。

Answer 4

路線規格更改爲以下代碼：

app.config(['$routeProvider', 
function($routeProvider) { 
$routeProvider. 
    when('/', { 
    templateUrl: 'partials/home.html', 
    controller: 'homeController' //change here 
//controller should be the name of the controller, 
//not the file containing the controller function 
    }). 
    when('/login', { 
    templateUrl: 'partials/login.html', 
    controller: '' 
    }). 
    when('/signup', { 
    templateUrl: 'partials/signup.html', 
    controller: '' 
    }). 
    when('/dashboard', { 
    templateUrl: 'partials/dashboard.html', 
    controller: '' 
    }). 
    otherwise({ 
    redirectTo: '/404', 
    templateUrl: 'partials/404.html' 
    }); 
}]);