State.go not redirecting to page (#! & url of redirect page is being appended to the end of URL)

729 views
Skip to first unread message

Micheal B

unread,
Jun 5, 2017, 9:10:45 AM6/5/17
to Angular and AngularJS discussion
On login a response is returned from the server but it doesn't go to the `test` page but the url changes from `http://express.app/dashboard/login.html#!/` to `http://express.app/dashboard/login.html#!/test` I have no idea why the `#!/` is being added in the first place. However if I look in my network console I can see that `test.html` is being loaded and if I look at the preview I can see the page 

I have tried many different combos like setting `templateURL` to `dashboard/test.html` and just leaving it as `/test.html` but nothing seems to work. What am I doing wrong?

Not sure if it matters but I navigate directly to the login page `express.app/dashboard/login.html` or I click on login in index.html (The index is just a landing page it is not apart of my app)

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: ['signals.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.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="//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="test" ng-controller="testController">
    Worked!
    
    <script src="../js/signals-express.js" type="text/javascript"></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>

Folder structure 

    /
    controllers
     -loginController.js
     -testController.js
    app.js
    index.html
    dashboard
      -login.html
      -test.html

Reply all
Reply to author
Forward
0 new messages