CODEWITHSUNDEEP
javascriptangularjs
shal
shal

Reputation: 3024

AngularJS route won't load the view and reports no errors

Here is the structure:

Here is the structure

Here are the sources:

/* @flow */
"use strict";
(function () {
  const app = angular.module('Lesson2', ['ngRoute', 'ngAnimate'] );
  app.config(function($routeProvider){
    $routeProvider
      .when('/what', { controller:'FavoCtrl', templateURL:'pages/what.html'})
      .when('/where', { controller:'FavoCtrl', templateURL:'pages/where.html'})
      .otherwise({redirectTo:'/what'});
  });
  app.controller('FavoCtrl', function ($scope) {
    $scope.favouriteThings=[
      {what:'raindrops', by:'on', where:'roses'},
      {what:'whiskers', by:'on', where:'mittens'},
      {what:'Brown paper packages', by:'tied up with', where:'strings'},
      {what:'schnitzel', by:'with', where:'noodles'},
      {what:'Wild geese', by:'that fly with', where:'the moon on their wings'},
      {what:'girls', by:'in', where:'white dresses'},
      {what:'Snowflakes', by:'that stay on', where:'my nose and eyelashes'}
    ];
  })

})();
<!DOCTYPE html>
<html ng-app="Lesson2">
<head lang="en">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="scripts/app.js"></script>
    <meta charset="UTF-8">
    <title>Lesson 2</title>
</head>
<body>
Hello!
<ng-view></ng-view>
</body>
</html>

And two "what.html" and "where.html" are plain texts, like This is "where.html"

The hardest thing here is that browser does not throw any error, console is clean. Views are not loaded, all I see is "Hello" of "index.html"

Upvotes: 0

Views: 861

Answers (2)

Tamy
Tamy

Reputation: 203

First you have a typo in your route configuration, it is "templateUrl" and not "templateURL".

If this doesn't solve your problem try adding the controller in your index.html

<html ng-app="Lesson2" ng-controller="FavoCtrl">

Upvotes: 0

OrenD
OrenD

Reputation: 1741

Seems like you have a typo, in your config block, use templateUrl instead of templateURL.

It should look like:

app.config(function($routeProvider){
$routeProvider
  .when('/what', { controller:'FavoCtrl', templateUrl:'pages/what.html'})
  .when('/where', { controller:'FavoCtrl', templateUrl:'pages/where.html'})
  .otherwise({redirectTo:'/what'});
});

Upvotes: 2

Related Questions