<div ng-app="mainApp">
<script type = "text/ng-template" id = "add-student.php">
<h2> Add Student </h2>
{{message}}
</script>
</div>
$routeProvider is defined as a function under config of mainApp module using key as '$routeProvider'.
$routeProvider.when defines a url "/addStudent" which then is mapped to "add-student.php". add-student.php should be present in the same path as main html or php page. If php page is not defined then ng-template to be used with id="add-student.php". We've used ng-template.
"otherwise" is used to set the default view.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'add-student.php', controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'view-students.php', controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
<h2>Sample Application</h2>
<div ng-app = "mainApp">
<p><a href = "#add-student">Add Student</a></p>
<p><a href = "#view-students">View Students</a></p>
<div ng-view></div>
<script type = "text/ng-template" id = "add-student.php">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "view-students.php">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/add-student', {
templateUrl: 'add-student.php',
controller: 'AddStudentController'
}).
when('/view-students', {
templateUrl: 'view-students.php',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/add-student'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "First Add student details form.";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "Display all the student details.";
});
</script>
</body>
</html>