Upgrading from ng-router to ui-router in the Angular-fullstack application

issue 1:

url:/home, templateUrl: 'index.html
is appearing twice.

problem 2:

views: templateUrl: 'views/partials/main.html
is not visible at all.

What am I doing wrong? How can I effectively incorporate ui-router into yeoman's angular-fullstack generator?

app/scripts/app.js:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
            url: '/home',
            templateUrl: 'index.html',
            views: {
                '': {
                    templateUrl: 'views/main.html'
                },
                'navigation@home': {
                    templateUrl: 'views/_partials/navigation.html',
                    controller: 'NavigationCtrl'
                },

                'menu@home': {
                    templateUrl: 'views/_partials/menu.html',
                    controller: 'MenuCtrl'
                },
                'weekly@home': {
                    templateUrl: 'views/_partials/weekly.html',
                    controller: 'WeeklyCtrl'
                },
                'sidepanel@home': {
                    templateUrl: 'views/_partials/side-panel.html',
                    controller: 'SidePanelCtrl'
                },
                'shoppanel@home': {
                    templateUrl: 'views/_partials/shop-panel.html',
                    controller: 'ShopPanelCtrl'
                },
                'footer@home': {
                    templateUrl: 'views/_partials/footer.html',
                    controller: 'FooterCtrl'
                }
            }
        });
    $locationProvider.html5Mode(true);
});

app/index.html

<div class="container" ui-view></div>

app/views/main.html

    <!-- z-100 fixed-->
<section ui-view="navigation" id="navigation"></section>

<!-- z-5 fixed-->
<section ui-view="weekly" id="weekly" class="panel" ></section>

<!-- z-10 relative top:100%; margin-bottom: 33%;-->
<section ui-view="content" id="content" ></section>




<!-- z-1 fixed height: 33%;-->
<section id="footer" ui-view="footer" ></section>

<!-- z-1 fixed -->
<section id="ui">

    <div ui-view="sidepanel" id="side-panel" class="panel"></div>
    <div ui-view="shoppanel" id="shop-panel" class="panel"></div>

</section>

/lib/routes.js

  app.route('/partials/*')
   .get(index.partials);
  app.route('/*')
   .get( index.index);

lib/controllers/index.js

var path = require('path');

/**
 * Send partial, or 404 if it doesn't exist
 */
exports.partials = function(req, res) {
  var stripped = req.url.split('.')[0];
  var requestedView = path.join('./', stripped);
  res.render(requestedView, function(err, html) {
    if(err) {
      console.log("Error rendering partial '" + requestedView + "'\n", err);
      res.status(404);
      res.send(404);
    } else {
      res.send(html);
    }
  });
};

/**
 * Send our single page app
 */
exports.index = function(req, res) {
  res.render('index');
};

Answer №1

After reviewing your code, I recommend trying out my suggestions to resolve the issues you are facing. I have experience working with a basic framework that combines mongo, express, angular, node, and jade as the view engine. Based on what I found in the lib directory of the project on github, these changes should help.

For the first issue, make the following adjustment in your /libs/routes.js file:

app.get('/partials/*', index.partials);
app.get('/*', index.index);

Regarding the second problem, modify the code in your app/scripts/app.js file as follows:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
        url: '/home',
        
        views: {
            'navigation': {
                templateUrl: 'views/_partials/navigation.html',
                controller: 'NavigationCtrl'
            },
            
            'menu': {
                templateUrl: 'views/_partials/menu.html',
                controller: 'MenuCtrl'
            },
            'weekly': {
                templateUrl: 'views/_partials/weekly.html',
                controller: 'WeeklyCtrl'
            },
            'sidepanel': {
                templateUrl: 'views/_partials/side-panel.html',
                controller: 'SidePanelCtrl'
            },
            'shoppanel': {
                templateUrl: 'views/_partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
            },
            'footer': {
                templateUrl: 'views/_partials/footer.html',
                controller: 'FooterCtrl'
            }
        }
      });
    $locationProvider.html5Mode(true);
  });

Make sure to visit your partials to ensure they are accessible. If there are any errors, try checking the DevTools for more information. Good luck!

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

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

I utilized yarn to install idb-keyval By utilizing the following code, I imported it: import { set } from 'idb-keyval'; Then, I assigned a value to a variable using the following code snippet: set('hello', 'world'); Althou ...

I am wondering why my JSON appears in Kendo UI as Datasource.options.data but not Datasource.data

