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
– shershen, Commented Feb 23, 2016 at 10:44

Atul Chaudhary · Accepted Answer · 2016-02-23 10:44:26Z

2

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 :)

answered Feb 23, 2016 at 10:44

Atul Chaudhary

3,7321 gold badge35 silver badges52 bronze badges

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

Comments

Sunil Lama · Accepted Answer · 2016-02-23 16:50:50Z

1

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

edited Feb 23, 2016 at 16:50

answered Feb 23, 2016 at 10:53

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

6 Comments

user2798413 Over a year ago

Tried this and still nothing

Sunil Lama Over a year ago

let me edit it, you were missing your index, thats why i assumed and posted it.

user2798413 Over a year ago

still not working, i even tried putting all my angular code in the same file as shershen commented on original post.

Sunil Lama Over a year ago

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 <base> tag to be present.

user2798413 Over a year ago

Where did you put the <base> tag? dont see it in the plunker

|

Collectives™ on Stack Overflow

AngularJS adding controller

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related