{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Animai°情兽 的问题《Angular unknown provider and Cannot POST /signup》','https://www.manongdao.com/q-1001719.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Before you say anything, I know the solution probably is to inject the dependency but I checked other open source codes and compare it with mine, it is exactly the same. While theirs work while mine's not working
Currently the problem is at route '/signup'
I got Error: error:unpr Unknown Provider when I check the console at route '/signup' and
Whenever I go to '/signup' route and press submit button it supposed to hit the api and redirect to '/' but what I got instead is Cannot POST /signup.
The api works just fine when I used POSTMAN, I assume the problem is with angular.
index.html ( Does the order of the script is important? )
<!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>
I like this way of writing angular because its way cleaner for me. For your information the open source that I mention above is https://github.com/sahat/tvshow-tracker/blob/master/public/controllers/signup.js
Youd didn't add
Order must be this :
That's why it is showing unknown provider for route.