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

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

Issue with Ajax not sending query string to ASP.NET controller

I am currently working with an Ajax function that serializes data sent from my view into a query string. Here is the code snippet: UpdateFIConfig: function ($appForm) { var valid = $appForm.valid(); //if not valid the validate plugin will take ca ...

What are some alternative methods for organizing folder structure in Express Handlebars when managing views?

Is there a more efficient way to render HTML files without constantly needing them to have different names? I'm looking for a method where handlebars can identify which file in which folder to render, without encountering conflicts with files of the s ...

Tips for transferring a list via ajax to a controller

Having a controller as follows.. public ActionResult Report(List<string> invoiceIds) and utilizing an ajax call like this... function generateAccountsPayableReports() { var ms = $("#msInvoicesAPV").data("kendoMultiSelect"); var invoices = ...

Transforming JSON object to an array of arrays using JavaScript

Attempting to extract specific values from a JSON object and store them in an array can be quite tricky. Below is an example of what this process might look like: Example: var obj = { "1":{"class":2,"percent":0.99,"box":[0.2,0.3,0.4,0.5]}, "2 ...

The file system could not locate the specified path for deletion

Having issues with a delete function in ExpressJS. Even after following tutorial guides, the path of the element to be removed keeps showing up as undefined: router.delete('/messagedelete/:empId', function (req, res) { Message.remove({empId: ...

Problem identified with Vue.js: The Log in screen briefly flashes before redirecting the authenticated user (resulting in a full page refresh)

My routing is functioning properly, utilizing navigation guards to prevent users from accessing the login or register routes once they are signed in. However, when I manually type '/auth/signin' in the address bar, the login screen briefly appear ...

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Issue: By default, the checkbox is always set to true in the backend code. Even if I uncheck it using JavaScript, the value remains as true when switching between slides. Desired Outcome: If I uncheck the checkbox, the updated value should be saved so tha ...

issue with AngularJS model not initially binding to select dropdown

I am facing an issue with a select dropdown in my code. I am using ng-repeat to populate the dropdown like this: <select ng-model="tstCtrl.model.value" required> <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b ...

Assistance needed for iterating through JSON data

I need assistance retrieving specific data from a JSON response in my JavaScript code. Unfortunately, the current approach is not providing the desired results: This is my JavaScript code snippet: function retrieveArtists(response){ var artistList ...

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

unable to send updates to groups in socket.io

When a user connects, the system will search for a room with fewer people than the maximum allowed. If such a room is found, the user joins it. If no suitable room is available, the system creates a new one. The room creation process is functioning correct ...

React Array Not Behaving Properly When Checkbox Unchecked and Item Removed

When using my React Table, I encountered an issue with checkboxes. Each time I check a box, I aim to add the corresponding Id to an empty array and remove it when unchecked. However, the current implementation is not functioning as expected. On the first c ...

Matching numbers that begin with zero or are completely optional using Regex

Attempting to come up with a regex pattern that will allow the entry of the specified input into an HTML input field: The input must begin with 0 The input can be left empty and characters may be deleted by the user ^[^1-9]{0,1}[0-9\\s-\& ...

Angular8 Chart.js customizes the Y axis tick labels

Is there a way to dynamically adjust the Y-axis ticks in a chart.js graph? I attempted to modify them using the following commands: this.chartOptions.scales.yAxes[0].ticks.min = 10; this.chartOptions.scales.yAxes[0].ticks.max = 18; ...

Get a PDF file from MongoDB via jade Template Engine

Currently, I am utilizing Node, along with express, Jade, and a MongoDB to query the database and showcase the data on a webpage. Within the database, PDFs are stored and my goal is to enable users to download these files directly from the webpage. While ...

Is there a way to identify the element causing an error in promise.map and then either log it to the console or skip it using code?

When running the code provided below, I encounter a 500 error for certain URLs in my list due to the structure of the page. The error occurs specifically on the line .map((htmlOnePage, index) => when some URLs lead to invalid pages, causing the prog ...

What is the best way to create a new row within a Bootstrap table?

Struggling to format an array inside a table with the `.join()` method. The goal is to have each car on a separate row. Attempts using `.join("\r\n")` and `.join("<br />")` have been unsuccessful. What am I overlooking? ...

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Is it possible to code a PHP function that can work alongside a textarea to display text in the specified color by using a syntax like [color:red]? This function operates in a similar manner to Facebook's @[profile_id:0] feature. ...