How to implement SPA using angular-UI route?

Published on Author Code Father
How to implement SPA using angular-UI route?

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>

 

Comments

comments