UI-Sref in AngularJS
- What Is Angular
UI-Routerand How It Works - Difference Between
Ng-RouteandUI-Router (state)in Angular - State-To-State Navigation of
ui-srefin Angular - Implementation and Installation of
UI-Routerin Angular - Create Components and App Router to Understand the Use of
ui-srefin Angular
Angular’s ngHref directive allows us to link parameters to URLs. We can bind to states using ui-sref, which UI-Router provides.
It is not the same as relating to a regular URL. It is ultimately a different scenario of how to link a state.
This article will deep dive into the main topic and discuss how to use ui-Sref in Angular using UI-Router.
What Is Angular UI-Router and How It Works
Angular UI-Router is a module that helps us create single-page applications. It provides an abstraction between the application and the browser by managing all of the routes in our application.
It also helps make changes to our application in a more efficient way. For example, when we want to add a new route, we can do so with just one line of code.
It takes a different approach than ng-Route in that it modifies your app’s views based on the application’s state rather than merely the route URL. Over ng-Route, UI-Router is the greatest option because it has two key features: nested views and multiple views.
This technique does not bind pages and routes to the browser URL like ng-Route. Click here to learn more about ui-router.
It would help if you had an idea about the Nested views and Multiple views.
-
Nested views are similar to parent-child relationships because they contain one view inside another. In another way, having a list of smartphones all in one place.
When you click on a smartphone, you’ll see its attributes from a different perspective.
-
Multiple views are defined as having more than one view on the same page. Numerous sections are typically tied to a specific page in any application; for example, we display multiple items from an application on the main page.
To have each of these components, we’ll need to create a separate view for each of them.
Difference Between Ng-Route and UI-Router (state) in Angular
Every developer needs to know the fundamental difference between ng-route and ui-router.
Ng-Route has been around for longer than UI-Router, and the concepts are more familiar to developers who are coming from other frameworks like React.
Ng-Route also provides features that UI-Router doesn’t provide, such as nested and lazy loading routes.
UI-Router (state) is a library used to handle the routing of UI components. It’s a popular choice for Angular developers.
Moreover, UI-Router (state) has cleaner syntax, and it’s easier to create nested views in this framework, but it doesn’t provide lazy loading routes like Ng-Route does.
State-To-State Navigation of ui-sref in Angular
The ui-sref directive is the first option to navigate from one state to another. The href property of the HTML anchor element is likely acquainted with you; likewise, the ui-sref directive refers to a state reference.
Declaring a state name with the ui-sref directive attached to an anchor is how you use the directive. Let’s discuss an example to understand it in a better way.
<a ui-sref="Contact Form" href="#Contact">Contact Us</a> Using a method from the $state object, available to an Angular controller, is the next technique for navigating between states. For example.
angular.module('app').controller('PageController', ['$scope', '$state', function ($scope, $state) { $scope.navigate = function () { $state.go('Contact'); }; }]); Implementation and Installation of UI-Router in Angular
Firstly, you need to install the Angular UI-router with the help of the package manager npm in the command terminal.
$ npm install angular --save // AngularJS $ npm install angular-ui-router --save // angular UI-router After adding the ui-router, it’s time to work on the index.html file.
<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> Create Components and App Router to Understand the Use of ui-sref in Angular
Components are reusable isolated objects that can be reused. It’s the same as a command.
The key distinction is that it is always confined scope instead of a directive where you can choose whether or not it is isolated.
Here we only created a header component; we have not created any other component for home, about us, and contact us components because our main focus is to teach you the usage of 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> So, this is how we used ui-sref. The ui-sref is used here to route the pages.
It’s now time to write the app’s final code.
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>' }); }); Click here to check the live demonstration of the code.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook