Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule

4
votes

i trying to display 3 variables in view but getting errors in the console

here the code of script.js

var myApp = angular
    .module("myModule",[])
    .controller("myController", function ($scope) {
        var employee = {
            firstName: "Sunil"
            lastName: "Bhatraju"
            gender: "Male"
        };

        $scope.employee = employee;
    });

here is the code of demo.html

<!doctype html>
<html ng-app="myModule">
<head>
    <script src="Scripts.js/script.js"></script>
    <script src="Scripts.js/angular.js"></script>
</head>
<body>
    <div ng-controller="myController">
<div>
    First Nmae: {{ employee.firstName }}
</div>
<div>
    Last Name : {{ employee.lastName }}
</div>
<div>
    Gender : {{ employee.gender }}
</div>
</div>

the errors its displaying on the console are

1)Uncaught SyntaxError: Unexpected identifier

2)Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to: Error: [$injector:nomod] Module 'myModule' 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.

here the image of my webstrom project

2
htmlangularjs
Do you have a folder by the name of Scripts.js ? – Vivz
is this angular.module("myModule",[]) defined at multiple places – Rakeschand
yes Vivz i will add the screenshot of my webstrom project aswell – Big_Data

2 Answers

3
votes

You need to load angular.js reference and then your script.js

<script src="Scripts.js/angular.js"></script>
<script src="Scripts.js/script.js"></script>

and your Object should have comma separated across the fields,

 var employee = {
                firstName: "Sunil",
                lastName: "Bhatraju",
                gender: "Male"
            };

DEMO

var myApp = angular
    .module("myModule",[])
    .controller("myController", function ($scope) {
        var employee = {
            firstName: "Sunil",
            lastName: "Bhatraju",
            gender: "Male"
        };

        $scope.employee = employee;
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myModule">
    <div ng-controller="myController">
<div>
    First Nmae: {{ employee.firstName }}
</div>
<div>
    Last Name : {{ employee.lastName }}
</div>
<div>
    Gender : {{ employee.gender }}
</div>
</div>
1
votes

There are multiple errors

one add commas at the end

var employee = {
        firstName: "Sunil",
        lastName: "Bhatraju",
        gender: "Male"
};

two add angular lib first

<script src="Scripts.js/angular.js"></script>
<script src="Scripts.js/script.js"></script>