0
私はすでにウェブサイトを持っている誰かのログインと登録に取り組んでいます。問題があるかどうか分かりませんが、index.htmlはリンク先ページです。ログインページをクリックするとログインページにジャンプします。プロジェクトの残りの部分は、Webアプリケーションだけでなく、これまでのログインと登録（index.htmlではanglejsコードがなく、コントローラやapp.jsのいずれもロードしていない）です。
は、ログイン時に応答がサーバから返されたが、それはtestページに移動しませんがhttp://express.app/dashboard/login.html#!/からhttp://express.app/dashboard/login.html#!/testへのURLの変更は、私が#!/が最初の場所で追加されている理由はわかりません。しかし私のネットワークコンソールを見ると、test.htmlがロードされているのがわかります。プレビューを見れば、そのページを見ることができます。
私は多くの異なるコンボを試しましたが、からdashboard/test.htmlに設定してそのまま/test.htmlとしていますが、何も動作していないようです。私は間違って何をしていますか？
app.js
angular.module('app',['angular-jwt','angular-storage', 'ngRoute', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider, jwtInterceptorProvider, $httpProvider, jwtOptionsProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state("login", {
url:"/login",
controller: "loginController",
templateUrl: "dashboard/login.html"
})
.state("signup", {
url:"/signup",
controller: "signupController",
templateUrl: "dashboard/register.html"
})
.state("test", {
url:"/test",
controller: "testController",
templateUrl: "test.html"
});
jwtInterceptorProvider.tokenGetter = function (store) {
return store.get('jwt');
};
jwtOptionsProvider.config({
whiteListedDomains: ['express.api', 'localhost']
});
$httpProvider.interceptors.push('jwtInterceptor');
})
.run(function($rootScope, $state, store, jwtHelper) {
$rootScope.$on('$stateChangeStart', function(e, to) {
if (to.data && to.data.requiresLogin) {
if (!store.get('jwt') || jwtHelper.isTokenExpired(store.get('jwt'))) {
e.preventDefault();
$state.go('login');
}
}
});
login.Controller.js
'use strict';
angular.module('app')
.controller('loginController', function ($scope, $http, $state, store) {
$scope.user = {};
$scope.login = function() {
$http({
url: 'http://expressapi.com/login',
method: 'POST',
data: $scope.user
}).then(function(response) {
console.log("res", response.data.token);
store.set('jwt', response.data.token);
var test1 = store.get('jwt');
console.log("get", test1);
$state.go("test");
}, function(error) {
console.log(error);
alert(error);
});
}
});
test.js
'use strict';
angular.module('app')
.controller('testController', function ($scope, $http, $state, store) {
console.log("TEst");
$scope.test = function() {
}
});
login.htmlと
<body class="main" ng-app="app" ng-controller="loginController">
<div class="form" data-ix="new-interaction-2">
<label class="field-label" for="Name-2">Email</label>
<input class="text-field-2 w-input" data-name="name" id="Name-2" maxlength="256" name="name" placeholder="Email" required="required" type="email" ng-model="user.email">
<label for="Password-2">Password:</label>
<input class="text-field w-input" data-name="Password" id="Password-2" maxlength="256" name="Password" placeholder="Password" required="required" type="password" ng-model="user.password">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-storage/0.0.15/angular-storage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>
<script src="/app.js"></script>
<script src="/node_modules/angular-jwt/dist/angular-jwt.js"></script>
<script src="/Controllers/loginController.js"></script>
<script src="/Controllers/testController.js"></script>
test.htmlという
<body ng-app="app" ng-controller="testController">
Worked!
<script src="../js/express.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-storage/0.0.15/angular-storage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>
<script type="application/javascript" src="../app.js"> </script>
<script src="../node_modules/angular-jwt/dist/angular-jwt.js"></script>
<script src="../controllers/loginController.js"></script>
<script src="../controllers/testController.js"></script>
<script src="../controllers/signupController.js"></script>
</body>
フォルダ構造
/
controllers
-loginController.js
-testController.js
app.js
index.html
contact.html
info.html
dashboard
-login.html
-test.html
私の推測は、http：//express.app/dashboard/login.html#!/であるUIルータの.otherwise caseに送信されているハッシュ・バング（＃！）のためでしょう。 UIルータがlogin.htmlにロードされると、ハッシュ・バングが自動的にURLに追加されます。この時点で、角度/ UIルータをロードする必要がありますか？あなたは認証することができ、インデックスに送信してからロードすることができます –
私はログインページでいくつかのヘルパーライブラリを使用していますので、anglejsをロードする必要があり、ロードする必要がある状態プロバイダを使用すると思います – Anonguy123
$ state.go （ "test"）あなたは、このwindow.location = "http://expressapi.com/test.html"のようなバニラソリューションでテストするためにリダイレクトすることができます –