Dependency Injection

We can inject a dependency into a controller by simply receiving it.

angular.module('demoModule', [])
.controller('demoController', function($log) {


We can include a module into another module by placing it's name between the square braces:

angular.module('app', ['demoModule']);

Exercise - NgDialog

We are going to inject the ngDialog service into a controller. This will allow our controller to create popup dialog boxes.

First go here and grab the ng-dialog.js. Link it in the header of your document in the usual way with a script tag.

Now download the CSS files: ng-dialog.css and ng-dialog-theme-plain.css. Link them using link tags.

Include it in your app.

We need to include ngDialog as a dependency of the app, like this:

angular.module('app', ['ngDialog'])

Inject into your controller.

Create a little controller and use the ng-controller directive to hook it to the DOM.

<div ng-controller="myController">

Inject the ngDialog service into your controller.

.controller('myController', function($scope, ngDialog) {

You now have access to Call this according to the documentation to create a dialog box when the page loads:

template: '<p>my template</p>',
className: 'ngdialog-theme-plain',
plain: true

Exercise - Extension

Create a form. Create a method on scope that opens the dialog. Call the method when the button is pressed.

Have a go at the minification safe DI syntax.

Further extension

If you finish first, have a read through the DI documentation here:

comments powered by Disqus