Angular应用程序未启动

Angular app not being bootstrapped?

本文关键字：启动 应用程序 Angular      更新时间：2023-09-26

我正试图弄清楚我的angular应用程序不工作的原因。

所以我有以下代码：

app.modules.js

angular.module("quickscan", [
        "ui.router",
        "quickscan.controllers"
]);
angular.module("quickscan.controllers", []);

app.routes.js

var app = angular.module("quickscan");
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
    $urlRouterProvider.otherwise("/test");
    $stateProvider
        .state("app", {
            abstract: true,
            templateUrl: "shared/Layout/Main.html"
        })
        .state("app.root", {
            url: "/test",
            templateUrl: "shared/Main/Main.html"
        })
        .state("buildings", {
            url: "/buildings",
            controller: "BuildingDetailController",
            templateUrl: "components/BuildingDetail/BuildingDetailView.html"
        });
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Quickscan App v2</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="content/css/app.css">
</head>
<body>
    <div ng-view id="view"></div>
    <!-- order dependend scripts -->
    <script src="scripts/jquery/jquery.js"></script>
    <script src="scripts/angular/angular.js"></script>
    <script src="app/app.module.js"></script>
    <!--remaining scripts-->
    <script src="content/js/scripts.js"></script>
    <!--angular scripts-->
    <script src="content/js/all.js"></script>
    <script>
        setTimeout(function() {
            angular.bootstrap(document, ['quickscan']);
            console.log("Hello");
        }, 3000);
    </script>
</body>
</html>

all.js

(function () {
    var app = angular.module("quickscan");
    app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
        $urlRouterProvider.otherwise("/test");
        $stateProvider
            .state("app", {
                abstract: true,
                templateUrl: "shared/Layout/Main.html"
            })
            .state("app.root", {
                url: "/test",
                templateUrl: "shared/Main/Main.html"
            })
            .state("buildings", {
                url: "/buildings",
                controller: "BuildingDetailController",
                templateUrl: "components/BuildingDetail/BuildingDetailView.html"
            });
    });
})(); 
var Building = function (data) {
 // some other class
    return building;
};
var Category = function (data, parent, building) {
        // some class 
    return category;
};
(function () {
    "use strict";
    angular
        .module("quickscan.controllers")
        .controller("BuildingDetailController",
        function ($scope, $rootScope) {
            var vm = this;
            vm.title = "Building Detail";
            function activate() {
                console.log("test");
            }
            activate();
        });
})();
(function () {
    "use strict";
    angular
        .module("quickscan.controllers")
        .controller("CategoryDetailController",
        function ($scope, $rootScope) {
            var vm = this;
            vm.title = "Building Detail";
            function activate() {
                console.log("test");
            }
            activate();
        });
})();

但该应用程序没有加载我的任何视图，我的控制器没有报告test，也没有重定向到/#，也没有显示任何错误，有人知道吗？

看起来您没有使用ui view指令，请参阅https://github.com/angular-ui/ui-router/wiki/The-Components

您的

<div ng-view id="view"></div>

应该是

<div ui-view></div>
相关文章：