Ng-view in AngularJS doesn't work

Question

I have a simple angular app and two links which I want angular to change the URL for me and show the right view for each link in the same single page application. But when I add controllers' module in main module - it doesn't work!

app.js

'use strict';

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select','appControllers'])

.config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/roles',{
        templateUrl: '/views/roles.html',
        controller: 'rolesController'
    })
    .otherwise(
        { redirectTo: '/views/index.html'}
    );
}]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Spring boot and Angularjs Tutorial</title>
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
</head>
<body>
<h2>Administrator Panel</h2>
<div class="home-section">
<ul class="menu-list">
    <li><a href="#/report">Report</a></li>
    <li><a href="#/roles">Roles</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>

controllers.js

'use strict';

var appControllers = angular.module('appControllers');

appControllers.controller('rolesController', ['$scope', function($scope) {
$scope.headingTitle = "Roles List";
}]);

When there is no 'appControllers' in app.js views is working, but controllers don't.

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select'])

With - nothing works. What should I do?

To help yourself get an answer quickly, you should first try to pinpoint where the problem is by trying to get the simplest and shortest sample of code that show the problem. Strip everything that isn't necessary for the purpose of your question here. — Emile Bergeron
– Emile Bergeron, Commented Jul 22, 2016 at 14:13

KreepN · Accepted Answer · 2016-07-22 14:19:41Z

3

Change

var appControllers = angular.module('appControllers');

to

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

Your code is trying to fetch an existing module that doesn't exist.

From the documentation :

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

answered Jul 22, 2016 at 14:19

KreepN

8,5981 gold badge43 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Ng-view in AngularJS doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related