Dependency Injection and AngularJS Routes

Categories: Angular Angular JS

Dependency Injection and AngularJS Routes 

 

Dependency injection (DI) is a design pattern where dependencies are defined in an application as part of the configuration. Dependency injection helps you avoid having to manually create application dependencies. AngularJS uses dependency injection to load module dependencies when an application first starts. The app.js code in the previous section shows how AngularJS dependencies are defined.

As you can see, two dependencies are defined as needed by the helloWorldApp application at startup. The dependencies are defined in an array in the module definition. The first dependency is the AngularJS ngRoute module, which provides routing to the application.

The second dependency is our controller module, helloWorldControllers. We will cover controllers in depth later, but for now just understand that controllers are needed by our applications at startup time.

Dependency injection is not a new concept. It was introduced over 10 years ago and has been used consistently in various application frameworks; DI was at the core of the popular Spring framework written in Java. One of its main advantages is that it reduces the need for boilerplate code, writing of which would normally be a time-consuming process for a development team.

Dependency injection also helps to make an application more testable. That is one of the main advantages of using AngularJS to build JavaScript applications. AngularJS applications are much easier to test than applications written with most JavaScript frameworks. In fact, there is a test framework that has been specifically written to make testing AngularJS applications easy.

 

AngularJS Routes 

AngularJS routes are defined through the $routeProvider API. Routes are dependent on the ngRoute module, and that’s why it is a requirement when the application starts. The following code from app.js shows how we define routes in an AngularJS application. Two

routes are defined — the first is / and the second is /show:

 

/* chapter1/app.js excerpt */

helloWorldApp.config(['$routeProvider', '$locationProvider',

function($routeProvider, $locationProvider){

$routeProvider.

when('/', {

templateUrl: 'partials/main.html',

controller: 'MainCtrl' }).

when('/show', {

templateUrl: 'partials/show.html',

controller: 'ShowCtrl'

});

 

The two defined routes map directly to URLs defined in the application. If a user clicks on a link in the application specified as www.someDomainName/show, the /show route will be followed and the content associated with that URL will be displayed. If the user clicks on a link specified as www.someDomainName/, the / route will be followed and that content will be displayed.

Top Blogs
Angular and Node JS difference Published at:- The top 5 new features of Angular did you know Published at:- Introduction to AngularJS Published at:- Single-Page Applications and Bootstrapping the Application in Angular JS Published at:- Dependency Injection and AngularJS Routes Published at:- AngularJS Templates, Views, Models, Controllers Published at:- Integrating AngularJS with Other Frameworks Published at:- Testing AngularJS Applications in the IDE Published at:- End-to-End Testing with Protractor Published at:- AngularJS Views and Bootstrap Published at:- Adding a New Blog Controller Published at:- Adding a New Blog Template In Angular JS Published at:- Ways to Communicate with REST Services Published at:- Services and Business Logic and Handling User Authentication in Angular JS Published at:- Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS Published at:- AngularJS Security : why we are covering security in a book on AngularJS Published at:- MEAN Cloud and Mobile, Local Deployment and Installing Node.js, npm, and MongoDB in Angular Published at:- Angular 4 Questions - Angular 4 Quiz (MCQ) Published at:- AngularJS MCQ Quiz Questions with Answer Part 2 Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- AngularJS MCQ Quiz Questions with Answer Published at:-
R4Rin Team
The content on R4Rin.com website is created by expert teams.