Angular UI route helps to implement SPA concept using the concept of STATES. The main goal of SPA is navigating from one view to other view without reloading the main page. Angular UI route visualizes every view as a STATE. When you want to navigate from one view to other view, you can either use the STATE names or use URL.
So let’s say we want to navigate from Home.htm view to About.htm view so we can define two states Home and About and link them to the respective HTML page as shown below.
You can also specify URL by which you can move between these states by using url property as shown in the below code.
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Home', {
url: '/HomePage',
templateUrl: 'Home.htm'
})
.state('About', {
url: '/About',
templateUrl: 'About.htm'
})};Now once the states are defined to we need to use ui-sref and if you want to navigate using url provide url value in the href of the anchor tag.
We also need to provide "<ui-view>" tag to define in which location we want to load the views.
<a ui-sref="About" href="#About">Home</a>
<a href="#Home">About</a>
<ui-view></ui-view>
Below is the complete code if HTML, please ensure you have also referenced of Angular-UI js file. You can also see App.js file, this file has code which defines the states.
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/angular-ui-router.js" type="text/javascript"></script>
<script src="Scripts/App.js" type="text/javascript"></script>
<body ng-app="myApp">
<a ui-sref="About" href="#About">Home</a>
<a href="#Home">About</a>
<ui-view></ui-view>
</body>
</html>
