Any Good Angular UI Route walk through's for beginners

Question

Morning Folks,

I've been using angularjs for the last few months, and now want to start branching out into the ui router frame so I can start building more fluid and functional apps.

Could anyone point me in the right direction of some good tutorials. I've looked on google for some but alas most of them are some what confusing.

If there was a step by step basic guide out there it would be great.

Here is my html:

<DOCTYPE! html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--<link rel="stylesheet" href="\css\custom.css">-->
</head>
<body ng-app="testApp">

<section class="row">   
            <section class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <section class="container">
                            <section class="navbar-header">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button><!--End on the menu button-->
                              <a class="navbar-brand" ui-sref="#">Test APP</a>
                            </section><!--End of Nav Header-->
                            <section class="navbar-collapse collapse">
                              <ul class="nav navbar-nav">
                                <li class="active"><a ui-sref="home">Home</a></li>
                                <li><a ui-sref="about">FX News</a></li>
                                <li><a ui-sref="contact">Test News</a></li>
                                <li><a ui-sref="about">Contact Us</a></li>
                                <li><a ui-sref="contact">Meet Test</a></li>
                                <li><a ui-sref="about">Logout</a></li>
                              </ul>
                            </section><!--End of the nav-collapse menu-->
                      </section><!--End of the container section-->
            </section><!--End of the navMenu section-->
</section><!--End of the Nav row-->

<section class="row" style="padding-top:2em;"><!--Main content area for the app-->
        <section class="col-xs-12">
            <section ui-view></section>
        </section>
</section><!--End of the main content are of the app-->

</body>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><!--jquery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script><!--bootstrap js-->
    <script src="http://code.angularjs.org/1.2.13/angular.js" type="text/javascript"></script><!--angular js-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"  type="text/javascript"></script><!--UI Route-->
    <script src="js/app.js" type="text/javascript"></script><!--Custom js for the app-->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js" type="text/javascript"></script><!--angular animation-->

</html>

This is the app.js:

// app.js
var testApp = angular.module('testApp', ['ui.test']);

testApp.config(function($stateProvider, $urltestProvider) {

    $urltestProvider.otherwise('/home');

    $stateProvider

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

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit       
        });

});

And this is my partial-home.html:

<section class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>    
</section>

Thanks in advance,

Noob Angular guy.

If are looking for some resource, plese check this [answer](http://stackoverflow.com/a/20581135/1679310) for a list of links with the core knowledge about the ui-router — Radim Köhler, Sep 23 '14 at 04:47

score 0 · Answer 1 · answered Sep 18 '14 at 08:23

this article from scotch.io is what I had used as starting point for me.

the best way to learn is start trying it out... so the below code should get you started :

    // app.js 
   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'
    })

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
    .state('about', {
        // we'll get to this in a bit       
    });

});

score 0 · Accepted Answer · answered Sep 23 '14 at 04:35

0

Pluralsight has some good tutorials for angularJs. I learnt it from here-

PluralSight

I think so the 4th module has Routing video tutorials.

answered Sep 23 '14 at 04:35

RahulB

2,070
1
18
26

Any Good Angular UI Route walk through's for beginners

2 Answers2