unable to load view with angular-ui-router

Question

I am using angular-ui-router tutorial.

It does not work when i want to load home.html page.

I defined 3 states for each page and define their template url,but no navigation is working at all.

http://localhost:8080/index.html#/home.

this is index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>catalogue</title>
<link rel="stylesheet" type="text/css" 
href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" 
href="css/myStyle.css" />


</head>
<body ng-app="MyApp" >

<div ui-view >
</div>

<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

this is app.js :

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


app.config(function($stateProvider,$urlRouterProvider) {
    $stateProvider.state('home',{
        url:'/home',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    });
    $stateProvider.state('chercher',{
        url:'/chercher',
        templateUrl: 'views/chercher.html',
        controller: 'MyController'
    });
    $stateProvider.state('newProduct',{
        url:'/newProduct',
        templateUrl: 'views/newProduct.html',
        controller: 'NewProductController'
    });

});  

app.controller('HomeController', function() {

});

app.controller('NewProduitController', function() {

});

home.html:

<div>
<h1>home</h1>

</div>

What errors does it throw?

rrd
– rrd

2017-06-15 11:04:26 +00:00
Commented Jun 15, 2017 at 11:04 — rrd
– rrd, Commented Jun 15, 2017 at 11:04
nothing. but the browser does not show anything

Amir Choubani
– Amir Choubani

2017-06-15 11:05:01 +00:00
Commented Jun 15, 2017 at 11:05 — Amir Choubani
– Amir Choubani, Commented Jun 15, 2017 at 11:05

user5217795 · Accepted Answer · 2017-06-15 11:39:54Z

1

Set default URL state.

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


app.config(function($stateProvider,$urlRouterProvider) {
    $stateProvider.state('home',{
        url:'/home',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    });
    $stateProvider.state('chercher',{
        url:'/chercher',
        templateUrl: 'views/chercher.html',
        controller: 'MyController'
    });
    $stateProvider.state('newProduct',{
        url:'/newProduct',
        templateUrl: 'views/newProduct.html',
        controller: 'NewProductController'
    });
   // add this code 
   $urlRouterProvider.otherwise('/home');

});  

app.controller('HomeController', function() {

});

app.controller('NewProduitController', function() {

});

open this link in browser http://localhost:8080/

answered Jun 15, 2017 at 11:39

user5217795

Sign up to request clarification or add additional context in comments.

Comments

Amir Choubani · Accepted Answer · 2017-06-15 14:43:18Z

0

i solved the problem.

I used ui-sref instead of writing directly in the URL browser.

<button ui-sref="home" >Home</button>

answered Jun 15, 2017 at 14:43

Amir Choubani

1,0515 gold badges19 silver badges43 bronze badges

Collectives™ on Stack Overflow

unable to load view with angular-ui-router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related