How to Implement Angularjs state provider

Angularjs state provider
Angularjs state provider


Nested Views Home Page

Let’s look at how we can nest views. We’ll add two buttons to our home page and from there, we will want to show off different information based on what is clicked.

We’re going to add our buttons to partial-home.html and then go into our Angular file and see how we can change it to add nested views.

<!-- partial-home.html -->

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

    <a ui-sref=".list" class="btn btn-primary">List</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>

<div ui-view></div>


When linking to a nested view, we are going to use dot denotation: ui-sref=".list" and ui-sref=".paragraph". These will be defined in our Angular file and once we set it up there, we will inject into our new <div ui-view></div>.

In our app.js file, let’s create those nested states.

// app.js
...

$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.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

...

Now the ui-sref we defined in home.html are linked to an actual state. With home.list and home.paragraph created, those links will now take the template provided and inject it into ui-view.

Last thing we need to do for the home page is define the partial-home-list.html file. We have also passed in a controller with a list of dogs that we will use in the template file.


<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>

How to Implement Angularjs state provider Dev2Tricks 5 of 5
Angularjs state provider Nested Views Home Page Let’s look at how we can nest views. We’ll add two buttons to our home page and f...

Share this

Related Posts

Previous
Next Post »