当我设计我的First Mean堆栈UI时，我的Basic Angular App失败了
[英]My Basic Angular App failing me when i'm designing my First Mean stack UI
问题描述
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 
我正在使用MEAN Stack进行基本的应用程序构建，对于我们使用Node API连接MongoDB和用户身份验证的大多数部分，我已经完成了Node.js中的身份验证部分，但在设计路由UI时我正面临着这个问题
HTML 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!
1 个解决方案
解决方案1
3 2015-06-30 19:33:02
You need to initialize you app module correctly. 您需要正确初始化app模块。
var myApp = angular.module('myApp', []);
Update 更新
As you have different module per each JS file, you need to combine them while using any provider/service that module, As in your case you have used Auth service but the authService module has not injected. 由于每个JS文件都有不同的模块，因此您需要在使用该模块的任何提供者/服务时将它们组合在一起。在您的情况下，您已使用Auth服务但未注入authService模块。
Controllers.js Controllers.js
angular.module('mainCtrl', ['authService']) //injected authService module
.controller('MainController', function($rootScope,$location,Auth){
App.js App.js
var myApp = angular.module('myApp',['mainCtrl']);
myApp.controller('mainCtrl',function($scope){
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.