Trouble service $route with Angular 1.6 | cannot get templates to render

Question

I mainly use PyCharm IDE. For this example, I am running pythom -m http.server. Either way, I have no luck.

update: It seems that using <a href="#!/about">About</a> it works. I do not see this in tutorials though, why is this?

Questions:

Why is ng-view showing nothing?
Why does the browser url with about show
/#!#about or /#!#%2Fabout
or with stats show
/#!#stats or /#!#%2Fstats
Even with manual url input of #/about I still get /#!#%2Fabout. Why?

The browser rendered:
aboutController
statsController <-- this is the correct text for $scope.name for both controllers.

I have tried:
for html
<a href="#/about">About</a> and <a href="#about">About</a>
<a href="#/info">Info</a> and <a href="#info">Info</a>

Project tree:

├── angular.js
├── angular-route.js
├── index.html
├── myAngular.js
├── package.json
└── pages
    ├── about.html
    └── stats.html

My pages/ about.html and stats.html
<p>About stuff...</p>
<p>Some stats...</p>

My angular code:

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

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })
        .when('/stats', {
            templateUrl: 'pages/stats.html',
            controller: 'statsController'
        })
})

myApp.controller('aboutController', function($scope) {
    $scope.name = "aboutController"
});

myApp.controller('statsController', function($scope) {
    $scope.name = "statsController";
});

The network tab:
Shows 200 OK status for angular.js, angular-route.js, and myAngular.js

The response:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Route Test</title>

  <script src="angular.js"></script>
  <script src="angular-route.js"></script>

</head>
<body>

<a href="#about">About</a>
<a href="#stats">Stats</a>

<!-- Why is this not showing anything??? -->
<div ng-view>{{ name }}</div>

<hr>
<!--  Just to see if controllers working -->
<div ng-controller="aboutController">{{ name }}</div>
<div ng-controller="statsController">{{ name }}</div>

<script src="myAngular.js"></script>
</body>
</html>

Trouble service $route with Angular 1.6 | cannot get templates to render

0 Answers0