El enrutamiento nos permite crear aplicaciones de una sola página. Para hacer esto, usamos las directivas ng-view y ng-template, y los servicios $routeProvider.
Usamos $routeProvider para configurar las rutas.
El config() toma una función que toma $routeProvider como parámetro y la configuración de enrutamiento va dentro de la función.
$routeProvider es una API simple que acepta el método when() o de lo contrario().
Necesitamos instalar el módulo ngRoute.
html
<html>
<head>
<title>GFG</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>
<div ng-app = "mainApp">
<p><a href = "#addStudent">
Add Student</a></p>
<p><a href = "#viewStudents">
Display Student</a></p>
<div ng-view></div>
<script type = "text/ng-template"
id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template"
id = "viewStudents.htm">
<h2> Display Student </h2>
{{message}}
</script>
</div>
<script>
var mainApp =
angular.module("mainApp", ['ngRoute']);
mainApp.config(
['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller(
'AddStudentController', function($scope) {
$scope.message = "Add The Students";
});
mainApp.controller(
'ViewStudentsController', function($scope) {
$scope.message = "Display all the students";
});
</script>
</body>
</html>
producción
Explicación:
- $routeProvider es una función bajo configuración (módulo mainApp) que usa la clave como ‘$routeProvider’.
- $routeProvider.when define la URL “/addStudent”.
- La vista predeterminada está configurada por «de lo contrario».
- «controlador» se utiliza para la vista.
¿Cómo configurar el $routeprovider?
El $routeProvider crea el servicio $route.
Al configurar $routeProvider antes que el servicio de $route, podemos establecer rutas en plantillas HTML que se mostrarán.
El $routeProvider se configura con la ayuda de llamadas a las funciones when() y else().
La función when() toma la ruta de la ruta y un objeto JavaScript como parámetros.
de lo contrario ( ) toma un objeto JavaScript como parámetro.
Sintaxis para configurar las rutas en AngularJS:
var app = angular.module("appName", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/1stview', {
templateUrl: '1stview.html',
controller: 'Controller1'
})
.when('/view2', {
templateUrl: '2ndview.html',
controller: 'Controller2'
})
.otherwise({
redirectTo: '/1stview'
});
});
La ruta es la URL después del símbolo hash (#).
La ruta contiene dos propiedades :
- URL de plantilla
- controlador
El $routeProvider se puede usar para definir la página cuando el usuario hace clic en el enlace.
html
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js">
</script>
<body ng-app="myApp">
<p><a href="#/!"> GFG</a></p>
<p>Click on the links below.</p>
<a href="#!C">Code 1</a>
<a href="#!C++">Code 2</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.htm",
})
.when("/C", {
templateUrl: "C.htm",
})
.when("/C++", {
templateUrl: "C++.htm",
});
});
</script>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA