gpt4 book ai didi

javascript - 当我设计 First Mean stack UI 时,我的 Basic Angular App 失败了

转载 作者:行者123 更新时间:2023-11-30 12:20:51 25 4
gpt4 key购买 nike

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


})

错误说:

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.

最佳答案

您需要正确初始化您的应用模块。

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

Working Plunkr

更新

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

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

关于javascript - 当我设计 First Mean stack UI 时,我的 Basic Angular App 失败了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31146765/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com