AngularJS adding controller

Question

I am building up a single page website using MEAN, I've tried multiple tutorials and googled a lot of examples but i cant seem to get it working. i am using angular-routing for my templates, but when I add a controller - the templates is not showing. Not any error.

app.js

angular.module('sampleApp', ['frontPageCtrl','ngRoute', 'appRoutes']);

appRoutes.js

angular.module('appRoutes', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider 

        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'frontController'
        })
        .otherwise({
            redirectTo: '/'
        });


    $locationProvider.html5Mode(true);
    }]);

frontPageController.js

angular.module('frontPageCtrl', [])
.controller('frontController', function($scope, $http) {
});

In my index.html file I have included all three files with app.js first and after angular include.

EDIT:

This is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">

  <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/frontPage.css">
<link rel="stylesheet" href="libs/bootstrap/"

<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>

<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/controllers/frontPageController.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="frontController">
<div id="container">

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

</div>
</div>
</body>
</html>

is frontController as a variable - available in that file where you have $routeProvider ? then use frontController - without quotes (!) — shershen, Feb 23 '16 at 10:44
@user2798413, Don't use same controller for template and index file; create separate controller for it — codeninja.sj, Feb 23 '16 at 11:01
Try first put all JS angular code into one file. if problem is solved then it's an file order issue — shershen, Feb 23 '16 at 11:01
Refer my answer: http://stackoverflow.com/questions/35453718/unknown-provider-error-angularjs-app-issue/35457340#35457340 — codeninja.sj, Feb 23 '16 at 11:02

score 2 · Answer 1 · answered Feb 23 '16 at 10:44

Things to check

Have you added ng-view in ur main landing page
Have you addedd ng-app="sampleApp" in main landing page.
Put break point in controller just to make sure it gets in there
Check network tab and make sure all javascript files are loading

And don't forget to mark it as an answer if this answers ur question :)

Sunil Lama · Answer 2 · 2016-02-23T16:50:50.577

As far as i can see after viewing your code, your dependency injection is wrong. See the changes in appRoutes.js, app.js ,index.html and you need home.html with frontController inside your views folder.

Your app.js should be:

angular.module('appRoutes', []);

Your appRoutes.js should be:

    angular.module('sampleApp', ['frontPageCtrl','ngRoute', 'sampleApp'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        $routeProvider 

            .when('/', {
                templateUrl: 'views/home.html',
                controller: 'frontController'
            })
            .otherwise({
                redirectTo: '/'
            });


        }]);

And Your frontPageController.js:

    angular.module('frontPageCtrl', [])
    .controller('frontController', function($scope, $http) {
    });

And, In your Index.html:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/frontPage.css">
      <link rel="stylesheet" href="libs/bootstrap/"
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
      <script src="js/controllers/frontPageController.js"></script>
   </head>
   <body ng-app="sampleApp">
      <div id="container">
         <div id="content">
            <div ng-view></div>
         </div>
      </div>
   </body>
</html>

And, Your home.html should have the controller frontController. By default, your home.html will take the frontController, if ng-controller="frontController" not used.

<div ng-controller="frontController">

Here is the working plunker: http://plnkr.co/edit/ohe4U0Am83U5Hj05HOIv?p=preview

let me edit it, you were missing your index, thats why i assumed and posted it. — Sunil Lama, Feb 23 '16 at 11:00
still not working, i even tried putting all my angular code in the same file as shershen commented on original post. — user2798413, Feb 23 '16 at 11:14
check out the plunker , its working, plunker link is at the bottom of my answer. If you checked your console. $location in HTML5 mode requires a tag to be present. — Sunil Lama, Feb 23 '16 at 11:25
Before using tag, you have to learn about the base tag, its advantages and disadvantages.The topic of understanding tag is a question itself. http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag refer it to understand. — Sunil Lama, Feb 23 '16 at 16:53

AngularJS adding controller

2 Answers2