Angular.JS routing issues

Question

I'm a beginner to Angular JS. I am working through the tutorial listed here: "https://tests4geeks.com/tutorials/single-page-application-using-angularjs-tutorial/". I cannot route the pages that are from a separate template file. The author of the tutorial states that "Browsers don’t support loading resources from disk using ajax".So, I uploaded the files to my VPS. But I still can't make routing. I have successfully hosted many web pages with that well configured VPS.

angular_test.html

<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  </head>

  <body>
    <a href="#/">Home</a>
    <a href="#/blog">Blog</a>
    <a href="#/about">About</a>

    <h1>{{message}}</h1>
     <div ng-view></div>

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

app.js

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

app.controller('HomeController', function($scope) {
  $scope.message = 'This is home controller';
});
app.controller('BlogController', function($scope) {
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope) {
  $scope.message = 'Hello from AboutController';
});
app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'home.html',
    controller  : 'HomeController'
  })

  .when('/blog', {
    templateUrl : 'blog.html',
    controller  : 'BlogController'
  })

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

  .otherwise({redirectTo: '/'});
});

home.html

<h1>Home</h1>

<h3>{{message}}</h3>

blog.html

<h1>Blog</h1>

<h3>{{message}}</h3>

about.html

<h1>About</h1>

<h3>{{message}}</h3>

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

I got it.This is because my chrome browser can't download my resource files.I just made the following steps.(Failed to load resource under Chrome) 1.Right-click chrome 2.Go to 'inspect element' 3.Look for the 'network' tab somewhere at the top. Click it. 4.Check the 'disable cache' checkbox. It solves my problems but I don't know why.

edited May 23 '17 at 11:44

Community

1
1

answered May 23 '16 at 15:52

Min Htet Oo

188
4
16

score 0 · Answer 2 · answered May 23 '16 at 14:42

0

it looks like your example is working for me (running http-server https://www.npmjs.com/package/http-server)

Have you made sure that your directory structure is correct

- index.html (angular_test.html)
- app.js
- pages/
  |-- home.html
  |-- blog.html
  |-- about.html

answered May 23 '16 at 14:42

Ant Kennedy

1,230
7
13

I had errors with my directory and I have edited my code.But it still doesn't work.You can check it here " http://128.199.161.212/gym/Angular/angular_test.html ". – Min Htet Oo May 23 '16 at 15:12

score 0 · Answer 3 · answered May 23 '16 at 14:48

Try This

<!DOCTYPE html>

<html>
<head>
    <script src="~/angular-1.5.3/angular-1.5.3/angular.min.js"></script>
    <script src="~/angular-1.5.3/angular-1.5.3/angular-route.min.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
</head>
<body ng-app="myApp">
    <a href="#/contact">contact</a>
    <a href="#/about">about</a>
    <div ng-view></div>
</body>
</html>
<script>
    angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
        $routeProvider.when('/home', {
            controller: 'homeCtrl',
            templateUrl: '/Html/home.html'
        });
        $routeProvider.when('/contact', {
            controller: 'contactCtrl',
            templateUrl: '/Html/contact.html'
        });
        $routeProvider.when('/about', {
            controller: 'aboutCtrl',
            templateUrl: '/Html/about.html'
        });

        $routeProvider.otherwise({ redirectTo: "/home" });
    }).controller('homeCtrl', function ($scope) {
        $scope.PageName = "Home Page "
    }).controller('contactCtrl', function ($scope) {
        $scope.PageName = "Contact Page "
    }).controller('aboutCtrl', function ($scope) {
        $scope.PageName = "About Page "
    })
</script>

Angular.JS routing issues

3 Answers3