Having trouble with AngularJS ngRoute not displaying pages on ng-view?

I've been searching through various questions similar to mine, but I can't seem to find the solution here.

For some reason, ng-view is not loading my pages. Am I overlooking something obvious?

Here's my code in App.js:

var app = angular.module('mySite', [
    'ngRoute',
    'PortfolioController',
    'AboutCtrl',
    'ContactCtrl'
  ]);

  var selectedSpecIdGlobal = 0;

  app.config(function($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    })

    .when('/about', {
        templateUrl : '/pages/about.html',
        controller : 'AboutCtrl'
    })

    .when('contact', {
        templateUrl : '/pages/contact.html',
        controller : 'ContactCtrl'
    })

    .otherwise('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    });


  });

In index.html:

<!DOCTYPE html>
<html ng-app="mySite">
  <head>
    <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="jqueryfuncs.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body class="list-group"  ng-controller="mainController">
    <header>

    </header>

    <div class="page-content">
        <ul class="main-nav" id="main-nav">
            <li><a href="#"><i class="fa fa-home"></i> Portfolio</a></li>
            <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
            <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
        </ul>   

        <div class="main">

            <div ng-view></div>

        </div>      
    </div>
  </body>
</html>

I'm currently testing it on Chrome and Mozilla browsers. Despite reading similar answers, I can't quite get it to work.

Is there a more efficient way to troubleshoot this issue rather than trial and error?

Answer №1

Is my implementation of .otherwise(...) correct?

I believe this is the proper way to write it:

.otherwise({
    redirectTo: '/' /*redirects to portfolio (as defined earlier with "/") */
});

LATEST UPDATE

To assign controllers for each route, remove

'PortfolioController','AboutCtrl','ContactCtrl'
from the angular.module([...]); script and instead assign them inside the when(...) function.

Check out this Fiddle Example

NEW UPDATE 2

Here is an updated fiddle example for you (please note that I had to use Angular version 1.2.1 in the fiddle. Ensure consistency in using the same versions of angular.js and its modules for compatibility.

Fiddle Link

Answer №2

It's important to always avoid using minified libraries for testing as it can affect error reporting. Opt for the unminified version of angular instead to receive more detailed error messages.

Additionally, ensure that you have created and added all four controllers to the crisSite module, and make sure they are included in the index.html file. Double check your naming convention, either stick with NameController or NameCtrl for consistency.

Don't forget to add a / to your contact route and follow the syntax provided by Ramis for the otherwise statement.

Lastly, verify that all template paths are correctly pointing to the respective files.

If you need further assistance, consider sharing a fiddle or plunker with the complete code since there could be multiple factors causing issues.

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

Trouble with Node.js Body-Parser when trying to access form data

Errors in the console.log output from a form's input have me scratching my head. The body-parser is giving me 'undefined' for the input I'm trying to display on my terminal. I must have made a mistake somewhere, but I can't seem to ...

Having trouble getting the React App to run after cloning it from Github

I'm in need of some assistance and would greatly appreciate it. I've cloned this project: https://github.com/iearn-finance/iearn-finance, and I aim to create a front-end website similar to this one: . However, I'm encountering difficulties ...

Using Swig template to evaluate a condition

I'm trying to achieve something similar using swig-template. var remId = $(this).attr('remId'); if (remId) { var end = remId.search('_'); var underscore = remId.slice(end, end + 1); var Id = remId.slice(end + 1, remId ...

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

Automatically append version number to requests to avoid browser caching with Gulp

When deploying my project, I utilize gulp to build the source files directly on the server. In order to avoid caching issues, a common practice is to add a unique number to the request URL as explained in this article: Preventing browser caching on web app ...

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

I am facing an issue in my Laravel project where I have implemented a method in the Vue instance to validate resource availability upon form submission. The validation is done through an AJAX call using axios, and if any resources are unavailable, I receiv ...

Embed a Style-sheet into an Iframe (Facebook Like Box)

I'm facing the challenge of customizing a Facebook like box with predefined image sizes and borders that don't align with our design. I want to override some styles to make it more suitable for our website. The Likebox is currently embedded via ...

Make sure to include `jquery` in the types section of your tsconfig file

I've encountered an issue while trying to use jQuery in my Angular-TypeScript project. After installing jquery using "npm install @type/jquery", I am receiving the following error when trying to serve: Error TS2592: Cannot find name '$'. Is ...

Having trouble embedding Hangouts button in HTML template using script tags

When I include a Hangouts button on my index page, it is visible and functional as expected: <body ng-app="sampleApp" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-12 m-body"> <div class="m ...

MaxListenersExceededWarning in Node.js Puppeteer: Alert for potential memory leak in EventEmitter

As I was setting up multiple browsers and loading pages simultaneously, I encountered an issue after opening and loading 12 browsers: (node:21888) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [proc ...

What is the best approach for adding a mark within a circle using React or vanilla JavaScript?

Has anyone come across an npm package that allows for marking a dot in a circle? I am looking to click on the mark and output the JSON object. https://i.sstatic.net/u8FTY.png Additionally, is there any option to achieve this with a simple onClick event? ...

Extract all links from an external website

I'm attempting to extract all the URLs from a webpage using jQuery so that I can later use them with $.get(). If these URLs were located on the same page as the script, retrieving them would be easy by doing something like var links = document.getEle ...

How do I transfer data from templates to the main page in AngularJS and display them?

Within my file structure, I have a div with ng-view that loads a specific template. Inside this template, there is a button that, when clicked, is meant to change a value. However, after clicking the button, I am encountering an issue where the value is a ...

Learn how to dynamically assign a new ID and name to a cloned div element using jQuery based on the original element's ID

Within a DIV, there are two Input Textboxes present. I am attempting to duplicate the above div, meaning I want two additional textboxes cloned from the original ones. However, I am encountering challenges when it comes to assigning new IDs and Names to ...

The globalProperties property of app.config is not defined and cannot be read

When attempting to register a global filter in Vue3, an error is being raised: main.js?56d7:13 Uncaught TypeError: Cannot read property 'globalProperties' of undefined Despite referencing the solution provided in Use filter in Vue3 but can't ...

What is preventing me from setting a value to a React hook input?

How do I capture user input and assign it to a React hook? const { specName, setSpecName } = useState(""); <input name="name" onChange={e => { setSpecName(e.target.value) }} value={specName} className="specia ...

Use Jquery to smoothly scroll to the top offset of

I've been successfully utilizing jquery ScrollTo from https://github.com/balupton/jquery-scrollto, but I'm interested in incorporating the "offset top" add-on. Has anyone had experience setting this up? I'm not quite sure how to implement it ...

Shuffle the elements within each container in the DOM

Currently, I am focusing on designing a card-based layout where each card contains details about the product. One important detail is the phone number, which is displayed in the format 555-555-5555. My current goal is to clear the text value of the phone ...

Unable to retrieve Google Maps route on Android device

After discovering the route between two latitude and longitude values on Google Maps using "Get Directions," everything appears accurately. However, when attempting to use the same directions in an Android mobile application, only the destination marker ...

Deactivate a form on the page while another form is being used

My issue involves having two forms on the same web page with identical IDs, and I'm unable to easily change them. Both forms are necessary on the page. When I submit one form, it also submits the other form as blank, resulting in duplicate submission ...