CODEWITHSUNDEEP
javascripthtmlangularjs
Jaime Alcántara Arnela
Jaime Alcántara Arnela

Reputation: 2135

Angular not showing html page

I'm implementing Angular for the first time. I'm using factories, controllers and templates (don't know if there's another way) in Eclipse. So, I'm redirecting to my index.html page:

<!DOCTYPE html>
<html id="list" data-ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"  href="../css/stylesheet1.css"   />
<title>App</title>
 <!-- Include the AngularJS library -->
    <script src="../js/angular/angular.js"></script>
    <script src="../js/angular/angular-route.js"></script>
<!-- Modules -->
    <script src="../js/app.js"></script>
    <script src="../js/factories/objectFactory.js"></script>
    <script src="../js/factories/usersFactory.js"></script>
    <script src="../js/controllers/headerCtrl.js"></script>
    <script src="../js/controllers/listCtrl.js"></script>
    <script src="../js/controllers/objectHandlerCtrl.js"></script>
</head>
<body>
    <div data-ng-controller="headerCtrl as headerVM"> 
        <nav id="links">
            <div class="inner"><button onclick="location.href ='#!/createObject'">Create</button></div>
            <div class="inner"><button onclick="location.href ='#!/editUser'">Edit user</button></div>
            <div class="inner"><button onclick="location.href ='#!/deleteUser'">Delete user</button></div>
            <div class="inner"><button onclick="location.href ='../LogOutServlet'">Exit</button></div>
        </nav>
    </div>
    <div data-ng-view></div>
  </body>
</html>

In the third line starting at the end I have a div that should be dinamically changed with angular depending on the upper buttons, but, although the url change when I press the buttons, this area is empty.

To coordinate the route, I have the app.js:

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
    $routeProvider
        .when("/", {
            controller: "listCtrl",
            controllerAs: "listVM",
            templateUrl: "listObjectTemplate.html",
            resolve: {
                delay: function($q, $timeout) {
                var delay = $q.defer();
                $timeout(delay.resolve, 500);
                return delay.promise;
                }
            }
        })
        .when("/createObject", {
            controller: "objectHandlerCtrl",
            controllerAs: "objectHandlerVM",
            templateUrl: "noteHandlerTemplate.html"
    })
    .when("/editObject/:ID", {
            controller: "objectHandlerCtrl",
            controllerAs: "objectHandlerVM",
            templateUrl: "objectHandlerTemplate.html"
    })
    .when("/deleteNote/:ID", {
            controller: "objectHandlerCtrl",
            controllerAs: "objectHandlerVM",
            templateUrl: "objectHandlerTemplate.html"
    });
})

I will not add more code unless you think it's necessary to keep this simple.

So, is it necessary some other configuration? Right now the angular part is not working at all (the div seems to be empty no matter the changes in the url).

I'm using AngularJS 1.6.9.

Upvotes: 1

Views: 1420

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Try removing ng-controller data-ng-controller="headerCtrl as headerVM" which is not necessary since you are configuring on the route config

Upvotes: 1

Related Questions