Question

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

我想为每个视图创建单独的控制器文件，并按需加载它们（排序）。可能吗？就像从各个视图文件中引用控制器一样？

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!";
});

这可能是一些愚蠢的想法（我绝对不喜欢在头部重新提供JS文件）。有什么想法吗？

Answer 1

您可以使用requireJS或任何其他异步模块加载程序（ASM）执行此操作。

但是，如果你不是很有经验，我的建议是使用任务或建立像grunt或gulp这样的跑步者。

如果您使用像自耕农这样的发电机，那么从一开始就可以很好地设置项目。

尝试使用此生成器，例如：https://github.com/Swiip/generator-gulp-angular

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

我之前使用过这些，这样做的项目很愉快。您还可以通过示例学习一些已经融入项目的良好编码实践。

如何为每个视图分隔控制器到每个文件

1 个答案: