javascript - This syntax doesn't work with the syntax of Angular's dependency injection, how do I fix this? -

i'm sure easy fix, can't sorted out.

i have app file, routes file , config file. here's each one:

the app file:

(function () {   'use strict';    angular     .module('app', [       'app.config',       'app.routes',       'app.authentication'     ]);    angular     .module('app.config', [       'restangular',       'nganimate',       'ngmaterial'     ]);    angular     .module('app.routes', ['ui.router']);  })(); 

the routes file:

(function () {   'use strict';    angular     .module('app.routes')     .config(config);    config.$inject = ['ui.router'];    function config($stateprovider, $urlrouterprovider) {      $urlrouterprovider.otherwise("/");      $stateprovider       .state('register', {         url:"/register",         controller: 'registercontroller',         controlleras: 'register',         templateurl: "/static/templates/authentication/register.html"       })       .state('', {         url:"/",         templateurl: "/static/templates/landing.html"       });   }  })(); 

the config file:

(function () {   'use strict';    angular     .module('app.config')     .config(config);    config.$inject = [     'restangular',     'nganimate',     'ngmaterial'   ];    function config($locationprovider, $uiviewscrollprovider, restangularprovider, $mdthemingprovider, $mdiconprovider) {     $locationprovider.html5mode(true);     $locationprovider.hashprefix('!');      restangularprovider.setbaseurl('/api/');     restangularprovider.setdefaulthttpfields({xsrfcookiename:'csrftoken', xsrfheadername:'x-csrftoken'});      $uiviewscrollprovider.useanchorscroll();      $mdthemingprovider.theme('default').primarypalette('blue').accentpalette('pink');      $mdiconprovider.fontset('fa', 'fontawesome');   }  })(); 

and in index file i'm including them so:

<script src="{% static 'app/app.config.js' %}" type="text/javascript"></script> <script src="{% static 'app/app.routes.js' %}" type="text/javascript"></script> <script src="{% static 'app/app.js' %}" type="text/javascript"></script> 

the error i'm getting is:

error: [$injector:nomod] module 'app.routes' not available! either misspelled module name or forgot load it. if registering module ensure specify dependencies second argument. http://errors.angularjs.org/1.4.2/$injector/nomod?p0=app.routes 

and

error: [$injector:nomod] module 'app.config' not available! either misspelled module name or forgot load it. if registering module ensure specify dependencies second argument. http://errors.angularjs.org/1.4.2/$injector/nomod?p0=app.config 

the weird thing abbreviated errors, not normal long error when screw injection in past.

you trying use modules before declaring them in script. need reorder scripts loaded, i.e app.js needs loaded before app.config.js , app.routes.js.

<!-- comes first before files uses it--> <script src="{% static 'app/app.js' %}" type="text/javascript"></script> <script src="{% static 'app/app.config.js' %}" type="text/javascript"></script> <script src="{% static 'app/app.routes.js' %}" type="text/javascript"></script> 

or move declarations of config , routes own files respectively.

 //in app.config.js, declare module   angular     .module('app.config', [       'restangular',       'nganimate',       'ngmaterial'     ]);    //app.routes.js   angular     .module('app.routes', ['ui.router']); 

well got more issues: cannot inject module, can list them dependency in module declaration. instead inject module's services, providers, controllers etc.. $inject annotation of array annotation minification safe.

so need change:

config.$inject = ['ui.router']; 

to

config.$inject = ['$stateprovider', '$urlrouterprovider']; 

and

config.$inject = [     'restangular',     'nganimate',     'ngmaterial'   ]; 

to

config.$inject = [   '$locationprovider',    '$uiviewscrollprovider',    'restangularprovider',    '$mdthemingprovider',    '$mdiconprovider'  ]; 

i not sure other (actual) errors pop out after fix this. if follow error message should able fix them. angular error messages descriptive (if not use non-minified in dev mode see more descriptive errors) have read on dependency injection before using it.