javascript - 404 Not Found in AngularJS

I just started AngularJS. When I try to implemt following example, I am getting

404 Not Found

This is my main.html

<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
    <title>main page</title>
</head>
<body>

<div ng-view></div>

<script>
var demo = angular.module('demoApp',[]);

demo.config(function ($routeProvider){
    $routeProvider
        .when ('foo',{
            controller : 'SimpleController',
            templateUrl: 'first.html'
        })      
    });

demo.controller('SimpleController',function($scope){
    $scope.customers = [
        {name: 'sac',city:'abcd'},
        {name: 'mac',city:'efgh'},
        {name: 'nalaka',city:'ijkl'}
    ];
});
</script>

</body>
</html>

My first.html

<ul>
    <li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>

When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.

Thanks in advance

I just started AngularJS. When I try to implemt following example, I am getting

404 Not Found

This is my main.html

<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
    <title>main page</title>
</head>
<body>

<div ng-view></div>

<script>
var demo = angular.module('demoApp',[]);

demo.config(function ($routeProvider){
    $routeProvider
        .when ('foo',{
            controller : 'SimpleController',
            templateUrl: 'first.html'
        })      
    });

demo.controller('SimpleController',function($scope){
    $scope.customers = [
        {name: 'sac',city:'abcd'},
        {name: 'mac',city:'efgh'},
        {name: 'nalaka',city:'ijkl'}
    ];
});
</script>

</body>
</html>

My first.html

<ul>
    <li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>

When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.

Thanks in advance

Share edited Feb 19, 2017 at 18:27 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked Feb 18, 2017 at 19:23 Sachith Muhandiram 2,96811 gold badges52 silver badges112 bronze badges

1 404 for which resource? Is the server running in port 80 or some other port? – sabithpocker Commented Feb 19, 2017 at 8:41
The requested URL /foo was not found on this server. port 80 – Sachith Muhandiram Commented Feb 19, 2017 at 10:14

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

You should refer angular-route.min.js file on page & then include ngRoute module in your application.

var demo = angular.module('demoApp',['ngRoute']);

You should correct your .when condition to below

.when('/foo',

As you did't enabled html5mode in your routing, you could access the page via localhost/#/foo URL.

var demo = angular.module('demoApp', ['ngRoute']);

demo.config(function($routeProvider) {
  $routeProvider
    .when('/foo', {
      controller: 'SimpleController',
      templateUrl: 'first.html'
    })
    // By default it will open foo
    .otherwise({redirectTo: '/foo'})
});

demo.controller('SimpleController', function($scope) {
  $scope.customers = [{
      name: 'sac',
      city: 'abcd'
    },
    {
      name: 'mac',
      city: 'efgh'
    },
    {
      name: 'nalaka',
      city: 'ijkl'
    }
  ];
});

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
  <div ng-view></div>
  <script type="text/ng-template" id="first.html">
    Content of the template.
  </script>

</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - 404 Not Found in AngularJS - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)