Issue with AngularJS ng-view not displaying information

I am currently studying Angularjs through the Tuts+ Easier JavaScript Apps with AngularJS tutorial. I have reached the section on Routing Primer using ng-view and I am attempting to display the list page contents in the ng-view of the index page. However, when I load index.html, nothing is being displayed. After doing some research, I discovered that starting from angular 1.2.0, ngRoute has been moved to its own module which needs to be loaded separately and declared as a dependency. Despite taking these steps, I am still unable to display anything from my list page.

index.html

<!doctype html>
<html ng-app="myApp">
  <head>
  <title>Angular App</title>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <div ng-view></div>
    </div>
  </body>
</html>

list.html

<h3>List</h3>
<ul>
    <li ng-repeat="contact in contacts">
      <a href="#">{{contact.name}}</a>: {{contact.number}}
    </li>
</ul>

app.js

    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        });
    });

    app.controller('Ctrl', function($scope){
        $scope.contacts = [
            { name: 'Shuvro', number: '1234' },
            { name: 'Ashif', number: '4321' },
            { name: 'Anik', number: '2314' }
        ];
    });

Answer №1

Take out the ng-controller attribute from the div like so:

<body>
<div >
  <div ng-view></div>
</div>
</body>

To avoid "miss-routings," make sure to include the otherwise in the main configuration like this: otherwise({ redirectTo: '/'});

app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        }).otherwise({ redirectTo: '/'});
});

Check out the Online Demo here

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

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

Having trouble with an unknown cipher when using the crypto module?

Encountering difficulty encrypting with aes-256 using cipher - getting an error stating unknown cipher. Any insights on what may be missing in the code below? index.js function encryptPaymentId(specialtyID, paymentId) { const convertToStrin ...

Looking to transfer a file to a server with the help of angularJS, NodeJS, and ExpressJS

I attempted to use the instructions provided in this link but encountered an error The version of Node I am using is 4.4.7, and I received a modulerr error regarding ngFileUpload In order to upload files in app.js var multer = require('mul ...

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

angularjs - the mysterious disappearance of $route.parent

Is there a way to achieve similar behavior as shown in this fiddle http://jsfiddle.net/W2C45/6/? I am encountering an error when trying to call $route.parent(this); The error message reads: TypeError: Object # has no method 'parent' I suspect ...

Implementing a watch in an Angular directive's link function

I want to keep track of changes within a directive regarding the 'current_step' variable; This is my directive: function wizardStepsCircle(logger) { var directive = { bindToController: true, controller: WizardSte ...

Introduce a timeout in the ajax request

I'm currently facing an issue with adding a 2-second delay between the loader icon and the success message displaying the data as html. I attempted to use setTimeout in my ajax code with a specified delay number, but it doesn't seem to be workin ...

Transferring information between Express and React through the Contentful API

I have embarked on a journey to explore Contentful's headless CMS, but I am encountering a challenge with their API client. My goal is to combine Express with React for server-side rendering, and I am utilizing this repository as my starting point. S ...

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

I'm currently utilizing Vue.js for implementing two-way binding. One issue I am facing is with an edit button that should convert a text field into an input field upon clicking. However, the DOM does not update immediately as expected. For instance: ...

Using a conditional statement to wrap a react Route

Currently, I am facing a challenge while working with react router. Initially, I had two distinct components being rendered under the same route - one with a parameter and one without (this was how the routes were distinguished). Now, my goal is to add opt ...

How can I change the ng-model value through a click event?

Here is an ng-click event that I have: ng-click="changeSpecializationStatus(specializationMain[$index], $index)" This is the Angular JS code: $scope.changeSpecializationStatus = function (item, index){ $scope.specializationMain[index] = (item == tru ...

Substituting text in a document by utilizing two separate arrays: one holding the original text to be found and another storing the corresponding text for

I am facing a challenge with replacing specific text strings in a file. I have two arrays - one containing the strings that need to be located and replaced, and the other containing the replacement strings. fs.readFile("./fileName.L5X", "utf8", function( ...

The Battle of Brainpower: Smarty vs. JavaScript/AJAX

One question I have is: Is there a specific guideline or convention for determining when to use "Smarty templating" versus using JavaScript Ajax calls to generate content? I have the ability to generate content dynamically using Ajax/JavaScript calls. Whi ...

Learn the steps to access a Collection in Meteor.js and then send it to a function once the DOM has finished

Is there a way to ensure that a query on the collection is executed before running another function when a specific div has been rendered? When attempting the following, an error from .highcharts() is returned indicating that the div #chart cannot be foun ...

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

Creating a unique design with text in a circular format

When styling customer initials within a circle, I sometimes encounter issues with font alignment, as seen in the image below where EW is not centered properly. In this code snippet, I am using border-radius to create circular shapes for displaying custome ...

req.user and Is Authenticated are never true

Working on a project using react in conjunction with express.js (within router/user.js) router.get("/", function (req, res) { console.log("this is u" , req.user) console.log(req.isAuthenticated()); if (req.user) { res.json({ user: req.user }) ...

Implementing a fixed top navigation bar with jQuery to override default CSS properties

My latest project involves creating a WordPress site, and I recently found a way to fix my navbar at the top of the page as users scroll down. Here's the code snippet I used: (function( $ ){ var navOffset = jQuery("nav").offset().top; jQu ...

What is the process for using dojo to load content?

As I work on creating a single-page website with the help of dojo, I refer to tutorials that explain how to utilize dojo/request for ajax requests. The process is straightforward - simply make a request, receive HTML content, and insert it into a designate ...

Having trouble loading JavaScript in my Django and React Project using Vite.js - need some help!

After creating a project with React as the frontend and Django as the backend, I organized them into separate folders: backend and frontends (please disregard the deliberate spelling mistake). To build the React project, I utilized vite.js and then genera ...