My Basic Angular App failing me when i'm designing my First Mean stack UI

时间:2015-06-30 19:25:36

标签: javascript angularjs declaration mean angularjs-module

app.js
var myApp = angular.module('myApp',[]);

    myApp.controller('mainCtrl',function($scope){    
        $scope.name="vignesh";
       
    });

I'm doing a basic app building with MEAN Stack, for most of the parts we use Node API's to connect with MongoDB and user authentication,I'm done with my authentication part in Node.js but while designing routing UI I'm facing this issue

HTML

<!DOCTYPE>
<html ng-app="myApp">

  <head>
    <title>User Story</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.js"></script>
  </head>

  <body>
      <div ng-controller="mainCtrl">{{name}}</div>
      <script type="text/javascript" src="/service/authService.js"></script>
      <script type="text/javascript" src="/controllers/controllers.js"></script>
      <script type="text/javascript" src="/app.js"></script>
  </body>

</html>

angular.module('authService',[])

  .factory('Auth',function($http,$q,AuthToken){

  	var authFactory={};

  	authFactory.login=function(username,password){
  		return $http.post('/app/login',{

  			username:username,
  			password:password

  		}). sucess(function(data){
  			AuthToken.setToken(data.token);
  			return data;
  		})
  	}
   
   authFactory.logout=function(){
   	AuthToken.setToken();

   }


authFactory.isLoggedin=function(){
	if(AuthToken.getToken())
		return true;
	else
		return false;
}

authFactory.getUser=function(){
	if(AuthToken.getToken())
		return $http.get('/api/me');
	else
		return $q.reject({message:"user has no token set"});

}
return authFactory;

  })

  . factory('AuthToken', function($window){

  	var authTokenFactory={};

  	authTokenFactory.getToken=function(){
  		return $window.localStorage.getItem('token');

  	}

  	authTokenFactory.setToken=function(token){
  		if(token)
  			$window.localStorage.setItem('token',token);
  		else
  			$window.localStorage.removeeItem('token');
  	}
return authTokenFactory;
  })

  .factory('AuthInterceptor',function($q,$location,AuthToken){

  	var interceptorFactory={};
interceptorFactory.request=function(config){
	var token=AuthToken.getToken();
	if(token){
		config.header['x-access-token']=token;
	}
	return config;
};
interceptorFactory.responseError=function(response){

if(response.status==403)
	$location.path('/login');

return $q.reject(response);
}

  })

controllers.js
angular.module('mainCtrl', [])

   .controller('MainController', function($rootScope,$location,Auth){
   	
   	var vm = this;
   	vm.loggedIn = Auth.isLogged();
   	$rootScope.$on('$routechangeStart',function () {
   		vm.loggedIn=Auth.isLogged();

   		Auth.getUser().then(function(data){
   			vm.user=data.data;
   		});

   });

vm.doLogin= function(){
             
             vm.processing=true;
             vm.error='';
             Auth.login(vm.loginData.username, vm.loginData.password)
                 .sucess(function (data) {
                 	// body...
                 	vm.user=data.data;
                 });

                 if(data.success)
                 	$location.path('/');
                 else
                 	vm.erroe=data.message;
             }

   
     vm.doLogout=function(){
     	Auth.logout();
     	$location.path('/logout');
     }


   })

error says:

Uncaught SyntaxError: Unexpected token

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' 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.

1 个答案:

答案 0 :(得分:3)

您需要正确初始化app模块。

var myApp = angular.module('myApp', []);

Working Plunkr

<强>更新

由于每个JS文件都有不同的模块,因此您需要在使用该模块的任何提供者/服务时将它们组合在一起。在您的情况下,您使用了Auth服务,但authService模块没有注入。

<强> Controllers.js

angular.module('mainCtrl', ['authService']) //injected authService module

   .controller('MainController', function($rootScope,$location,Auth){

<强> App.js

var myApp = angular.module('myApp',['mainCtrl']);

    myApp.controller('mainCtrl',function($scope){