javascript - AngularJS - Uncaught Error: [$injector:modulerr] Failed to instantiate module -
i learning angular , have receiving cryptic , mysterious "angularjs - uncaught error: [$injector:modulerr]" in console when viewing index.html, post below (as angular js files being referenced.)
can please tell me i'm doing wrong? error message vague...
index.html
<!doctype html> <html lang="en"> <head> <meta char-set="utf-8"> <!--for angular routing--> <base href="/"> <link rel="stylesheet" href="assets/css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-resource.min.js"></script> <script src="app/controllers/mainctrl.js"></script> <script src="app/services/authservice.js"></script> <script src="app/app.routes.js"></script> <script src="app/app.js"></script> </head> <body ng-app="userapp" ng-controller="maincontroller main"> <header> <ul> <li ng-if="!main.loggedin"> <a href="/login">login!</a> </li> <li ng-if="main.loggedin"> hello, {{main.user.name}} </li> <li ng-if="main.loggedin"> <a href="#" ng-click="main.dologout()">logout</a> </li> </ul> </header> <main> <div ng-view></div> </main> </body> </html> app.js
angular.module('userapp', [ 'app.routes', 'authservice', 'mainctrl' ]); app.routes.js
angular.module('app.routes', ['ngroute']) .config(function($routeprovider, $locationprovider) { $routeprovider .when('/', { templateurl: 'app/views/pages/home.html' }) .when('/login', { templateurl: 'app/views/pages/login.html', controller: 'maincontroller', controlleras: 'login' }); $locationprovider.html5mode(true); }); authservice.js
angular.module('authservice', ['ngstorage']) .factory('auth', function($http, authtoken) { var authfactory = {}; //login authfactory.login = function(username, password) { return $http.post('/login', { username: username, password: password }) .success(function(data){ authtoken.settoken(data.token); return data; }); }; //logout authfactory.logout = function() { authtoken.settoken(); }; //check if user logged in. authfactory.isloggedin = function() { if (authtoken.gettoken()) return true else return false }; authfactory.getuser = function() { if (authtoken.gettoken()) return $http.get('/api/users/me', { cache: true }); else return $q.reject({ message: 'user has no token' }); }; return authfactory; }) .factory('authtoken', function($window) { var authtokenfactory = {}; //get auth token authtokenfactory.gettoken = function() { return $window.localstorage.getitem('token'); }; //set or clear auth token authtokenfactory.settoken = function(token) { if (token) { $window.localstorage.setitem('token', token); }; }; return authtokenfactory; }) .factory('authinterceptor', function($q, $location, auth) { //add token requests. var authinterceptorfactory = {}; authinterceptorfactory.request = function(config) { var token = auth.gettoken(); if (token) { config.headers['x-access-token'] = token; }; return config; }; authinterceptorfactory.responseerror = function(response) { if (response.status == 403) { authtoken.settoken(); $location.path('/login'); }; return $q.reject(response); }; return authinterceptorfactory; }); mainctrl.js
angular.module('mainctrl', []) .controller('maincontroller', function($rootscope, $location, auth) { var vm = this; // info if person logged in vm.loggedin = auth.isloggedin(); // check see if user logged in on every request $rootscope.$on('$routechangestart', function() { vm.loggedin = auth.isloggedin(); // user information on route change auth.getuser() .success(function(data) { vm.user = data; }); }); // function handle login form vm.dologin = function() { // call auth.login() function auth.login(vm.logindata.username, vm.logindata.password) .success(function(data) { // if user logs in, redirect users page $location.path('/users'); }); }; // function handle logging out vm.dologout = function() { auth.logout(); // reset user info vm.user = {}; $location.path('/login'); }; });
you using ngstorage don't seem pulling in js file module. not part of angular core need reference js file ngstorage in index.html file.
out of interest - there reason create module service / controller instead of having them part of main 'userapp' module ?
Comments
Post a Comment