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