Question

我正在处理我的第一个应用。当我在webbrowser中打开它时，我收到此错误：未捕获的ReferenceError：未定义控制器在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>

Answer 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

routeProvider使用angularjs 1.5

1 个答案: