0

下面是我的应用程序布局：

在此处输入图像描述

app.html代码如下：

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>My AngularJS App</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="/static/app/controllers.js"></script>
</head>
<body>
    <ul class="nav">
        <li><a href="#admin">Admin</a></li>
        <li><a href="#sales">Sales</a></li>
        <li><a href="#purchase">Purchase</a></li>
    </ul>

    <div ng-controller="AppCtrl" ng-include="view.url">
    </div>

</body>
</html>

/static/app/controllers.js是：

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

app.controller('AppCtrl', ['$scope', '$location',
    function ($scope, $location) {

        $scope.$watch(
            function () {
                return $location.path();
            },
            function (path) {
                var moduleName = path.split("/")[1];
                if (moduleName) {
                    $scope.view = { url: "/static/app/" + moduleName + "/" + moduleName + ".html" };
                }
            });

    } ]);

现在假设admin.html是：

<div>
    <p>Admin</p>
</div>

sales.html 和 purchase.html 差不多。然后我的应用程序的导航按预期工作；单击管理链接时，会加载并显示 admin.html。但是如果admin.html如下：

<div>
    <p>Admin</p>
    <script src="/static/app/admin/controllers.js"></script>
    <div ng-controller="AdminCtrl" ng-include="subView.url">
    </div>
</div>

和/app/admin/controllers.js是

var admin = angular.module('MyApp.Admin', []);

admin.controller('AdminCtrl', ['$scope', '$location',
    function ($scope, $location) {


    } ]);

然后当点击管理员链接时，谷歌浏览器控制台中会抛出以下错误：

Error: Argument 'AdminCtrl' is not a function, got undefined
    at Error (<anonymous>)

如果我将 AdminCtrl 移动到 /app/controllers.js，那么它可以工作；但我希望它位于自己的目录中。有人可以帮我弄这个吗？此外，下一步是显示“子视图”，类似于导航“视图”的方式。对此的任何提示将不胜感激。

4

1 回答 1

2

您需要将您的MyApp模块（在其定义中）与您的模块连接起来，MyApp.Admin如下所示：

angular.module('MyApp', ["MyApp.Admin"]);

但是对于更大的应用程序，您可能希望查看UI-Router 项目...

于 2013-07-13T09:11:55.207 回答