I'm new to Kendo and struggling to display my JSON data in the Kendo Grid. When I try to access my $scope.actionData using a regular HTML table, it displays on the page. My ultimate goal is to achieve something similar to this. The column headers ar ...

Implement a jQuery loop that utilizes the fadeIn effect

Currently, I have a basic jQuery function in place to generate a small image slider: function gridhover() { $(".grid-item .slide-image").each(function(index) { $(this).delay(400*index).fadeIn(300); }); } $( ".grid-item" ).hover(function() ...

Crafting LayerGroups on the Fly with Leaflet

Dynamic Creation of LayerGroups: Is it Achievable? I am currently working on a web map showcasing the various tree species present in parks. My goal is to create a separate LayerGroup for each species so that users can toggle visibility using a LayerContro ...

Instructions for saving a binary file on the client using jQuery's .post function

I am working with a handler that has the following code: HttpRequest request = context.Request; HttpResponse response = context.Response; if (request["Type"] != null) { try { string resultFile = null; ...

Forwarding refs in React FC allows you to easily pass down

I have encountered an issue with references - I am trying to reference a function component and pass props to it. Currently, I have my Parent component and Child Component set up. In the parent component, I need to use a ref to access my child component. S ...

Is there a way to incorporate personalized image placeholders into Next.js?

The Image component has properties called placeholder and blurDataURL. The placeholder property can have a value of either 'blur' or 'empty', with no other option. I tried setting the placeholder to 'blur' and specifying the b ...

Issues arise when socket events fail to trigger in a web browser when utilizing docker containers and docker-compose

Before dockerizing the application, all functions as expected. However, after migrating the application to Docker, I am experiencing issues with receiving socket events in the browser. The server can still receive socket events from the browser and conso ...

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

Exploring My jQuery Plugins: (function ($, window, document, undefined) { $.fn.loadPageContent = function (url, dataToSend) { url = url || window.location.href; dataToSend = dataToSend ? dataToSend : {}; return $.post(url, data ...

The function onReady() fails to trigger the execution of $.getJSON() upon page restoration in the browser

Initially, I want to mention that the code below functions perfectly when I launch a new browser tab and enter my web server's URL. It also works fine when I reload the page (using F5 or Ctrl-R). However, it only partially works if I reopen a closed b ...

Error: The import token is not what Express was expecting

In my index.js file, I have the following code: import express from 'express' import data from './data/data' const app = express(); const PORT = 3000; app.listen(PORT, () => console.log(`Server is running on ${PORT}`) ); Be ...

HMR: The webpack-hot-middleware is not refreshing my webpage

My Vue application, titled hello-world, is utilizing webpack-dev-middleware and webpack-hot-middleware. When running the application, it shows that it's connected in the console. However, after making changes to my main.js file, the following message ...

The AngularJS directive is being triggered before the Jquery AJAX request is completed

I am currently facing an issue where the chart in my AngularJS application (using NVD3.org) is loading before the AJAX call completes and data is fetched. How can I ensure that the chart waits for the AJAX call to finish? <script> var dataxx= ...

Converting a PHP string into a JSON array

Currently, I am working on making a cURL request and receiving a response that is in the following format when using var_dump: string(595) "{"user_id":1,"currency":"eur","purchase_packs":{"1":{"amount":500,"allowed_payment_methods":["ideal","paypal","visa ...

Guide on verifying internet connection status using Ajax request

Ensuring authentication by checking the availability of network connection on mobile devices. To do this, we must have both a username and password. The authentication process will be conducted online, requiring an active internet connection on the device. ...

Error message encountered in MEAN application request

Learning how to use the MEAN stack has been an exciting journey for me as I venture into building web apps. Rather than relying on yeoman generators or npm app to do the heavy lifting of generating code, I have delved into creating my entire app from scrat ...

Struggling to get this bootstrap carousel up and running

I can't seem to get this bootstrap carousel to switch slides, whether I use the indicators or arrows. My other carousel works perfectly fine and I've added all necessary Bootstrap and JavaScript CDNs. I'm puzzled as to why it's not func ...

Updating the filter predicate of the MatTableDataSource should allow for refreshing the table content without needing to modify the filter

Currently, I am working on dynamically altering the filterPredicate within MatTableDataSource to enhance basic filtering functionalities. I want to include a fixed condition for text filtering (based on user input in a search field) for two string columns ...

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

Retrieving values from all fields in a dynamic form using VuejsLet's say

In the process of developing an admin panel using Vuejs and tailwind CSS for managing exercises on a page, I have encountered some challenges. My current objective is to insert the dynamic form values into a Firebase real-time database. However, I am stru ...