routeProvider 不起作用，并且使用 angularjs 1.5 未定义控制器答案

【问题标题】：routeProvider doesn't work and controller undefined using angularjs 1.5routeProvider 不起作用，并且使用 angularjs 1.5 未定义控制器
【发布时间】：2017-04-05 16:43:23
【问题描述】：

我正在开发我的第一个应用程序。当我在 webbrowser 中打开它时，出现此错误： Uncaught ReferenceError: controller is not defined 在 app.js:3 在 app.js:15

我在创建 app.js 文件并尝试将我的 controller.js 链接到该文件后收到此错误。此外， routeProvider 似乎还没有工作。我的占位符停止工作，以前确实有效。

我简化了代码以保持可读性。我有更多的 html 文件并将引导程序与 JQuery 和 CSS 结合使用。有人知道这里出了什么问题吗？

app.js

(function(){

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

    .config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/main', {
            templateUrl: '../main.html',
                controller: 'controller'
        })
        .otherwise({redirectTo: '../main'});

});
})();

controller.js

     (function() {
         angular.module('controller', ['ngRoute'])
             .controller('controller', ['$scope', function ($scope) {
        }]);
    })();

index.html

<!DOCTYPE html>
<html data-ng-app = "myApp">

<head>
<meta charset="utf-8"/>
<title> Who Brings What </title>
</head>

<body>
<div class="container">
    <nav class="navbar navbar-default">
/*more code here */
    </nav>
</div>

<div data-ng-view></div>

<script     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">    </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-    route.js"></script>
<!--<script     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-   route.js">    </script>-->
<script src = "../controller.js"></script>
<script src = "../app.js"></script>

</body>

</html>

main.html

<div>
    Main Body
</div>

【问题讨论】：

这段代码错误太多

标签： javascript angularjs html controller route-provider

【解决方案1】：

您的代码几乎没有问题，

(i)由于您在单个文件中单独定义了控制器，因此您可以安全地将其从初始模块中删除。

function(){
var myApp = angular.module('myApp',['ngRoute'])
myApp.config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/main', {
            templateUrl: './main.html',
                controller: 'controller'
        })
        .otherwise({redirectTo: '/main'});
});
})();

(ii) ngRoute 不需要注入两次，直接使用全局声明的模块即可

 (function() {
           app.controller('controller', ['$scope', function ($scope) {
        }]);
 })();

DEMO

【讨论】：