AngularUI Router SPA App.

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
    <div ui-view></div>
</div>

<div class="text-center">
    <p>An Example AngularUI Router <a href="https://ui-router.github.io/ng1/tutorial/hellosolarsystem" target="_blank">UI-Routerouter.github.io</a></p>
    <p>View the full tutorial @: <a href="http://www.bogotobogo.com/AngularJS/AngularJS_ui-route-vs-ngRoute-multiple-views-nested-views.php" target="_blank">AngularJS Routing using UI-Router</a></p>
</div>

</body>
</html>

# Demonstration of AngularUI Router SPA

Code and demo for this tutorial





Overview

What is AngularUI Router?

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

States vs URL Route

With this approach, your views and routes aren't tied down to the site URL. This way, you can change the parts of your site using your routing even if the URL does not change.

When using ngRoute, you'd have to use ngInclude or other methods and this could get confusing. Now that all of your states, routing, and views are handled in your one .config(), this would help when using a top-down view of your application.

Sample Application

Let's do something similar to the other routing tutorial we made. Let's create a Home and About page.

Setup

Let's get our application started. We will need a few files:


- index.html                    // will hold the main template for our app
- app.js                        // our angular code
- partial-about.html            // about page code
- partial-home.html             // home page code
- partial-home-list.html        // injected into the home page
- table-data.html               // re-usable table that we can place anywhere


[AngularJS Routing Using UI-Router](http://scotch.io/tutorials/javascript/angular-routing-using-ui-router)

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        // nested list with custom controller
        .state('home.list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope) {
                $scope.prophets = ['Moses', 'Samuel', 'Elijah' , 'Elisha', 'Isaiah', 'Ezekiel', 'Daniel'];
            }
        })

        // nested list with just some random string data
        .state('home.paragraph', {
            url: '/paragraph',
            template: 'For God So Loved The World, That He Gave His Only Son, And That Whosoever Believes In Him Shall Not Perish, But Shall Have Eternal Life..'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            url: '/about',
            views: {
                '': { templateUrl: 'partial-about.html' },
                'columnOne@about': { template: 'I am just a regular column!' },
                'columnTwo@about': {
                    templateUrl: 'table-data.html',
                    controller: 'BibliaController'
                }
            }

        });

});

routerApp.controller('BibliaController', function($scope) {

    $scope.message = 'test';

    $scope.biblias = [
        {
            name: 'Biblia Ya Kiswahili',
            price: 2975
        },
        {
            name: 'King James Version ',
            price: 1850
        },
        {
            name: 'New International Version ',
            price: 2350
        },
        {
            name: 'The Amplified Version ',
            price: 1350
        },
        {
            name: 'The Good News Bible ',
            price: 20000
        }
    ];

});

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>A Simple Demonstration Of <span class="text-danger">Multiple</span> and <span class="text-danger">Named</span> Views.</p>
</div>

<div class="row">

    <div class="col-sm-6">
        <div ui-view="columnOne"></div>
    </div>


    <div class="col-sm-6">
        <div ui-view="columnTwo"></div>
    </div>


</div>

<ul>
    <li ng-repeat="prophet in prophets">{{ prophet }}</li>
</ul>

<div class="jumbotron text-center">
    <h1>Our Home Page</h1>
    <p>A Simple Demonstration Of <span class="text-danger">Nested</span> Views.</p>
    
    <a ui-sref=".list" class="btn btn-primary">Listicle</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
    
</div>

<div ui-view></div>

<h2>Bible Versions</h2>

<table class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody>
    
        <tr ng-repeat="biblia in biblias">
            <td>{{ biblia.name }}</td>
            <td>${{ biblia.price }}</td>
        </tr>
        
    </tbody>
</table>