Angular Routing to HTML Files Not Working

Question

I am new to Angular learning through videos. I got stuck in this routing part of my code.

index.html

<header id="top" class="header">
    <div class="text-vertical-center bg-color" ng-controller="HeaderController">
        <h1 class="animated fadeInLeft">SORTIFY</h1>
        <h3 class="animated fadeInUp">Your Personal Music Assistant</h3>
        <br>
          <a href="#music" class="btn btn-dark btn-lg" >Check out Music</a>
          <a href="#genre" class="btn btn-dark btn-lg">Genrify your Songs</a>
    </div>
</header>

script.js

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

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

$stateProvider
    .state('music', {
    url: 'music',
    templateUrl: 'music.html',
  });

$urlRouterProvider.otherwise('/index');
}]);

This is my folder structure:

I tried many ways but am still failing, have a look!!

EDIT Here is a view of the UI

you can use ui-sref="statename" instead of href in anchor tag of your header — Dhiraj
– Dhiraj, Commented Jul 12, 2016 at 11:17

BorcheIvanov · Accepted Answer · 2016-07-12 10:55:23Z

1

I am not sure if this is causing your problem but try like this:

<a href="#/music" class="btn btn-dark btn-lg" >Check out Music</a>

and in the config file:

.state('music', {
url: '/music',
templateUrl: 'music.html',

});

PS. Do you have <div ui-view></div> somewhere on your app?

edited Jul 12, 2016 at 10:55

answered Jul 12, 2016 at 10:46

BorcheIvanov

865 bronze badges

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

5 Comments

Mukesh Kumar Mishra Over a year ago

I added that but still of no use, maybe I am doing some silly mistake.

BorcheIvanov Over a year ago

See whats happening in the Console and post the errors if there are some, also provide more code so if there is 'silly' mistake someone will spot it.

Mukesh Kumar Mishra Over a year ago

angular-route.min.js:7 -> Uncaught TypeError: Cannot read property 'module' of undefined

Mukesh Kumar Mishra Over a year ago

angular.js:38 -> Uncaught Error: [$injector:modulerr]

BorcheIvanov Over a year ago

so make sure you referenced ui-router in your index.html and Injected on your app module

Collectives™ on Stack Overflow

Angular Routing to HTML Files Not Working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related