0
Ich arbeite an einem Login und Registrierung für jemanden, der bereits eine Website hat. Nicht sicher, ob es wichtig ist, aber index.html ist die Zielseite und ich klicke auf Login, um auf die Anmeldeseite zu gelangen. Der Rest des Projekts ist nicht Teil der Web-App nur Login und Registrierung bis jetzt (index.html hat keine anglejs Code und es lädt keine der Controller oder app.js).
Auf Anmeldung wird eine Antwort vom Server zurückgegeben, aber es geht nicht auf die test Seite aber die URL ändert http://express.app/dashboard/login.html#!/-http://express.app/dashboard/login.html#!/test Ich habe keine Ahnung, warum die #!/ in erster Linie hinzugefügt wird. Wenn ich jedoch in meiner Netzwerkkonsole nachschaue, kann ich sehen, dass test.html geladen wird und wenn ich mir die Vorschau anschaue, kann ich die Seite sehen.
Ich habe viele verschiedene Combos wie Einstellung templateURL bis dashboard/test.html versucht und nur als /test.html verlassen, aber nichts scheint zu funktionieren. Was mache ich falsch?
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>
Ordnerstruktur
/
controllers
-loginController.js
-testController.js
app.js
index.html
contact.html
info.html
dashboard
-login.html
-test.html
Meine Vermutung wäre wegen des Hash-Knalls (#!) Die URL wird an den .otherwise Fall in UI Router gesendet, der http://express.app/dashboard/login.html#!/ ist. Wenn der UI Router in login.html geladen wird, wird der Hash-Bang automatisch zur URL hinzugefügt. Müssen Sie an dieser Stelle angular/UI Router laden? Sie könnten authentifizieren, senden an Index dann laden eckig –
Ich benutze ein paar Hilfebibliotheken auf der Anmeldeseite, so glaube ich angularjs geladen werden muss und ich glaube, Staatsanbieter zu verwenden, müssen Sie es laden – Anonguy123
Anstelle von $ state.go ("test") können Sie umleiten, um mit einer Vanillelösung zu testen, vielleicht so etwas wie dieses window.location = "http://expressapi.com/test.html" –