當我設計我的First Mean堆棧UI時，我的Basic Angular App失敗了

Question

 app.js var myApp = angular.module('myApp',[]); myApp.controller('mainCtrl',function($scope){ $scope.name="vignesh"; });

我正在使用MEAN Stack進行基本的應用程序構建，對於我們使用Node API連接MongoDB和用戶身份驗證的大多數部分，我已經完成了Node.js中的身份驗證部分，但在設計路由UI時我正面臨着這個問題

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'); } })

錯誤說：

未捕獲的SyntaxError：意外的令牌

未捕獲錯誤：[$ injector：modulerr]由於以下原因無法實例化myApp模塊：錯誤：[$ injector：nomod]模塊'myApp'不可用！ 您要么錯誤拼寫了模塊名稱，要么忘記加載它。 如果注冊模塊，請確保將依賴項指定為第二個參數。

Answer 1

您需要正確初始化app模塊。

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

工作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){

當我設計我的First Mean堆棧UI時，我的Basic Angular App失敗了

問題描述

1 個解決方案

解決方案1
3 2015-06-30 19:33:02

當我設計我的First Mean堆棧UI時，我的Basic Angular App失敗了

問題描述

1 個解決方案

解決方案1 3 2015-06-30 19:33:02

解決方案1
3 2015-06-30 19:33:02