AngularJS Custom Directives Recall: Angular Directives Original - - PowerPoint PPT Presentation

AngularJS

Custom Directives

Recall: Angular Directives

• Original Definition: a marker on an html tag that tells
• ur HTML when to trigger or run our JavaScript
• HTML attributes with an ng- prefix used by AngularJS

to extend HTML

• E.g., ng-app, ng-model, ng-bind, ng-repeat, ng-init
• Better Definition: HTML annotations that trigger

JavaScript behaviors

ng-include Directive

• The main HTML file can become cluttered and

would need to be de-cluttered.

• Can have multiple pages that need to reuse some

HTML snippet, e.g., product title and price.

• Pull HTML snippet in separate html template file
• Use ng-include to load template code where

needed

<h3 ng-include=”’product-title.html’” novalidate> </h3>

Cross Origin Request (CORS) problem

• CORS error may surface because of protocol

scheme -- file:///

• Create small express server
• Will use http:// protocol scheme and resolve CORS

error

Detour: Dependency manager

• It is helpful to use a package manager that also

manages your dependencies

• Bower and npm are usable options
• Bower --. package manager for front-end packages
• npm -- package manager for node packages
• We will use npm in this course
• access to more packages
• > npm init
• Accept as many or as few of the defaults as you want. I changed the

name, description, and entry point (server.js).

Using npm to manage dependencies

• Use npm to install angular, bootstrap, express, and
• ther packages locally
• Always use the --save flag to add dependencies to

package.json manifest

• > npm install angular@1.4.8 --save
• > npm install bootstrap --save
• > npm install express –save
• Update the paths of the installed modules in main html file
• install nodemon globally like this:
• > npm install nodemon –g
• nodemon is a utility module that watches your server code and restart it

as the code changes

express server

1 // We need an express application to run a webserver 2 var express = require('express'); 3 var path = require('path'); 4 var expressApp = express(); 5 6 expressApp.set("port", process.env.PORT || 3000); 7 8 // Express middleware 9 expressApp 10 .use(express.static('./')) 11 .get('*', function(req, res){ 12 res.sendFile('index.html', {root: path.join(__dirname, './')}); 13 }) 14 .listen(expressApp.get('port'), function(){ 15 console.log('Server is listening on port ' + expressApp.get('port')); 16 });

> nodemon server.js

Back to ng-include

• CORS error should go away
• No change in display, but the way the page is

loaded changes

• When URL for page request is made by the client,

the server sends back the index.html file and the assets for that page

• When that page loads and the ng-include directive

is encountered, another request is issued to the server for that file and the HTML is returned

ng-include

Why write a directive?

• Directives are the secret sauce of AngularJS
• Directives allow you to write HTML that expresses the

behavior of your application

• By looking at the code in your main html file, you

can tell what it does

• Expressiveness is the real power of custom

directives!!

Writing custom directives

• Template-expanding Directives are the simplest:
• define a custom tag or attribute that is expanded or replaced
• can include controller logic, if needed.
• Directives can also be used for:
• Expressing complex UI
• Calling events and registering event handlers
• Reusing common components

How do we build custom directives

1 var app = angular.module('store', []); ... 27 app.directive('productTitle', function(){ 28 // return a configuratin object that defines 29 // how the directive will work. 30 return { 31 restrict: 'E', // Type of directive (E for HTML Element) 32 templateUrl: 'views/product-title.html’ 33 // URL to template to load into the page 34 }; 35 });

Custom Directive usage

• Note that the dash the name of a directive in your

HTML will translate to camelCase in your JavaScript

• Since a directive function returns a configuration
• bject, you can add the configuration that you

need

• Here, we are only defining a template-expanding
• directive. When we use this directive, it will render

the HTML into the page

<product-title></product-title>

Attribute vs Element Directives

• Element Directive: Notice that we are not using self-

closing tags. Some browsers do not like self-closing tags for custom elements.

• Attribute Directive: <h3 product-title></h3> Used as

an attribute of an HTML element.

• Change the restrict property value from ‘E’ to ‘A’
• Best practice: Use Element Directives for UI widgets

and Attribute Directives for mixin behaviors like tooltip.

Custom directives -- way to go

• Custom directives allow you to write better html
• When you think of a dynamic web application, do

you think you'll be able to understand the functionality just by looking at the HTML?

• When you're writing an AngularJS application, you

should be able to understand the behavior and intent from just the HTML

• Using custom directive makes our HTML more

expressive

Exercise

• Move the product specifications content to a

product-specs.html template

• Define a custom attribute directive called

productSpecs to load it

What if our Directive needs a controller?

• First, extract template code from main html file into

a separate template file, e.g., product-panels.html

• create an element directive and move controller

functionality into that directive using the controller attribute

• Use the controllerAs attribute to create an alias for

the controller

• Use the directive in the main html file where the

template code was extracted

Exercise

• Refactor productGallery code using an element

directive with a controller

• Refactor productReviews using an element

directive (no controller)

Resources

• http://www.w3schools.com/angular/angular_directives.asp
• http://www.html5rocks.com/en/tutorials/cors/
• http://www.ng-newsletter.com/posts/directives.html