AngularJS adding controller

Question

AngularJS adding controller

82 Views Asked by user2798413 At 20 October 2024 at 08:00

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>

Original Q&A

There are 2 best solutions below

**Atul Chaudhary** · Answer 1

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

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

AngularJS adding controller

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-ROUTING

Related Questions in ANGULAR-DIRECTIVE

Related Questions in ANGULAR-TEMPLATE

Related Questions in ANGULAR-CONTROLLER

Trending Questions

Popular # Hahtags

Popular Questions