The side menu is functioning properly, but the routes file is displaying empty

Trying to create a basic side menu with chats, events, and settings tabs. It works fine if I eliminate the settings and events blocks from the routes js file, but otherwise it doesn't display anything. Check out the snippets below or access the entire meteor folder here: https://drive.google.com/folderview?id=0B2MX6dSPUGBMTnMtWVVqLVcwNDQ&usp=sharing

An error keeps popping up:

=> Meteor server restarted Successfully started your app at: http://localhost:3000/ Startup errors detected: Issues found while processing files with pbastowski:angular-babel (for target web.browser): client/scripts/routes.js:20:4: Babel transform error Application contains errors. Awaiting file modifications.

routes.js and settings.html are shown below

angular
  .module('myapp')
  .config(config);
 
function config($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'client/templates/tabs.html'
    })
    .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'client/templates/chats.html'
        }
      }
    });
    .state('tab.events', {
      url: '/events',
      views: {
        'tab-events': {
          templateUrl: 'client/templates/events.html'
        }
      }
    });

    .state('tab.settings', {
      url: '/settings',
      views: {
        'tab-settings': {
          templateUrl: 'client/templates/settings.html'
        }
      }
    });


 
  //$urlRouterProvider.otherwise('tab/recents');
}
<!-- settings.html, events.html, chats.html are all pretty much the same -->

<ion-view view-title="Settings">
  <ion-content>
 
  </ion-content>
</ion-view>

menu.html

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-royal">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item menu-close title="Chats" href="#/app/chats">
          Chats
        </ion-item>
        <ion-item menu-close title="Events" href="#/app/events">
          Events
        </ion-item>
        <ion-item menu-close title="Settings" href="#/app/settings">
          Settings
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

javascriptangularjsmeteorionic-frameworksidebar

Answer №1

It seems that there are some unnecessary semicolons in your code snippet. The state calls need to be properly nested, so avoid ending them with a semicolon unless it's the final one. Below is the updated version of the code:

angular
  .module('myapp')
  .config(config);

function config($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'client/templates/tabs.html'
    })
    .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'client/templates/chats.html'
        }
      }
    })
    .state('tab.events', {
      url: '/events',
      views: {
        'tab-events': {
          templateUrl: 'client/templates/events.html'
        }
      }
    })

    .state('tab.settings', {
      url: '/settings',
      views: {
        'tab-settings': {
          templateUrl: 'client/templates/settings.html'
        }
      }
    });



  //$urlRouterProvider.otherwise('tab/recents');
}

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

Question about Looping Concept

var answer = ""; var correct = "4"; var question = "What is 2 * 2?"; for(i = 2; i < 5; i++) { answer = prompt(question, "0"); if (answer == correct) { alert("Your answer is correct!"); break; } } Before the break command is ...

javascript

What is the best way to halt an event using jQuery?

My question is about handling events on a webpage. I am interested in triggering a jquery method when the user clicks a link to navigate away from the page. In this method, I need to perform some checks before allowing the user to leave, so I plan to use: ...

javascriptjquery

The head.js feature similar to "Modernizr" does not recognize ms-edge

It has come to my attention that the head.js script is unable to detect the Microsoft "Edge" browser correctly. In addition, it erroneously adds classes like chrome and chrome55 to the <html> element. Is there a better way to handle this issue? The ...

javascriptangularjsuser-agenthead.js

Using Express.js and Angular for user authentication and session management

In my current project, I am utilizing expressjs and angularjs to create an app. The setup involves expressjs serving a single .html file that houses an angular single-page-application. All routing is handled by angularjs, while expressjs provides web servi ...

javascriptangularjsnode.jsexpress

Unable to simultaneously execute TypeScript and nodemon

Currently, I am in the process of developing a RESTful API using Node.js, Express, and TypeScript. To facilitate this, I have already installed all the necessary dependencies, including nodemon. In my TypeScript configuration file, I made a modification to ...

javascriptnode.jstypescriptexpress

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

