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>

Community · Accepted Answer · 2017-05-23 11:44:06Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered May 23, 2016 at 15:52

Min Htet Oo

1884 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ant Kennedy · Accepted Answer · 2016-05-23 14:42:54Z

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, 2016 at 14:42

Ant Kennedy

1,2407 silver badges13 bronze badges

1 Comment

Min Htet Oo Over a year ago

I had errors with my directory and I have edited my code.But it still doesn't work.You can check it here " 128.199.161.212/gym/Angular/angular_test.html ".

vipin Bhandari · Accepted Answer · 2016-05-23 14:48:17Z

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>

Collectives™ on Stack Overflow

Angular.JS routing issues

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related