HTML enhanced for web apps!

Agenda – Day 2

Exercise discussion / QA

Services and Factories

Dependency Injection (DI)

Demo - SPA Routing via ‘ngRoute’

Form Validation

Services Reusable business logic, independent of views

Can be used by controllers and other services/components

Defined like this –

Many flavors – factories , services & providers

Mainly differ in their creational pattern

angular.module('myModule', []).

factory('greeter', function(someDependency) {

// do some initialization here, any internal methods,

// if required

return {

myMethod: function(text) {

return text.toUpperCase();

}

};

});

Dependency Injections (DI)

Creates and wires objects/functions

Freedom from creating and managing services, internal dependencies

No need of doing ‘new’ for components

No more inter-dependency management

Handled by ‘Injector’ sub-system

All services, modules registered via Ids – $scope, $http, greeter etc.

Modules assist in registering their own components

Crucial in writing unit and end-to-end tests

Injector sub-system != requireJS/ AMD.js

SPA Routing

Support provided in ‘ngRoute’ module

Download reference - https://docs.angularjs.org/api/ngRoute

Create route maps –

Use ‘location’ service to manually move from one view to another $location.path('/login');

myApp.config(function($routeProvider) {

$routeProvider.when('/login', {

templateUrl: 'partials/Login.html',

controller: 'LoginController'

}).when('/welcome', {

templateUrl: 'partials/Todo.html',

controller: 'ToDoController'

}).otherwise({

redirectTo: '/login'

});

});

Demo• Routing via ngRoute

• Services

• Hands-on: Controllers & Services

• with broadcast and emit events

Form Validation Start by - adding ‘name’ attribute to ‘form’ and ‘form elements’

Make use of these validation directives -

required, type, ng-minlength, ng-maxlength, ng-pattern

Your own custom directive

Angular attaches these properties to form and form elements

Accessed as

Form: <form name>.<property>

Individual form element: <form name>.<element name>.<property>

Applies these styling classes –

.ng-valid, .ng-invalid, .ng-pristine, .ng-dirty

.ng-invalid-required, .ng-valid-max-length, etc.

Use ‘novalidate’ attribute to stop HTML5 auto validation

DemoForm validation

Questions.. ?

Thank you!End of Day 2.