CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
thrasymachus
thrasymachus

Reputation: 25

Ui-Router: Every state shows template except one

I have a very frustrating problem...I have a page with four templates and four corresponding states in my angular file. They all work fine except one, 'detail'; I can get to it by clicking the button in the 'home' template, but once there, it will not render the HTML inside the template.

angularApp.js:

var app = angular.module('app', ['ui.router']);

app.factory('auth', ['$http', '$window', function($http, $window){
    var auth = {};
    auth.saveToken = function(token){
        $window.localStorage['app-token'] = token;
    };

    auth.getToken = function(){
        return $window.localStorage['app-token'];
    };

    auth.isLoggedIn = function(){
        var token = auth.getToken();

        if(token){
            var payload = JSON.parse($window.atob(token.split('.')[1]));

            return payload.exp > Date.now()/1000;
        }else {return false;}
    };

    auth.currentUser = function(){
        if(auth.isLoggedIn()){
            var token = auth.getToken();
            var payload = JSON.parse($window.atob(token.split('.')[1]));

            return payload.username;
        }
    };

    auth.register = function(user){
        return $http.post('/register', user).success(function(data){
            auth.saveToken(data.token);
        });
    };

    auth.logIn = function(user){
        return $http.post('/login', user).success(function(data){
            auth.saveToken(data.token);
        });
    };

    auth.logOut = function(){
        $window.localStorage.removeItem('app-token');
    };
    return auth;
}]);

app.controller('MainCtrl', [
    '$scope',

    function($scope){
        $scope.greeting = "hello,world";}
    ]);

app.controller('SecCtrl', ['$scope', function($scope){
    $scope.queryObject = {};

}]);


app.controller('AuthCtrl', [
    '$scope',
    '$state',
    'auth',
    function($scope, $state, auth){
        $scope.user = {};

        $scope.register = function(){
            auth.register($scope.user).error(function(error){
                $scope.error = error;}
            ).then(function(){
                $state.go('home');
            });
        };

        $scope.logIn = function(){
            auth.logIn($scope.user).error(function(error){
                $scope.error = error;
            }).then(function(){
                $state.go('home');
            });
        };
    }]);



    app.config([
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
        $stateProvider

        .state('home',{
            url: '/home',
            templateUrl: '/home.html', 
            controller: 'SecCtrl'

        })
        .state('detail',{
            url: '/detail', 
            templateURL: '/detail.html', 
            controller: 'SecCtrl'
        })      
        .state('login',{
            url: '/login',
            templateUrl: '/login.html', 
            controller: 'AuthCtrl',
            onEnter: ['$state', 'auth', function($state, auth){
                    if(auth.isLoggedIn()){
                      $state.go('home');
                    }
                  }]

        })
        .state('register',{
            url: '/register',
            templateUrl: '/register.html',
            controller: 'AuthCtrl',
            onEnter: ['$state', 'auth', function($state, auth){
                    if(auth.isLoggedIn()){
                      $state.go('home');
                    }
                  }]

        });
        $urlRouterProvider.otherwise('home');



        }

    ]);

index.ejs:

<!DOCTYPE html>
<html>
  <head>

    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="javascripts/angularApp.js"></script>
  </head>
  <body ng-app = "app">

   <div class="row">
     <div class="col-md-6 col-md-offset-3">
       <ui-view></ui-view>
     </div>
   </div>



   <script type="text/ng-template" id="/home.html"><a ui-sref="detail">
        <button >Go to Details</button></a>

   </script>

   <script type="text/ng-template" id="/detail.html">
      <h1>Details!</h1>    <!--This is the part that won't show up -->
   </script>

   <script type="text/ng-template" id="/login.html">
      <div class="page-header">
        <h1>Flapper News</h1>
      </div>

        <div ng-show="error" class="alert alert-danger row">
          <span>{{error.message}}</span>
        </div>

        <form ng-submit="logIn()"
          style="margin-top:30px;">
          <h3>Log In</h3>

          <div class="form-group">
            <input type="text"
            class="form-control"
            placeholder="Username"
            ng-model="user.username"></input>
          </div>
          <div class="form-group">
            <input type="password"
            class="form-control"
            placeholder="Password"
            ng-model="user.password"></input>
          </div>
          <button type="submit" class="btn btn-primary">Log In</button>
        </form>
    </script>

    <script type="text/ng-template" id="/register.html">
      <div class="page-header">

      </div>

      <div ng-show="error" class="alert alert-danger row">
        <span>{{ error.message }}</span>
      </div>

      <form ng-submit="register()"
        style="margin-top:30px;">
        <h3>Register</h3>

        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Username"
          ng-model="user.username"></input>
        </div>
        <div class="form-group">
          <input type="password"
          class="form-control"
          placeholder="Password"
          ng-model="user.password"></input>
        </div>
        <button type="submit" class="btn btn-primary">Register</button>
      </form>
    </script>

  </body>
</html>

Thanks in advance for any help you can give!

Upvotes: 0

Views: 36

Answers (2)

Mahesh
Mahesh

Reputation: 1012

There is typo in defining templetUrl property name . you wrote it as

templateURL: '/detail.html',

it should be

templateUrl: '/detail.html',

Upvotes: 0

zamarrowski
zamarrowski

Reputation: 483

Try this. Change templateURL to templateUrl: 

 .state('detail',{
            url: '/detail', 
            templateUrl: '/detail.html', 
            controller: 'SecCtrl'
        })

Upvotes: 1

Related Questions