CODEWITHSUNDEEP
javascriptangularjs
ali ibrahim
ali ibrahim

Reputation: 95

How to rout by angular js

I'm newbie in angular js I need to rout by the following code but it get HTTP Status 404 error

web console show this message

localhost:8080/testasd/addStudent Failed to load resource: the server responded with a status of 404 (Not Found) 

   var mainApp = angular.module("mainApp", ['ngRoute']);

  mainApp.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/addStudent', {
              templateUrl: 'AddStudent.html',
              controller: 'AddStudentController'
           }).
           when('/viewStudents', {
              templateUrl: 'ViewStudents.html',
              controller: 'ViewStudentsController'
           }).
           otherwise({
              redirectTo: '/addStudent'
           });
     }]);

     mainApp.controller('AddStudentController', function($scope) {
        $scope.message = "This page will be used to display add student form";
     });

     mainApp.controller('ViewStudentsController', function($scope) {
        $scope.message = "This page will be used to display all the students";
     });

Upvotes: 0

Views: 91

Answers (1)

Reactgular
Reactgular

Reputation: 54761

You need to configure your web server to send index.html for all URLs requested. This is called a rewrite rule. This is because the web browser will issue a GET request for that URL, and the web server expects to find a file in that location. A rewrite rule lets you intercept that request and redirect it to a different file.

The URL in your route doesn't exist on the web server, but AngularJS needs to be loaded. So send the index.html from the web root for all requests. This assumes you are creating what is called a single page app.

For Apache create a file called .htaccess in your web root

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.html [QSA,L]
 </IfModule>

For IIS create a file called web.config in your web root

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <clear />
            <rule name="angular" patternSyntax="Wildcard">
                <match url="*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="index.html" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

Upvotes: 0

Related Questions