CODEWITHSUNDEEP
angularjsangular-ui-router
Olivier Girardot
Olivier Girardot

Reputation: 409

AngularJS, ui-router not showing templates

I am new to AnguarJS and to be honest a bit confused right now. I just started getting into routing and create this very small app just for testing, but it's not working. Let me share the entire app, which is... just 2 files:

1/ app.js

angular
    .module('app', ['ui.router'])

app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: 'first',
        template: `<h1>First message</h1>`
    });
}]);

2/ index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ui routing testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <a href="#/first">First Message</a>
    <div ui-view></div>
</body>
</html>

That's it! But when I run the app with npx http-server -o the templatedoesn't show when I click and land on the #/first url. Does anyone have an idea where the problem comes from?

Upvotes: 0

Views: 26

Answers (1)

Xavier Haniquaut
Xavier Haniquaut

Reputation: 1043

I think you are missing a / in your url property


angular
    .module('app', ['ui.router'])

app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first', // HERE
        template: `<h1>First message</h1>`
    });
}]);

Upvotes: 1

Related Questions