AngularJs Controller in External file and using route

Question

I have had a look through SO and nothing has helped.

This is my app.js

var app = angular.module("qMainModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
        .when("/", {
            templateUrl: 'templates/anonHome/anonHome.html',
            controller: 'templates/anonHome/anonHomeController'
        })
        .when("/about", {
            templateUrl: 'templates/anonHome/anonAbout.html',
            controller: 'templates/anonHome/anonAboutController'
        })
        .when("/services", {
            templateUrl: 'templates/anonHome/anonServices.html',
            controller: '/templates/anonHome/anonServicesController'
        })
        .when("/contact", {
            templateUrl: 'templates/anonHome/anonContact.html',
            controller: '/templates/anonHome/anonContactController'
        })
        .when("/register", {
            templateUrl: 'templates/anonHome/anonRegister.html',
            controller: '/templates/anonHome/anonRegisterController'
        })
        .when("/login", {
            templateUrl: 'templates/anonHome/anonLogin.html',
            controller: '/templates/anonHome/anonLoginController'
        })

        $locationProvider.html5Mode(true);
    })



app.controller("qMainController", function ($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
});

The routing works as expected and the partial templates are being shown but the partial templates controllers are not being recognised as a function.

The Layout Template looks like this

<!DOCTYPE html>
<html ng-app="qMainModule">
<head ng-controller="qMainController">
    <base href="/" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Qiao :: {{Title}}</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="../css/modern-business.css" rel="stylesheet" />
   <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="/scripts/angular.js"></script>
    <script src="../scripts/angular-route.js"></script>
    <script src="/app/app.js"></script>
    <script src="templates/anonHome/anonHomeController.js"></script>



  <!--  <link href="../styles/qiao.css" rel="stylesheet" /> -->


</head>
<body ng-controller="qMainController">
    <div ng-include="qNavigationTemplatePath">

    </div>

     <!-- Page Content -->
    <div class="container">
        <ng-view></ng-view>
    </div>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12" ng-controller="qMainController">
                Copyright &copy; {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
            </div>
        </div>
    </footer>

    <div >
        <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Script to Activate the Carousel -->
        <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
        </script>

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

The partial template looks like this:

<script src="anonHomeController.js"></script>

<div ng-controller="anonHomeController">

    <h1>{{Title}}</h1>

</div>

and its controller is this

function anonHomeController($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
};

The Question: How do I get Angular to recognise and use the partial template's controller?

add controller this way in your app.js: .when("/", { templateUrl: 'templates/anonHome/anonHome.html', controller: 'qMainController' }) — aliasav
– aliasav, Commented Oct 25, 2016 at 8:36
does your template controllers have the same module as that of your app module? Do you have a app.module() declaration in the controllers js. Is it different from your app module? — Mahesh
– Mahesh, Commented Oct 25, 2016 at 8:37
Just pass the name of controller in our route like controller:'anonHomeController' — gaurav bhavsar
– gaurav bhavsar, Commented Oct 25, 2016 at 8:42
@Mahesh I don't have any module declared in the partial template controller. I do in app.js as shown. — Dave Gordon
– Dave Gordon, Commented Oct 25, 2016 at 8:53
While defining a controller, don't use any paths. All you need is just use <script> tags in index.html, which will include all your functions. Now if your functions are just plain javascript, and you don't intend using angular.module('app').controller there, use it in the app.js, Just angular.module('app').controller('anonHomeController', anonHomeController); Note that your definition can still remain in the Javascript file /some/path/totemplate/anonHomeController.js. I suggest you try that and see if it works. — Mahesh
– Mahesh, Commented Oct 25, 2016 at 9:05

Mr Lister · Accepted Answer · 2016-11-06 09:58:42Z

While defining a controller, don't use any directory paths.

From the docs - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

controller – {(string|Function)=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

Note that the registered controller never has the entire path, it is the function definition itself or the function's name (a string). You may need module names, if you have exported like that, but that's different from a directory path.

All you need is just use <script> tags in index.html, which will include all your functions. Now if your functions are just plain javascript, and you don't intend using angular.module('app').controller there, use it in the app.js, Just angular.module('app').controller('anonHomeController', anonHomeController); Note that your definition can still remain in the Javascript file /some/path/totemplate/anonHomeController.js. I suggest you try that and see if it works.

app.js

    app.config(function ($routeProvider, $locationProvider) {
      $routeProvider
        .when("/", {
        templateUrl: 'templates/main/main.html',
        controller: 'MainCtrl'
      })

index.html

<script src="controllers.js"></script>

controllers.js

function MainCtrl ($scope) {
  $scope.name = 'World';

}

A working plnkr here

sisyphus · Accepted Answer · 2016-10-25 08:34:09Z

1

You have created your controller for each view as a regular JS function, which is incorrect. It should be like

app.controller("anonHomeController", function ($scope) {
    $scope.Title = " Welcome to Qiao";
    // rest of the controller code 
});

and the file should be anonHomeController.js at the path you have defined in the config. you also do not need to include the scipt tag in the header of the view. Check for some example here

answered Oct 25, 2016 at 8:34

sisyphus

4625 silver badges13 bronze badges

2 Comments

Dave Gordon Over a year ago

This requires the controller to be written in app.js which I don't want I want it to be in an external file.

sisyphus Over a year ago

Not at all. Like I said in the answer, it can be written in its own file anonHomeController.js at the path that you have specified in the config.

aliasav · Accepted Answer · 2016-10-25 09:25:39Z

You don't need to add complete path in your app.js for defining controllers.

If you're controllers are defined in the same file, then this should do the job:

$routeProvider
        .when("/", {
            templateUrl: 'templates/anonHome/anonHome.html',
            controller: 'xyzController'
        });

app.controller("xyzController", function ($scope) {
 // controller function here
});

If you want your controllers to be in an external file, you'll have to do the following:

1. Define the controllers module: 

    angular.module('app.controllers', [])
    .controller("homeController", function(){....})

Name this file as controllers.js

2. Now your main app.js should include this:

    angular.module('app', [
            'app.controllers',
        ])

Include controllers.js in your main html file

This requires the controller to be written in app.js which I don't want I want it to be in an external file.

Collectives™ on Stack Overflow

AngularJs Controller in External file and using route

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related