vendredi 29 mai 2015

AngularJS UI Router reload not working

I have two states in my current apps, which is login and register. If I just open my website towards localhost:8001, it is automatically redirect to /login because I've set

$urlRouterProvider.otherwise('/login')

But if I open my website towards localhost:8001/asdf, it does not redirect to /login. It just print not found.

What am I missing?

Here is my full code

app.module.js

var myApp = angular.module('myApp', ['routesApp']);

app.routes.js

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

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

  $urlRouterProvider.otherwise('/login');

  $locationProvider.html5Mode(true);

}]);

login.routes.js

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/components/login/login.html',
            controller: 'loginController'
        });
});

register.routes.js

routesApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('register', {
            url: '/register',
            templateUrl: 'app/components/register/register.html',           
        });
});

login.controller.js

var loginApp = angular.module('loginApp', ['ngAnimate']);

loginApp.config(function($sceDelegateProvider, $httpProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self'
    ])
});

var loginController = function($scope){
    //test controller
}

loginApp.controller('loginController', loginController);

index.html

<!DOCTYPE html>
<html>

  <head>
    <title>MyApp</title>
    <base href="/">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="assets/less/phinisi.less">
    <link rel="stylesheet/less" type="text/css" href="assets/less/dropdown.less" />
    <!-- JavaScript -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="assets/js/angular-payments.js"></script>
    <script src="assets/js/jquery-2.1.3.min.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/ui-bootstrap-0.12.1.min.js"></script>

    <script src="app/app.module.js"></script>
    <script src="app/app.routes.js"></script>

    <!-- Login Script -->
    <script src="app/components/login/login.controller.js"></script>    
    <script src="app/components/login/login.routes.js"></script>

    <!-- Register Script --> 
    <script src="app/components/register/register.routes.js"></script>    

    <script src="assets/js/less.js"></script>


  </head>

  <body ng-app="myApp">
    <div ui-view></div>  
  </body>

</html>




Aucun commentaire:

Enregistrer un commentaire