角度未知提供程序,无法POST/注册

Angular unknown provider and Cannot POST /signup

本文关键字:无法 POST 注册 程序 未知      更新时间:2023-09-26

在你说什么之前,我知道解决方案可能是注入依赖项,但我检查了其他开源代码,并将其与我的代码进行了比较,结果完全相同。当他们工作而我不工作

目前问题出现在路线"/注册"上

我得到了错误:错误:unp当我在路线"/注册"和检查控制台时,未知提供商

每当我转到"/signup"路由并按下提交按钮时,它应该会点击api并重定向到"/",但我得到的却是无法POST/注册。

当我使用POSTMAN时,api工作得很好,我认为问题出在angular上。

index.html(脚本的顺序重要吗?)

<!DOCTYPE html> 
<html ng-app="MyApp">
<head>
    <title></title>
    <base href='/'> 
    <!-- load bootstrap from CDN and custom CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css"> -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- JS -->
    <!-- load angular and angular-route via CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
    <script src="app/app.js"></script>
    <script type="text/javascript" src="app/controllers/userController.js"></script>
    <script type="text/javascript" src="app/services/factories.js"></script>

</head>
<body>

    <div ng-view></div>
</body>
</html>

app.js

angular.module('MyApp', ['ngRoute'])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/views/home.html',
                controller: 'HomeController'
            })
            .when('/signup', {
                templateUrl: 'app/views/signup.html',
                controller: 'SignUpController'
            });
        $locationProvider.html5Mode(true);  
    }) 

userController.js

 angular.module('MyApp')
    .controller('SignUpController', function($scope, User) {

        // sign up the user
        $scope.signup = function() {
            User.create({
                name: $scope.name,
                username: $scope.username,
                password: $scope.password
            });
        }

    });

factories.js

angular.module('MyApp')
.factory('User', function($http, $alert, $window, $location) {

    var userFactory = {};
    userFactory.create = function(userData) {
        return $http.post('/api/signup', userData)
            .then(function(data) {
                $window.localStorage.setItem('token', response.data.token);
                $location.path('/');
            });
    }

    return userFactory;
});

signup.html

<div class="span3 well">
      <legend>New to Project626? Sign up!</legend>
    <form method="post" ng-submit="signup()">
        <input class="span3" name="name" placeholder="Full Name" type="text" ng-model="name"> 
        <input class="span3" name="username" placeholder="Username" type="text" ng-model="username">
        <input class="span3" name="password" placeholder="Password" type="password" ng-model="password"> 
        <button class="btn btn-primary" type="submit">Sign up for Project626</button>
    </form>
</div>

我喜欢这种棱角分明的写作方式,因为它对我来说更干净https://github.com/sahat/tvshow-tracker/blob/master/public/controllers/signup.js

您没有添加

<script src="angular-route.js">

订单必须是这样的:

  <script src="app/app.js"></script>
  <script type="text/javascript" src="app/services/factories.js"></script>
  <script type="text/javascript" src="app/controllers/userController.js"></script>

这就是为什么它显示路由的未知提供者。