CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Unable to load the Module in Angularjs?

Hi I am developing Angularjs Application. I am using UI Router. This is my First Angular project and I am facing issues. I am running Index page. Index page contains header and footer. In body i am trying to bind views on page load. Below is my Index.html

    <html ng-app="RoslpApp">
    <head>
<!--Angularjs and ui routing-->
    <script data-require="[email protected]" data-semver="1.4.5" src="https://code.angularjs.org/1.4.5/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
    <!--Angularjs and ui routing-->
    <!--Arebic Translation-->
    <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
    <script src="scripts/angular-translate.js"></script>
    <script src="scripts/angular-translate-loader-partial.min.js"></script>
    <!--Arebic Translation-->
    <!--Date Picker-->
    <link href="App/CSS/angular-datepicker.css" rel="stylesheet" />
    <script src="App/JS/angular-datepicker.js"></script>
    <!--Date Picker-->
  <!--Toaster-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
    <!--Toaster-->
    <!--SPA Files-->
    <script src="App/App.js"></script>
    <!--SPA Files-->
    </head>
    <body ng-controller="RoslpAppController">
    <header>
        <div class="logo"><img src="App/images/logo.png"></div>
    </header>
        <!--inject here-->
        <div class="container">
        <div ui-view></div>
        </div>
    <footer>
    </footer>

This is my App.js

    var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr', '720kb.datepicker']);
    app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider)
    {
    $urlRouterProvider.otherwise('/HomePage');
    $stateProvider
       .state('ForgotPassword.ChangePasswords', {
           url: '/ForgotPasswordChangePasswords',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           params: {
               LoginID: null
           },
           controller: 'ChangePasswords'
       })
        .state('HomePage', {
            url: "/HomePage",
            templateUrl: "Registration/HomePage.html"
        });
    });
app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', function ($scope, $translate, toastr) {
    //toastr.success('Hello world!', 'Toastr fun!');
    $scope.clickHandler = function (key) {
        $translate.use(key);
    };
}]);

This is my HomePage.html

<div class="banner-container">
</div>

When i load my page first time, I am getting below error. 

Uncaught Error: [$injector:nomod] Module 'RoslpApp' 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.

May I know why I am facing below mentioned issues. Thanks in advance.

Upvotes: 1

Views: 540

Answers (2)

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1075

You need to add your js script in your html

    <html ng-app="RoslpApp">
    <head>
    </head>
    <body ng-controller="RoslpAppController">
    <header>
        <div class="logo"><img src="App/images/logo.png"></div>
    </header>
        <!--inject here-->
        <div class="container">
        <div ui-view></div>
        </div>
    <footer>
    </footer>
    <script src="app.js"></script>
 <script src="my_other_js.js"></script>
    </body>
    </html>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222720

There are no references in the index.html for pascalprecht.translate ,ui.router, 'toastr', '720kb.datepicker'

Add the necessary references. And the references to your app.js also missing!

Upvotes: 1

Related Questions