How to use AngularJS UI Router?

Question

I'm trying to use AngularJS UI Router to load view1 and view2, but they're being not loading into the index.html page. Can you please help?

This is the link to whole project in Plunker

Also below, is the index.html page code:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Routing</title>
  <script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
  <script data-require="ui-router@*" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <ul class="menu">
    <li>
      <a ui-sref="view1">view1</a>
    </li>
    <li>
      <a ui-sref="view2">view2</a>
    </li>
    <li>
      <a ui-sref="index">Home</a>
    </li>
  </ul>
  <div>Below you should see the partial view :) ... </div>
  <div ng-view="">
    <p>ng-view should be loading data from about.html right here but it's not working</p>
  </div>

  <script src="app.js"></script>

  <script src="controllers.js"></script> 
</body>

</html>

You have wrong markup. Use ui-view instead of ng-view.

Markus
– Markus

2016-06-09 12:04:33 +00:00
Commented Jun 9, 2016 at 12:04 — Markus
– Markus, Commented Jun 9, 2016 at 12:04

Pankaj Parkar · Accepted Answer · 2016-06-09 15:00:19Z

3

It should be ui-view instead of ng-view(angular ngRoute routing api use this)

edited Jun 9, 2016 at 15:00

answered Jun 9, 2016 at 12:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

M.Z. Over a year ago

Thank you very much. That has helped me a lot!

Pankaj Parkar Over a year ago

@Maz glad to know that it helped, Thanks :-)

Collectives™ on Stack Overflow

How to use AngularJS UI Router?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related