Not able to display view in Angular

Question

Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?

index.html

<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-route.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/boards/boardsController.js"></script>
</body>
</html>

app.js

   'use strict';
    var app = angular.module('KanbanBoard', ['ngRoute']);

    (function () {

        app.config(function ($routeProvider) {

            $routeProvider.when("/boards", {
                controller: "BoardsController",
                templateUrl: "/app/boards/boardsView.html"
            });

            $routeProvider.otherwise({ redirectTo: "/boards" });

        });

    })();

controller.js

'use strict';
(function () {
    app.controller('BoardsController', ['$scope', function ($scope) {
        $scope.users;
        this.users = [
                    {
                        id: 0,
                        email: '[email protected]',
                        name: 'A',
                        surname: 'B',
                        initials: 'AB',
                        boards: [
                            {
                                id: 0,
                                title: 'Welcome Board',
                                description: 'Board sample',
                                isArchived: false,
                            },
                            {
                                id: 1,
                                title: 'Project X',
                                description: 'Project X description',
                                isArchived: false,
                            }
                        ]
                    }
        ];
        $scope = this.users;
    }]);
})();

boardView.html

<div ng-controller="BoardsController as boardsCtrl">
    <div ng-repeat="user in boardsCtrl.users">
        {{user.name + " " + user.surname}}
        <ul>
            <li></li>
        </ul>

    </div>
</div>

I would personally put the angular.module('KanbanBoard', ['ngRoute']); inside the self executing!! Theres no reason to have it outside — Callum Linington
– Callum Linington, Commented Nov 11, 2014 at 8:33
Do you have a ng-app attribute defined. Also $scope = this.users; is very strange line. Did you mean $scope.users = users? — xZ6a33YaYEfmv
– xZ6a33YaYEfmv, Commented Nov 11, 2014 at 8:35
yes ng-app is in place in index.html, please look edited answer — GibboK
– GibboK, Commented Nov 11, 2014 at 8:38
I have done a plnker for you, if you lay out your angular app like I have, you will find it so much easier to make proper modular apps. Plus its cleaner to look at and read IMHO — Callum Linington
– Callum Linington, Commented Nov 11, 2014 at 8:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

In the body of your webpage it seems that you are missing ng-view:

<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <div ng-view></div> <!--this is required.-->

    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-route.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/boards/boardsController.js"></script>
</body>
</html>

From the documentation:

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 11, 2014 at 8:43

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Callum Linington Over a year ago

Not only that, when I did a plnker I took out the BoardsController as bc and it worked.... maybe something there was wrong

Jai Over a year ago

Yeah maybe OP is using older version of angular.

phucat · Accepted Answer · 2014-11-11 08:47:20Z

0

You missed adding the Boardview.html with controller on your index.html

It could be done inline or by using ng-include:

<div ng-include="boardView.html"></div>

answered Nov 11, 2014 at 8:47

phucat

544 bronze badges

Collectives™ on Stack Overflow

Not able to display view in Angular

2 Answers 2

From the documentation:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

From the documentation:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related