Fail with ui-router in Angularjs and Apache server -
i've problem ui-router in angularjs because, when write route in browser address bar, instead of displaying me page,it shows me next (i cannot add image directly because don't have earn enough link show image):
http://i.stack.imgur.com/mwxlt.jpg
my configuration 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 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 , best regards.
Comments
Post a Comment