Click on one div and make Angular template open in another

Question

I want to be able to click on the anchor in the #leftDiv and make the UI router template open in the #rightDiv. So, when I click on Hello Plunker 1 in the #leftDiv, I want peopleOne.html to open in the #rightDiv. When I click on Hello Plunker 2, I want peopleTwo.html to replace peopleOne.html in the #rightDiv.

Here is a Plunker - https://plnkr.co/edit/T8RTgea8VccA9mdBABGC?p=preview

Can someone provide insight into why this is not working.

Script.js

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

angular
    .module('Delivery')

.config(function($stateProvider, $locationProvider) {

    $locationProvider.hashPrefix('');        

    $stateProvider
        .state('home', {
            url: '/Delivery',
            views: {
                'view': {
                            templateUrl: 'Delivery.html',
                        },
            },
        })

        .state('peopleOne', {
                url: '/peopleOne',
                parent: 'home',
                views: {
                    'view@': {
                    templateUrl: 'peopleOne.html'
                    }
                },
            })

        .state('peopleTwo', {
                url: '/peopleTwo',
                parent: 'home',
                views: {
                    'view@': {
                    templateUrl: 'peopleTwo.html'
                    }
                },
            })
})

Answer 1

A few problems I've noticed:

First, put a console.log after the $stateProvider configuration calls to setup your routes. You will see that this code is never even called. Your angular app is not quite set up properly. You are using dat-ng-app in the index template, when you should be using ng-app. Otherwise angular is never actually used.

The next issue is in your $stateProvider configuration. I am not sure which documentation you are following, but your configurations for the states should look something like this:

    # Set the default state
    $urlRouterProvider.otherwise('/home')

    # Configures home, peopleOne, and peopleTwo states
    $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home.html'
        })
        .state('peopleOne', {
          url: '/peopleOne',
          templateUrl: 'peopleOne.html',
          parent: 'home'
        })
        .state('peopleTwo', {
          url: '/peopleTwo',
          templateUrl: 'peopleTwo.html',
          parent: 'home'
        })

Finally, when actually creating the links in your template, I find it easier to use the ui-sref tag, which allows you to create a link based on a state name. So a link to the peopleOne state would look like this: <a ui-sref="peopleOne"></a>.

I've attached a plunker based off your original code

https://plnkr.co/edit/NazuoFoDOa3VGR6smoyH