UI-Sref en AngularJS

1. ¿Qué es Angular UI-Router y cómo funciona?
2. Diferencia entre Ng-Route y UI-Router (estado) en Angular
3. Navegación de estado a estado de ui-sref en Angular
4. Implementación e Instalación de UI-Router en Angular
5. Crear componentes y enrutador de aplicaciones para comprender el uso de ui-sref en Angular

La directiva ngHref de Angular nos permite vincular parámetros a URL. Podemos unirnos a estados usando ui-sref, que proporciona UI-Router.

No es lo mismo que relacionarse con una URL normal. En última instancia, es un escenario diferente de cómo vincular un estado.

Este artículo profundizará en el tema principal y discutirá cómo usar ui-Sref en Angular usando UI-Router.

¿Qué es Angular UI-Router y cómo funciona?

Angular UI-Router es un módulo que nos ayuda a crear aplicaciones de una sola página. Proporciona una abstracción entre la aplicación y el navegador al administrar todas las rutas en nuestra aplicación.

También ayuda a realizar cambios en nuestra aplicación de una manera más eficiente. Por ejemplo, cuando queremos agregar una nueva ruta, podemos hacerlo con solo una línea de código.

Adopta un enfoque diferente al de ng-Route, ya que modifica las vistas de su aplicación en función del estado de la aplicación en lugar de simplemente la URL de la ruta. Sobre ng-Route, UI-Router es la mejor opción porque tiene dos características clave: vistas anidadas y vistas múltiples.

Esta técnica no vincula páginas y rutas a la URL del navegador como ng-Route. Haga clic aquí para obtener más información sobre ui-router.

Sería útil si tuviera una idea sobre las vistas anidadas y las vistas múltiples.

1. Las vistas anidadas son similares a las relaciones padre-hijo porque contienen una vista dentro de otra. De otra manera, tener una lista de teléfonos inteligentes en un solo lugar.

   Cuando hace clic en un teléfono inteligente, verá sus atributos desde una perspectiva diferente.

2. Las vistas múltiples se definen como tener más de una vista en la misma página. Numerosas secciones suelen estar vinculadas a una página específica en cualquier aplicación; por ejemplo, mostramos varios elementos de una aplicación en la página principal.

   Para tener cada uno de estos componentes, necesitaremos crear una vista separada para cada uno de ellos.

Diferencia entre Ng-Route y UI-Router (estado) en Angular

Todo desarrollador necesita conocer la diferencia fundamental entre ng-route y ui-router.

Ng-Route existe desde hace más tiempo que UI-Router, y los conceptos son más familiares para los desarrolladores que vienen de otros marcos como React.

Ng-Route también proporciona funciones que UI-Router no proporciona, como rutas anidadas y de carga diferida.

UI-Router (state) es una biblioteca utilizada para manejar el enrutamiento de los componentes de la interfaz de usuario. Es una opción popular para los desarrolladores de Angular.

Además, UI-Router (state) tiene una sintaxis más limpia y es más fácil crear vistas anidadas en este marco, pero no proporciona rutas de carga lenta como lo hace Ng-Route.

Navegación de estado a estado de ui-sref en Angular

La directiva ui-sref es la primera opción para navegar de un estado a otro. La propiedad href del elemento ancla HTML probablemente le sea familiar; asimismo, la directiva ui-sref hace referencia a una referencia de estado.

Declarar un nombre de estado con la directiva ui-sref adjunta a un ancla es la forma de usar la directiva. Analicemos un ejemplo para entenderlo de una mejor manera.

<a ui-sref="Contact Form" href="#Contact">Contact Us</a>

Usar un método del objeto $state, disponible para un controlador angular, es la siguiente técnica para navegar entre estados. Por ejemplo.

angular.module('app').controller('PageController',
            ['$scope', '$state',
    function ($scope,   $state) {
        $scope.navigate = function () {
            $state.go('Contact');
        };
    }]);

Implementación e Instalación de UI-Router en Angular

En primer lugar, debe instalar Angular UI-router con la ayuda del administrador de paquetes npm en la terminal de comando.

$ npm install angular --save // AngularJS

$ npm install angular-ui-router --save // angular UI-router

Después de agregar el ui-router, es hora de trabajar en el archivo index.html.

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
  <body ng-app="Example">
      <div ui-view="header"></div>
      <div ui-view=""></div>
      <div ui-view="footer"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
      <script src="app/app.routes.js"></script>
  </body>
</html>

Crear componentes y enrutador de aplicaciones para comprender el uso de ui-sref en Angular

Los componentes son objetos aislados reutilizables que se pueden reutilizar. Es lo mismo que un comando.

La distinción clave es que siempre tiene un alcance limitado en lugar de una directiva donde puede elegir si está aislado o no.

Aquí sólo hemos creado un componente header; no hemos creado ningún otro componente para los componentes home, about us, y contact us porque nuestro objetivo principal es enseñarte el uso de ui-sref.

<nav class="navbar-default">
  <div class="Box">
    <div class="header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
      </button>

    </div>
    <div class="new-class" id="112211">
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
		<li><a ui-sref="about">About us</a></li>
		<li><a ui-sref="contact">contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

Entonces, así es como usamos ui-sref. El ui-sref se usa aquí para enrutar las páginas.

Ahora es el momento de escribir el código final de la aplicación.

var app = angular.module('Example', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {

// create default view
$urlRouterProvider.otherwise("/home");


$stateProvider
// home states and nested view
.state('home', {
	url: "/home",
	template: '<div <p> Home Tab is active!!!</p></div>'
})
// about states and nested view
.state('about', {
	url: "/about",
		template: '<div <p> About Us Tab is active!!!</p></div>'
})
.state('contact', {
	url: "/contact",
		template: '<div <p> Contact Us Tab is active!!!</p></div>'
});
});

Haga clic aquí para ver la demostración en vivo del código.