如何将控制器与每个视图的每个文件分开答案

【问题标题】：How to seperate controllers to each files for each views如何将控制器与每个视图的每个文件分开
【发布时间】：2017-01-08 02:19:23
【问题描述】：

在发布之前做了一些研究，但还没有找到解决方案。

我想为每个视图创建单独的控制器文件，并按需加载它们（有点）。可能吗？喜欢从各自的视图文件中引用控制器？

app.js - 主入口点

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('!');
    $routeProvider.when('/', {
        templateUrl: 'views/login.html', 
        controller: 'loginController'
});

index.html

<html>
    <head>
        <script src="js/angular.js"></script>
        <script src="js/angular-route.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-view>
        </div>
    </body>

views/login.html

<div>
<h1>{{greeting}}</h1>
</div>
<script src="js/controllers/loginController.js"></script>

loginController.js

myApp.controller('loginController',function($scope){
    $scope.greeting =  "Hello World!";
});

这可能是一些愚蠢的想法（我绝对不喜欢在 head 部分引用 JS 文件）。有什么想法吗？

【问题讨论】：

您在 login.html 中编写的代码。它不工作吗？
不。我仍然收到“Argument 'loginController' is not aNaNunction, got undefined' 错误
你试过在标记文本之前包含文件吗？
@Giri 在重定向到路由之前，您应该在应用模块中注册控制器> 我说您可以考虑在路由解析功能中使用ocLazyLoading，您可以look here 获取更多信息详情
不，那行不通。动态加载的 html 视图（来自 angular router 或 ui-router）也不会加载该 html 中的引用脚本。如果您查看加载的资产（即引用的文件）来验证您可以在浏览器调试工具中看到这一点。

标签： angularjs angular-routing ngroute ng-view

【解决方案1】：

您可以使用 requireJS 或任何其他异步模块加载器 (ASM) 来执行此操作。

但是，如果您不是很有经验，我的建议是使用任务或构建运行程序，例如 grunt 或 gulp。

如果您使用像 yeoman 这样的生成器，您可以从一开始就很好地设置项目。

试试这个生成器，例如：https://github.com/Swiip/generator-gulp-angular

我强烈建议您遵循 John Papa 样式指南：https://github.com/johnpapa/angular-styleguide，它为如何将 angularJS 项目分解为适当的目录结构提供了很好的指导。然后，Gulp 或 Grunt 会将您的文件通过管道传输到您的构建中。

我以前使用过这些，并且完成这样的项目是一种乐趣。您还可以通过示例学习一些已经融入项目的良好编码实践。

【讨论】：