CODEWITHSUNDEEP
javascripthtmlangularjs
Mustehssun Iqbal
Mustehssun Iqbal

Reputation: 566

Getting started - Controller not a function got undefined

I am getting started with Angular routes. When I define the angular route for someNameController by putting its code into a controllers file and putting the html into a html file, the controller does not seem to bind well with the html. However, it is working correctly with my other controllers.

Links I have tried: ngRoute not working. is there something i am doing wrong angularjs ngRoute not working https://docs.angularjs.org/error/ng/areq?p0=controllers%2FsomeNameController&p1=not%20a%20function,%20got%20undefined

index.html

 <!DOCTYPE HTML>
    <html>
        <head>
            <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

            <script src="bower_components/angular/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

            <script src="app.js"></script>
            <script src="config.js"></script>
            <script src="controllers/someNameController.js"></script>

        </head>
        <body>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="jumbotron">
                            <div ng-app="someApp">
                                <div ng-view></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

someCustomersView.html

<div>
    <h2>
        Hello, world!
    </h2>
    <p>
        {{ desc }}
    </p>
    <p>
        <a class="btn btn-primary btn-large" href="#">Learn more</a>
    </p>
    <input type="text" class="form-control" ng-model="someName"/>
    <br>
    <p>{{ someName | uppercase }}</p>

    <ul ng-repeat="customer in customers">
        <li class="list-group-item">{{ customer | lowercase }}</li>
    </ul>
</div>

someNameController.js

someApp.controller("someNameController", function($scope){
    $scope.customers = ["Customer2", "Customer3", "Customer4", "Customer5"]
})

Upvotes: 2

Views: 58

Answers (1)

Mustehssun Iqbal
Mustehssun Iqbal

Reputation: 566

I made a mistake while declaring routes in config.js file. I was assigning directory while assigning routes even after including the scripts for controllers in the html along with the directory. I was doing this in config.js:

someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
    $routeProvider.when("/showSomeButtonsGroup", {
        templateUrl : "views/view3.html",
        controller : "controllers/page67Controller"
    })
    .when("/", {
        templateUrl : "views/someCustomersView.html",
        controller : "someNameController"
    })
}])

instead of doing like this:

someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
    $routeProvider.when("/showSomeButtonsGroup", {
        templateUrl : "views/view3.html",
        controller : "page67Controller"
    })
    .when("/", {
        templateUrl : "views/someCustomersView.html",
        controller : "someNameController"
    })
}])

Upvotes: 1

Related Questions