CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Mukesh Kumar Mishra
Mukesh Kumar Mishra

Reputation: 161

Angular Routing to HTML Files Not Working

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:

enter image description here

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

EDIT Here is a view of the UI

enter image description here

Upvotes: 1

Views: 57

Answers (1)

BorcheIvanov
BorcheIvanov

Reputation: 86

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?

Upvotes: 1

Related Questions