CODEWITHSUNDEEP
javascriptangularjs
hussain
hussain

Reputation: 7123

How to define module and config in angular app?

I am trying to setup angular app using ui-router i have an issue angular is not registering the module computerTrading. i have pasted error below.

app.js

 angular.module('computerTrading', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider){
    'use strict';

      // $urlRouterProvider.otherwise(function($injector){
      //    var $state = $injector.get('$state');
      //    $state.go('home');
      // });
      $urlRouterProvider.otherwise('home');

      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'views/home.html',
          controller: 'MainController'
        })
        .state('nerd', {
          url: '/nerd',
          templateUrl: 'views/nerd.html',
          controller: 'NerdController'
        });
    });

index.html 

<body ng-app="computerTrading">
<div class="container-fluid">

    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" ui-sref="home">Stencil: Node and Angular</a>
        </div>

        <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
        <ul class="nav navbar-nav">
            <li><a ui-sref="nerd">Nerds</a></li>
        </ul>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ui-view></div>

</div>
 <script src="libs/angular/angular.min.js"></script>
 <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</body>

Error

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.1/$injector/nomod?p0=computerTrading
    at angular.js:38
    at angular.js:2183
    at b (angular.js:2107)
    at Object.module (angular.js:2181)
    at MainCtrl.js:1

Upvotes: 0

Views: 70

Answers (1)

Estus Flask
Estus Flask

Reputation: 223114

computerTrading is defined in app.js as angular.module('computerTrading', ['ui.router']).

Considering that angular.module('computerTrading') getter function is called in other files, they cannot get a module that doesn't exist yet.

app.js is loaded last in <!-- ANGULAR CUSTOM --> section, and it should be loaded first there.

Upvotes: 3

Related Questions