Introduction about AngularJs Routes:-
The Routes are
a ways to create the different URLs for the different content in our web
applications. It’s also providing a ways to view the multiple views in the
single HTML page.
The routes are specified in the URLs after “#” sign and the specified URL example as given below.
The routes are specified in the URLs after “#” sign and the specified URL example as given below.
In above URLs, when links are
load in the brewers that means the applications are loaded.
The below image show the
working process of angular application
<!DOCTYPE html> <html lang="en"> <head> <title>AngularJs Routes</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script> <script> var app = angular.module("routesApp", ['ngRoute']); app.controller("routesController", function ($scope) { //TODO }); app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/routeURL1', { templateUrl: 'templateURL1', controller: 'routesController' }). when('/routeURL2', { templateUrl: 'templateURL2', controller: 'routesController' }). when('/routeURL3', { templateUrl: 'templateURL3', controller: 'routesController' }). otherwise({ redirectTo: '/login' }); } ]); </script> </head> <body ng-app="routesApp"> <div ng-view></div> <div> <ul> <li> <a href="#/routeURL1">Route Text1</a> </li> <li> <a href="#/routeURL2">Route Text2</a> </li> <li> <a href="#/routeURL3">Route Text3</a> </li> </ul> </div> </body> </html>
The output as given
Blogger Comment
Facebook Comment