-1

I have a Simple page like 

<body ng-app="myApp">

 <div>
        <h1>Courses</h1>
        <ul class="nav">
            <li><a href="#" ui-sref="route1">Route 1</a></li>
        </ul>
    </div>

<div ui-view>
</div>

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/app/app.js"></script>

And a app.js file like :

var myApp = angular.module('myApp', ['ui.router']);
var configFunction = function ($stateProvider, $urlRouterProvider) {
 $stateProvider
    .state('route1', {
        url: "/courses",
        templateUrl: "Scripts/app/views/Course/CourseList.html"
    });
}
configFunction.$inject = ['$stateProvider', '$urlRouterProvider'];

myApp.config(configFunction);

and in my CourseList.html I have :

<script src="../../Controller/Course/CourseController.js"></script>
<div ng-controller="CourseController">
    <h1>index</h1>

    <table class="table table-striped">
        <thead>
            <tr>
                <td>Id#</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody ng-repeat="course in courses |orderBy:'Id' ">
            <tr>
                <td>{{course.Id}}</td>
                <td>{{course.Name}}</td>
            </tr>
        </tbody>
    </table>

</div>

And my controller code:

angular.module('myApp').controller('CourseController', function ($scope, $http) {

$scope.course = {};

$http.get('/api/Course').success(function (data) {

    $scope.courses = data;

});  
});

Now when I click on Route 1 link I give this Error:

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

And when I comment controller refrence in CourseList.html and add it to index.html it's worke!!! Is there any way that I dont refrence all controllers in Index.html?

M.Azad
  • 3,673
  • 8
  • 47
  • 77
  • Just wanted to give you some hints, how we can lazily load controller. It cannot be done inside of the view template (as you've tried). But we can use some tools to load controller code once firstly touched... and cache it then... here you can see more with working plunkers [here](http://stackoverflow.com/q/22627806/1679310) and [here](http://stackoverflow.com/q/27465289/1679310) it should show how we can load controllers async way – Radim Köhler May 05 '15 at 15:46

1 Answers1

1

You need to call your controller script file in your main screen 

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
**//call your controller in here.**
<script src="../../Controller/Course/CourseController.js"></script>(Check  
 the url is correct)
<script src="Scripts/app/app.js"></script>

Because your controller does not defined before your html is defined on stateProvider

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234