Fail with ui-router in Angularjs and Apache server

Question

I've a problem with ui-router in AngularJS because, when I write the route in the browser address bar, instead of displaying me the page,It shows me the next (I cannot add a image directly because I don't have earn enough but the link show you the image):

https://i.stack.imgur.com/MwXlT.jpg

My configuration is the next:

index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    /* Typical header: CSS, etc */
    <base href="/">
  </head>
  <body data-ng-app="app">
    <header>
      <h1>´Title</h1>
      <nav>
        <ul>
          <li><a data-ui-sref="/home">Home</a></li>
          <li><a data-ui-sref="/products">Products</a></li>
          <li><a data-ui-sref="/contacts">Contacts</a></li>
        </ul>
      </nav>
    </header>
    <div data-ui-view></div>
    <!-- Load scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.config.js"></script>
    <script src="login/login.js"></script>
  </body>
</html>

app.module.js

(function(){
  angular.module('app', []);
})();

app.config.js

(function(){
  angular
    .module('app.config', ['ui.router'])
    .config(routes);

    routes.$inject = ['$locationProvider', '$stateProvider', '$urlRouteProvider'];

    function routes($locationProvider, $stateProvider, urlRouteProvider){
      // use the HTML5 History API
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise("/inicio");
      $stateProvider
        .state('inicio', {
          url:'/inicio',
          templateUrl:'aboutus/aboutus.html',
          controller:'AboutusCtrl',
          controllerAs: 'vm'
        })
        .state('contacto', {
          url:'/contacto',
          templateUrl:'contact/contact.html',
          controller:'ContactCtrl',
          controllerAs: 'vm'
        })
        .state('login', {
          url:'/login',
          templateUrl:'login/login.html',
          controller:'LoginCtrl',
          controllerAs: 'vm'
        })
        .state('productos', {
          url:'/productos',
          templateUrl:'products/products.html',
          controller:'ProductsCtrl',
          controllerAs: 'vm'
        });
    }
})();

login.html

<div class="tt-column">
  <h2>{{vm.message}}</h2>
</div>

login.js

(function(){
  'use strict';
  angular
    .module('app')
    .controller('LoginCtrl', Manager);

  function Manager(){
    /* jshint validthis: true */
    var vm = this;

    return vm.message='Login';
  }
})();

.htaccess

<ifModule mod_rewrite.c>
  Options +FollowSymLinks
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !index
  RewriteRule (.*) index.html [L]
</ifModule>

Thanks in advance and best regards.

http://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes — yusijs, Oct 06 '16 at 09:46

Fail with ui-router in Angularjs and Apache server

0 Answers0