Maz Maz - 5 months ago 10
AngularJS Question

How to use AngularJS UI Router?

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>

Answer

It should be ui-view instead of ng-view

Comments