El enrutamiento en AngularJS se usa cuando el usuario quiere navegar a diferentes páginas en una aplicación pero aún quiere que sea una aplicación de una sola página. Las rutas de AngularJS permiten al usuario crear diferentes URL para diferentes contenidos en una aplicación. El módulo ngRoute ayuda a acceder a diferentes páginas de una aplicación sin recargar toda la aplicación.
Importante:
- $routeProvider se usa para configurar las rutas. Ayuda a definir qué página mostrar cuando un usuario hace clic en un enlace. Acepta el método when() o de lo contrario().
- El ngRoute debe agregarse como una dependencia en el módulo de la aplicación:
//const app = angular.module("myApp", ["ngRoute"]);
Ejemplo-1: Solo se utiliza el método «Cuando»
<!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="#/!">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"
alt="GeeksForGeeks" style="width: 90vw;"></a></p>
<a href="#!courses">Courses@geeksforgeeks</a>
<br>
<a href="#!internships">Internships@geeksforgeeks</a>
<div ng-view></div>
<script>
const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : `<h1>Welcome to GeeksForGeeks</h1>
<p>
Click on the links to change this content
</p>`
})
.when("/courses", {
template : `<h1>Courses Offered</h1>
<p>
<ul>
<li>Machine Learning Foundation</li>
<li>Geeks Classes</li>
<li>System Design</li>
</ul>
</p>`
})
.when("/internships", {
template : `<h1>Hire With Us</h1>
<p>
<ul>
<li>Software Developer</li>
<li>Technical Content Writer</li>
<li>Technical Content Engineer</li>
</ul>
</p>`
});
});
</script>
</body>
</html>
Salida:
antes de hacer clic
Después de hacer clic en Courses@GeeksForGeeks
Después de hacer clic en Internships@GeeksForGeeks
Ejemplo-2: el método «De lo contrario» también se usa junto con «cuando»
<!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="#/!"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"
alt="GeeksForGeeks" style="width: 90vw;"></a></p>
<a href="#!courses">Courses@geeksforgeeks</a>
<br>
<a href="#!internships">Internships@geeksforgeeks</a>
<div ng-view></div>
<script>
const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/courses", {
template : `<h1>Courses Offered</h1>
<p>
<ul>
<li>Machine Learning Foundation</li>
<li>Geeks Classes</li>
<li>System Design</li>
</ul>
</p>`
})
.when("/internships", {
template : `<h1>Hire With Us</h1>
<p>
<ul>
<li>Software Developer</li>
<li>Technical Content Writer</li>
<li>Technical Content Engineer</li>
</ul>
</p>`
})
.otherwise({
template : `<h1>Please Select Something!</h1>
<p>
Nothing has been selected yet
</p>`
});
});
</script>
</body>
</html>
Salida:
antes de hacer clic
Después de hacer clic en Courses@GeeksForGeeks
Después de hacer clic en Internships@GeeksForGeeks
Publicación traducida automáticamente
Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA