Prasanna
Prasanna

Reputation: 305

angular js module cannot be loaded

I am just starting with AngularJS. Just tried hands with a simple snippet (below). But I am seeing the error in the browser console.

Uncaught Error: [$injector:modulerr] Failed to instantiate module notesApp due to: Error: [$injector:nomod] Module 'notesApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

<html ng-app="notesApp">
    <body ng-controller="notesMainCtrl as ctrl">
        <form ng-submit="ctrl.submitAction()">
            <input type="text"></input>
            <input type="password"></input>
            <input type="submit"></input>
        </form>
        <span>username:{{ctrl.username}}  password:{{ctrl.password}}</span>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" />
        <script type="text/javascript">
            angular.module('notesApp',[])
                    .controller('notesMainCtrl',[function(){
                        this.username="username";
                        this.password="password";
                        this.submitAction=function(){
                            console.log(this.username+':::'this.password);
                        };
                    }]);
        </script>
    </body>
</html>

Upvotes: 1

Views: 86

Answers (1)

Callum Linington
Callum Linington

Reputation: 14417

There were a couple of things, here is working plunker..

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" />

this can't be self closing. i.e. needs </script>

console.log(this.username+':::'this.password);

there is a missing + sign here between ':::' and this.password

--- Edit ---

Just some other observations, you are missing ng-model on the input boxes, so they won't two-way data bind any information back to the controller.

<input type="password" ng-model="password" />

Upvotes: 2

Related Questions