Select a div to trigger the opening of an Angular template in a separate section

My goal is to create a functionality where clicking on the anchor within the #leftDiv triggers the opening of the UI router template in the #rightDiv. Specifically, I want clicking on Hello Plunker 1 in the #leftDiv to display peopleOne.html in the #rightDiv, and clicking on Hello Plunker 2 should replace peopleOne.html with peopleTwo.html in the #rightDiv.

For reference, you can check out a demo on Plunker - https://plnkr.co/edit/T8RTgea8VccA9mdBABGC?p=preview

If anyone could shed light on why this functionality is not working as expected, it would be greatly appreciated.

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'
                    }
                },
            })
})
javascriptangularjsangular-ui-routerangularjs-ng-route

Answer №1

Upon reviewing your code, I have identified a few issues:

Firstly, make sure to include a console.log statement after the $stateProvider configuration calls in order to set up your routes correctly. It seems that this code is not being executed at all. Additionally, ensure that you are using ng-app instead of dat-ng-app in your index template to properly initialize your angular app.

The next problem lies in your $stateProvider configuration. Your state configurations should follow a structure similar to this:

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

    # Configure 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'
        })

Last but not least, when creating links in your template, consider using the ui-sref directive. This allows you to generate links based on state names. For example, a link to the peopleOne state would be written as: 

<a ui-sref="peopleOne"></a>
.

I have included a Plunker example based on your original code for reference:

https://plnkr.co/edit/NazuoFoDOa3VGR6smoyH

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to detect errors within AWS Amplify?

Examining the code snippet below React.useEffect(() => { Auth.currentUserInfo() .then((data) => { if (data.username) { //do something with data } }) .catch((error) => console.log('No logged in ...

javascriptreactjstypescriptreact-nativeaws-amplify

Using a directive to implement Angular Drag and Drop functionality between two tables with 1000 records

My code is functional, but there seems to be a delay in the appearance of the helper(clone) when dragging starts. I have two tables - one for the include list and another for the exclude list. Users can drag table rows from the include table to the exclud ...

javascriptjqueryangularjsdrag-and-dropdirective

Can a PHP form data processing script be triggered via AJAX within the same file as the HTML form?

When working with HTML forms, I've learned that it's considered 'elegant' to process the data in the same file. For example: <?php if isset($_POST['submit'] doSomething(); ?> ... <form action="" method="POST"> How ...

javascriptphphtmlajax

The content-type specified in the jQuery $.ajaxSetup() function is not being implemented as expected

<script type="text/javascript"> $(document).ready(function () { $.ajaxSetup({ type: 'POST', url: 'AjaxService.asmx/GetBorughs', contentType: 'application/json; cha ...

c#javascriptjqueryajaxjson

Is there a way to retrieve all the checked objects from a group of AngularJS Checkboxes?

How can I retrieve all the selected objects from checkboxes using AngularJS? Here is a snippet of my code: View Template (view.tpl.html) <tr ng-repeat="item in itemList"> <td> <input type="checkbox" ng-click="clickedItem(item.id)" ...

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-ui

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

javascripthtmlcssonsen-ui

What could be the reason for my image not loading properly in Vue.js 3?

I'm struggling to load an image using a relative path and value binding with v-for in my template code. Despite following the correct syntax, the website is displaying an error indicating that it can't retrieve the image. Here's a snippet of ...

javascriptvue.jsvuejs3vue-component

The conversion function from string to integer is malfunctioning

I am currently working on a website where my client has the ability to modify their table_id. However, whenever I attempt to make these changes, the value in the database resets to 0. The table_id column is an integer type in MySQL, and I believe that&apos ...

javascriptphpx-editable

Using NodeJS to invoke an internal call to an Express Route

I am working with an ExpressJS routing system for my API and I need to make calls to it from within NodeJS var api = require('./routes/api') app.use('/api', api); Within my ./routes/api.js file var express = require('express&apo ...

javascriptnode.jshttpexpressroutes

Recall input values from form field to use on another page

I have "Page 1" and "Page 2". When I navigate from "Page 1" to "Page 2" by clicking the button labeled "Go To Page 2", I also encounter an input field with a placeholder text of "This field right here" on "Page 1". On "Page 2", there is a button named "G ...

javascriptjqueryhtmlform-submit

Defining the range of an array of numbers in TypeScript: A complete guide

When working with Next.js, I created a function component where I utilized the useState hook to declare a variable for storing an array of digits. Here is an example: const [digits, setDigits] = useState<number[]>(); I desire to define the range of ...

javascripttypescriptnext.js

Display all subfolders within the selected directory

I am looking to dynamically repeat only the catalogs of folders that have been clicked. Below is the HTML code: <li class="left-menu-list-submenu"> <a class="left-menu-link" href="javascript: void(0);" ng-click="getfolders();"& ...

angularjs

Creating a 3D textured sphere using Three.js

I am new to Three.js and have a basic question about loading a texture on a sphere. I am using the createEarthMaterial function in my code from the "Three.js Essentials" book but it is not working. The image file with the texture is named 'map2.png&ap ...

javascriptthree.js

Issue with importing a file using JQuery causing the click event to not function properly

I have a file named navigation.html located in a directory called IMPORTS <!-- Navigation --> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-ta ...

javascriptjqueryhtml

AngularJS utilizes @Input to retrieve the variable name

Currently, I am working on transitioning my AngularJS application to Angular. I have a few components with bindings that need to be converted to Angular. AngularJS Code: <my-comp test="test.data" otherData="test.otherData"><my-comp> my-comp ...

angularjsangularng-upgrade

stop initial focus on input field in Ionic

One issue I'm facing is that my login screen for the application automatically focuses on the 'username' input field and triggers the keyboard to pop up. This causes the contents of the login screen to push up, resulting in incorrect dimensi ...

csshtmlangularjsionic-framework

Encountering a SyntaxError while attempting to use jQuery.html for inserting an HTML fragment that includes a

I've encountered an issue while using a jQuery AJAX request to fetch HTML content from the backend. Once the status is OK, I'm trying to append this HTML content to a div using the following code snippet: $('#divElm').html(response.data ...

javascriptjquerysyntax-error

Enhancing WooCommerce by including additional text following the price for specific shipping methods

I need assistance with including a short message like "(incl. VAT)", following the shipping-price display on the checkout page. The challenge lies in ensuring that this message only appears for a specific shipping method within Zone 1 (zone_id=1), but I&a ...

javascriptphpwordpresswoocommerce

What is the best way to transmit data to a PHP script using AJAX?

I'm facing an issue with my basic ajax script not running. The code I have should work fine. The ajax script is: <html> <head><title>Testing ajax</title> <script type="text/javascript"> function ajax() { ...

phpjavascriptajaxpostget

Type parameter for unprocessed JSON information

I am currently facing an issue with a script that communicates with my API and returns the response to the caller. I am having trouble defining the type correctly for this operation. The responses from the API always consist of a boolean flag, success, in ...

javascriptjsontypescript