Defining AngularJS controller in separate file.

Question

0.00/5 (No votes)

See more:

I have made two separate files home.html & ctrl1.html . In home.html, I created main controller and routing while ctrl.html contains a simple controller. Here is the code

home.html

HTML

<html ng-app="testApp">
<head>
    <title>AngularJS</title>
</head>
<body ng-controller="testCtrl">
    <div ng-view></div>
</body>

<script src="angular-1.2.1/angular.js"></script>
<script src="angular-1.2.1/angular-route.js"></script>

<script language="javascript">
    var testApp = angular.module('testApp', ['ngRoute']);

    function testCtrl($scope, $rootScope, $http) {
        $rootScope.TestVar = 'Welcome';
    };
    testApp.controller('testCtrl', testCtrl);

    testApp.config(['$routeProvider',
            function ($routeProvider) {
                $routeProvider.
                    when('/Users', {
                        templateUrl: 'ctrl1.html',
                        controller: '',
                        title: 'Users'
                    }).
               otherwise({
                   redirectTo: 'Users',
                   title: 'Welcome'
               });
            }]);
</script>

</html>

ctrl.html

HTML

<script language="javascript">
    function Ctrl1($scope, $rootScope, $http) {
        $rootScope.TestVar = 'Hello';
    };

   angular.module('testApp').controller('Ctrl1', Ctrl1);
</script>

<div ng-controller="Ctrl1">
   Some thing here {{Test}}
</div>

When I browse to User router, it gives me following error.

JavaScript

Error: [ng:areq] Argument 'Ctrl1' is not a function, got undefined

Posted 31-Jan-16 4:31am

iamalik

Add a Solution

Comments

Konstantin A. Magg 31-Jan-16 16:31pm

Do you reference ctrl.html somewhere from home.html? Does this file get loaded in your app?

iamalik 1-Feb-16 8:47am

Does it require to add ctrl.html?

Konstantin A. Magg 1-Feb-16 9:32am

My guess is, `Ctrl1` is not defined because the script in ctrl.html is not laoded or not loaded in the right place.

Do you have a missmatch in your file names?
- templateUrl: ctrl1.html
- ctrl.html

iamalik 2-Feb-16 2:38am

No, file names are not different.
Actually router loads file in but doesn't register Controller.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Konstantin A. Magg · Answer 1 · 2016-02-01T11:31:00

Fixing the HTML file name above does not solve your problem. You still cannot resolve the ng-controller in this line: <div ng-controller="Ctrl1"></div>.

You run into several problems here:

Just because you include a <script> in ctrl.html, the code does not get automatically called (Try it with an alert("Hello World"); after registering your controller).
I am not sure, if you can register a controller after your ng-app is fully loaded and the configuration phase is finished.

I suggest, you re-thing the structure of your files and the procedure to startup your ng-app.

Hope this helps.
KM