How to Write Modular Code with Angular UI-Router & Named Views
One of the most important concepts in web development is writing clean, modular code. This is especially relevant when working as part of a team on highly complex applications. The Angular framework was built to create high-level applications, which can become very complex very fast, which in turn makes writing modular code all the more vital. One of the tools that can aid you greatly in this quest is the Angular UI Router, which was built to help manage different states of your web app. In contrast to the native AngularJS routing implementation, it gives you complete control over each of its views.
If you have used ui-router before, you may be aware of how the dot-notation is used to define child states inside of a parent state. You may not, however, be aware of how the ui-router library deals with named views nested inside of a parent state. And this is what I am going to explain today.
I am going to show you how ui-router uses absolute names to give you complete control over where specific pieces of a web app are displayed. This allows you to easily add and remove different pieces of the interface in order to make a modular application, built up of different components. Specifically, I am going to show you how to map a navigation bar, some body content, and a footer, to a specific state. As ever, the code for this tutorial can be found on GitHub and you can also find a demo at the end of the article.
Getting Started
Take a minute to navigate through the files that make up this demo (available at the GitHub link above). You can see we have an index.html file where we include AngularJS, as well as the library for the ui-router. In this file we also have two ui-view directives into which we will insert our content. Next we have an app.js file, which will contain the code for our Angular app, and a templates directory. This directory will be used to house all of our different views. Although this folder is not necessary, it is definitely in your best interest to use some sort of structure when building applications with Angular. As you can see, I have included an assets folder inside of the templates folder. This is where I like to keep my reusable components: headers, navbars, footers, etc. I figured you may find this convention helpful as it keeps your code extremely modular.
UI-Router
[author_more]
Add a Dependency to ui-router
Let’s begin configuring our application. Inside of our app.js file, we need to add a dependency on the ui-router to our main angular module.
angular.module('app', ['ui.router'])
Configuring Our Routes
Once that is done, we can move on to our application’s config object. Here, we will be dealing with $stateProvider and $urlRouterProvider, so we need to inject them into our config object in order to have them available.
Next we want to pass the URL of our home state into $urlRouterProvider.otherwise(), so it maps our application to this state by default. We will then need to use $stateProvider, which is what we will be dealing with for the rest of the tutorial. $stateProvider is what ui-router gives developers to use when routing applications. A state corresponds to a “place” in the application in terms of the overall UI and navigation. A state describes what the UI looks like and what it does at that place. It works in the same way that ngRoute uses routeProvider.
Below is a how the app.js file should look at this moment. Once we have configured the urlRouterProvider, we utilize $stateProvider to define the different states of the application. In this instance, we are defining a state named home, and only the URL is configured.
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/'
});
}
]);Continue reading %How to Write Modular Code with Angular UI-Router & Named Views%
LEAVE A REPLY
You must be logged in to post a comment.