AngularJSのcontroller内でDIされない

AngularJS 1.4.3でログイン処理を書こうとしています。
サーバーサイドAPIにIDとパスワードをPOSTし、
ログイン認証に成功すればセッション情報(ユーザ属性など)を返すようにしています。
ログイン認証に成功したかどうかを判定して、
その上でページ遷移をしようとしているのですが、
デバッグをしている中でloginCtrlの中に$scopeと$httpしか
DIされておらず、インジェクションしたい$stateがundefinedのままになってしまいます。
自分で調べていましたが手詰まりになってしまったのでご教授いただきたく存じます。

route.js
1'use strict';
2angular.module('myApp', ['ui.router','tableSort','angular-loading-bar', 'ngAnimate'])
3// Routes
4.config(function($stateProvider){
5  $stateProvider.state('/',{
6    url: '/',
7    templateUrl: 'index.html'
8  })
9})
10.config(function($stateProvider){
11  $stateProvider.state('result',{
12    url: '/result/season/:id',
13    templateUrl: 'views/stats.html',
14    controller: 'resultCtrl',
15    params:{
16    	param: null
17    }
18  })
19})
20.config(function($stateProvider){
21  $stateProvider.state('login',{
22    url: '/login',
23    templateUrl: 'views/login.html',
24    controller: 'loginCtrl',
25    params:{
26    	param: null
27    }
28  })
29})
30// Default
31.config(function($urlRouterProvider){
32  $urlRouterProvider.when('', '/')
33})
34.controller('loginCtrl',['$scope','$stateParams','$rootScope','$state','$http',
35                         function($scope,$stateParams,$rootScope,$state,$http) {
36	$scope.onclick=function($state,$stateParams,$rootScope){
37		$http({
38			method: 'POST',
39		    url: '/api/v1/login/',
40		    data:{
41		    	loginId: $scope.loginId,
42		    	password:$scope.password
43		    }
44		})
45		.success(function(data, status, headers, config,$state) {
46			$scope.items = data;
47			if($scope.items.id != undefined){
48				$state.go('index');
49			}
50		})
51	}
52
53}])
54.controller('resultCtrl', function($scope, $stateParams,$http,$rootScope) {
55	$scope.id = $stateParams.id;
56	$http({
57		method: 'GET',
58        url: '/api/v1/result/season/'+$scope.id,
59	})
60	.success(function(data, status, headers, config,listSize) {
61		$scope.items = data;
62		listSize=$scope.items.listSize;
63		$rootScope.range = function(listSize) {
64			var arr = [];
65			for (var i=0; i<listSize; ++i) arr.push(i);
66			return arr;
67		};
68		for(var i=0;i<$scope.items.resultList.length;i++){
69			$scope.items.resultList[i]['opponentList']=new Array();
70			for(var j=0;j<$scope.items.opponentList.length;j++){
71				if($scope.items.resultList[i].teamId==$scope.items.opponentList[j].teamId){
72					$scope.items.resultList[i]['opponentList'].push($scope.items.opponentList[j]);
73				}
74			}
75		}
76    })
77     .error(function(data, status, headers, config){
78    	alert("通信エラー");
79    });
80 });

index.html
1<html>
2<head>
3	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
5	<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
6	<script src="https://unpkg.com/@uirouter/angularjs@1.0.5/release/angular-ui-router.js"></script>
7	<script src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
8	<script src="scripts/angular-tablesort.js"></script>
9	<script type='text/javascript' src="scripts/loading-bar.min.js"></script>
10	<script src="scripts/app.js"></script>
11	<script src="scripts/route.js"></script>
12	<link rel="stylesheet" type="text/css" href="css/tablesort.css">
13	<link rel="stylesheet" href="css/loading-bar.min.css" type='text/css' media='all' />
14</head>
15<body ng-app="myApp">
16	<ui-view></ui-view>
17</body>
18</html>

login.html
1<form ng-submit="login()" name="loginForm">
2        <label>ログインID</label>
3        <input type="text" name="text" class="form-control" placeholder="IDを入力してください" ng-model="loginId"
4               required>
5        <label>パスワード</label>
6        <input type="password" name="password" class="form-control" placeholder="パスワードを入力してください"
7               ng-model="password" required>
8        <button type="submit" ng-disabled="loginForm.$invalid" class="btn btn-primary" ng-click="onclick()">ログイン</button>
9</form>

参考：AngularJS ui-routerを使って認証機能を実装してみよう
参考にはしたのですが、認証の判定タイミングなどが全然違うので
ソースとしては似ていません。
全てのページでログインが必要なわけではないのでAPIに逐一確認する手順を取ろうと思っています。

その他の参考リンク

how to use the route state as variable in controller?

行動規範の内容に同意します

回答1件

ベストアンサー

js
1$scope.onclick=function($state,$stateParams,$rootScope){

↑ここの引数が不要ではないでしょうか。

js
1$scope.onclick=function(){

投稿2017/08/24 08:10

naga3

総合スコア1293

退会済みユーザー

2017/08/24 08:19

ありがとうございます。 $stateの定義忘れかと思ったのですが、修正してもDIされていないのは変わりません。

naga3

2017/08/24 08:22

successの方の$stateを削除してもダメですか？

退会済みユーザー

2017/08/24 08:26

ありがとうございます。修正したところDIできていることを確認しました。 DIできていないのではなく初期化してしまっていたのですね…。ご迷惑をおかけしました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

AngularJSのcontroller内でDIされない

関連した質問