Angular Js failed to instantiate module

Question

This is my first time learning Angular js and I am following a step by step tutorial on codeschool, except I have come across an error which didn't appear in the video:

Error: [$injector:modulerr] Failed to instantiate module vendor due to:
[$injector:nomod] Module 'vendor' 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.
http://errors.angularjs.org/1.3.14/$injector/nomod?p0=vendor
minErr/<@http://localhost:8000/js/angular.js:63:12
module/<@http://localhost:8000/js/angular.js:1767:1
ensure@http://localhost:8000/js/angular.js:1691:38
module@http://localhost:8000/js/angular.js:1765:1
loadModules/<@http://localhost:8000/js/angular.js:4097:22
forEach@http://localhost:8000/js/angular.js:323:11
loadModules@http://localhost:8000/js/angular.js:4081:5
createInjector@http://localhost:8000/js/angular.js:4007:11
bootstrap/doBootstrap@http://localhost:8000/js/angular.js:1445:20
bootstrap@http://localhost:8000/js/angular.js:1466:1
angularInit@http://localhost:8000/js/angular.js:1360:5
@http://localhost:8000/js/angular.js:26176:5
trigger@http://localhost:8000/js/angular.js:2744:7
createEventHandler/eventHandler@http://localhost:8000/js/angular.js:3014:9

http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=vendor&p1=%5B%24injector%3Anomod%5D%20Module%20'vendor'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3Dvendor%0AminErr%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A63%3A12%0Amodule%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1767%3A1%0Aensure%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1691%3A38%0Amodule%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1765%3A1%0AloadModules%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A4097%3A22%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A323%3A11%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A4081%3A5%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A4007%3A11%0Abootstrap%2FdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1445%3A20%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1466%3A1%0AangularInit%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A1360%3A5%0A%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A26176%3A5%0Atrigger%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A2744%3A7%0AcreateEventHandler%2FeventHandler%40http%3A%2F%2Flocalhost%3A8000%2Fjs%2Fangular.js%3A3014%3A9%0A


return new ErrorConstructor(message);


angular.js (line 63, col 11)

This is my html:

<!DOCTYPE html>
<html lang="en" ng-app="vendor">
<head>
    <title>Sample</title>
    <meta charset="utf-8">
    <meta name = "format-detection" content = "telephone=no" />

    <link rel="stylesheet" href="{{ asset('/css/style.css')}}">
    <script src="{{ asset('/js/angular.js') }}"></script>
    <script src="{{ asset('/js/angular-route.min.js') }}"></script>
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('/js/jquery.js') }}"></script>
    <script src="{{ asset('/js/jquery-migrate-1.1.1.js') }}"></script>
    <script src="{{ asset('/js/script.js') }}"></script>
    <script src="{{ asset('/js/superfish.js') }}"></script>
    <script src="{{ asset('js/sForm.js') }}"></script>
    <script src="{{ asset('js/jquery.equalheights.js') }}"></script>
    <script src="{{ asset('js/jquery.mobilemenu.js') }}"></script>
    <script src="{{ asset('js/jquery.easing.1.3.js') }}"></script>

    <script>


    </script>

    <!--[if lt IE 8]>
    <div style=' clear: both; text-align:center; position: relative;'>
        <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
            <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
    </div>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="{{ asset('js/html5shiv.js') }}"></script>
    <link rel="stylesheet" media="screen" href="{{ asset('css/ie.css') }}">


    <![endif]-->
</head>

<body class="" id="top">

<div class="content">
    <div class="container_12">
        <div class="grid_3" ng-controller="VendorController as vendor">
            <p><% vendor.product.gem %></p>
            <p>$<% vendor.product.price %></p>
            <p><% vendor.product.description %></p>
            <button ng-show="vendor.product.canPurchase"></button>
        </div>
    </div>
</div>

</body>
</html>

This is my app.js:

(function() {
    var app = angular.module('vendor', ['ngRoute'], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

    app.controller('VendorController', function() {
        this.product = gem;
    });

    var gem = {
        name: "Dodecahedron",
        price: 2.95,
        description: "...",
        canPurchase: false
    }
})

floribon · Accepted Answer · 2015-03-05 00:00:56Z

4

Your function wrapper (where your code is declared) is never executed.

Instead of

(function() {...})

You should write

(function() {...}) ();

edited Mar 5, 2015 at 0:00

answered Mar 4, 2015 at 23:47

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Js failed to instantiate module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related