CODEWITHSUNDEEP
javascripthtmlangularjs
Kiwi
Kiwi

Reputation: 2773

Angular app not being bootstrapped?

I'm trying to figure out why my angular app isn't working.

so I have the following code:

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();

        });
})();

but the app isn't loading any of my views, my controllers arn't reporting test and it's not getting redirected to /# nor any errors are showing up, any one has a clue?

Upvotes: 0

Views: 97

Answers (1)

mindparse
mindparse

Reputation: 7215

It looks like you are not using the ui-view directive, see https://github.com/angular-ui/ui-router/wiki/The-Components

Your 

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

Should be

<div ui-view></div>

Upvotes: 2

Related Questions