In my React JS code snippet, I am attempting to search for a value within an object called 'categories' and then add the corresponding key-value pair into a new map named sortedCategories. var categoriesToSort = []; //categoriesToSort contains ...

javascriptnode.jsreactjsjslint

Directive for creating a custom loading indicator in Angular

I have created a custom Angular element directive that displays and hides a loading indicator based on a condition from a service call. The directive is used as an element within another element. While the directive itself works correctly, the issue is tha ...

angularjstypescriptangular-directive

Preventing CSRF Attacks: Establishing XSRF-TOKEN Cookie in JAX-RS Back-End for Integration with AngularJS Front-End

Our system incorporates AngularJS in the front end and Java RESTful web services at the back end. To prevent cross site request forgery, we are implementing XSRF-TOKEN as a security measure. In the front end setup, angular-cookies.js has been included and ...

angularjsrestcsrf

Discover the ultimate solution to disable JSHint error in the amazing Webstorm

I am encountering an error with my test files. The error message states: I see an expression instead of an assignment or function call. This error is being generated by the Chai library asserts. Is there a way to disable this warning in Webstorm? It high ...

javascriptwebstorm

Implementing automatic value setting for Material UI slider - a complete guide

I am working on developing a slider that can automatically update its displayed value at regular intervals. Similar to the playback timeline feature found on platforms like Spotify, Soundcloud, or YouTube. However, I still want the slider to be interactive ...

javascriptreactjsmaterial-ui

Issue with Three.js bounding box when importing a Blender JSON model

I am encountering some challenges when it comes to manipulating the objects imported from Blender. It seems like the pivot point is always set at 0,0,0 instead of the current position of the object. Despite correctly positioning and importing the objects i ...

javascriptthree.js

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe

Save unique data for each tab in the browser

In my web application, I store information about recently visited pages, which I'll refer to as type A. When a user visits a different page type, called B, I display a menu at the top with a button that links back to the most recently visited A-page. ...

javascriptjquerydjangolocal-storagebrowser-tab

Using the POST method in Node.js is not functioning properly on the Replit server when using express

Recently diving into the world of backend development, I have been utilizing Node.js on a Replit server with express to host an application for handling files: However, hitting a roadblock when attempting to execute a post request! var express = ...

javascriptnode.jsexpress

Restricting user input to spaces, periods, apostrophes, and letters in JavaScript

I need to implement a search page where the input should only include alphabets, spaces, and dots. @Html.TextBoxFor(x => x.UserName, new { @placeholder = "Enter Your Name", @id = "UserName", @class = "form-control" }) ...

javascriptasp.net-mvc-4

Add a jQuery click function within a loop indefinitely

Hello there, I have a simple loop set up in PHP and I am trying to figure out how to create an event that triggers whenever the user clicks on any line generated by this loop. Here's my basic PHP while loop: <?php $x = 1; while($x <= 5) { ...

javascriptphpjqueryhtmlwhile-loop

When I click the toggle on my mobile device, I desire for my navigation bar to overlap the content

Is it possible to have my navigation bar overlap the content when toggled on mobile size, without causing the content to scroll down? Below is the HTML, CSS, and JS code for my site. Can someone help me with coding this functionality? $(function() { ...

javascripthtmljquerycss

Enhancing Symfony's performance through optimized Ajax response time

When using Symfony2, I am experiencing differences in loading times for AJAX requests between development and production environments. In development, it takes 1 second to load, while in production it only takes 500 milliseconds for a simple call: Here is ...

javascriptphpjqueryajaxsymfony

Tips for running a dry default with Angular CLI

Query: Can dry-run be set as the default in a configuration? Purpose: Enabling dry-run by default simplifies the learning process by minimizing clean-up tasks if the command is not correct. This can encourage users to always perform a test run before exec ...

javascriptangulartypescriptangular-cliangular-cli-v6

Express was unable to save the cookie

I've been attempting to save a login session into a cookie when a user logs in using their username/password, so that the server can recognize that the user is authenticated. However, despite my efforts, the cookie remains unset. Below is the relevan ...

javascriptnode.jsexpresscookiessession-cookies