HomeBlogWeb DevelopmentEasier Angular JS Routing With Angular UI Router
Takeaways from this article
Introduction
Angular JS is a popular application framework that is used for front-end development. It works great when creating single page applications. It is written in JavaScript and is being maintained by tech-giant Google. It is used to interpret the HTML attributes in a webpage in the form of directives and bind the respective input and output components of the model, that are represented in the form of JavaScript variables. Angular UI Routing helps navigate between views and pages seamlessly without getting messy, and in a user-friendly manner.
Know more about angular cli.
Note: It is assumed that the reader is aware of technologies like HTML, CSS, JavaScript and Angular JS.
Native Angular Routing doesn’t have the following facilities:
In order to minimize the above disadvantages, Angular UI Router is used.
Angular JS Routing is an advanced technique that helps in routing, that has a declarative approach in navigating through the pages of a website. In a webpage, when a link that points to a different page is created, the URL has to be explicitly defined. This path has to be literally memorized and if it is changed, then the URL would have to be changed in all places where it was previously referenced. This is when Angular JS Routing comes into play.
Angular UI Router is a module in Angular JS that helps in the process of routing in Angular JS applications. The Router facilitates in the creation as well as usage of such routes in applications.
The Router consists of a method called ‘stateProvider’ which helps in the creation of ‘states’, also known as ‘routes’. The method ‘stateProvider’ takes the name of the state and the configurations of the state as its parameters. It looks like below:
$stateProvider.state(stateName, stateConfig)The above function creates a state in the application. The parameter ‘stateName’ is a string value that is used to create a parent or a child state. To create a child state, the parent state is referenced with the help of the dot operator.
The ‘stateConfig’ parameter is an object that can take many properties, such as:
Note: The ‘stateConfig’ parameter can take only one property at a time per state or per view with respect to the application.
The states in an application help the user in navigating or reconstituting to the situation that occurs within the application’s working.
Note: The latest version of UI Router can be downloaded from the GitHub repository.
Below are three examples when ‘stateConfig’ has different properties:
With ‘template’ as a property:
$stateProvider.state(‘stateName’,
{
url: ‘url for the specific state’,
template: ‘html content’,
controller: "name of controller for specific state"
});With ‘templateUrl’ as a property:
$stateProvider.state('stateName',
{
url: ‘url for the specific state’,
templateProvider: ‘function name’,
controller: "name of controller for specific state"
});The views and routes of the Angular JS page will not be bound with just the URL of the site. The specific parts of the site can be changed with the help of UI Routing even if the URL has been kept the same. All the states, routing, and viewing capabilities of the page are handled at a single one-stop place- the ‘.config()’.
URL route is a little different. It is usually implemented using ‘ngroute’, and it needs the implementation of methods such as ‘nginclude’. If the number of methods increases, the situation could get complicated and handling of these methods gets difficult.
npm install http-server –gDemo_App --app.js --index.html --nav.html
It would look like below (sample):
<script src="angular.name.js">
</script>
<script src = "https://unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js">
</script>var app = angular.module('Demo_App', [ "ui.router" ]);
app.config(function($stateProvider, $locationProvider,
$urlRouterProvider)
{
$stateProvider.state('home_page',
{
url : '/home',
template : "<h1>Home page</h1>",
controller : "hmeCtrl"
})
.state('login_page',
{
url : '/login',
template : "<h1>Login page</h1>",
controller : "lgnCtrl"
})
$urlRouterProvider.otherwise("/home");
});
app.controller('mainCtrl', function() {});
app.controller('hmeCtrl', function() {});
app.controller('lgnCtrl', function() {});http-serverlocalhost:8080/Looking to master Python coding? Look no further! Our python coding full course offers a unique and catchy way to learn Python. Join us now and unlock your coding potential!
Conclusion
In this post, we understood the prominence of Angular JS Routing and Router, and how they are different from the traditional approaches. They help bridge a gap between the features that traditional approaches implement, thereby increasing the ability of web pages to work and perform in a better, more user-friendly manner.
Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.
| Name | Date | Fee | Know more |
|---|
