This is a presentation that was presented at Tech Next meetup group (http://www.meetup.com/TechNext/events/168164922/), to introduce the audience to AngularJs (http://angularjs.org/).
It covers major ideas that AngularJS thrives on - data-binding, directives, services, dependency-injections, form validations, overall application architecture, Angular's view of MVC etc.
The content was prepared with the recent experience I gained which working for a short stint on a project earlier and is as per best of my knowledge.
2. About Me
• Software/UI Developer @ Synerzip Softech
• 5+ years of development experience
o Java stack – Swing, Eclipse, J2EE, Tapestry etc.
o JavaScript stack – Jquery, YUI, XPCOM etc.
• Current interests – NodeJs, AngularJs & Polymer
• Contact:
o murtaza.sh@gmail.com
o LinkedIn: Murtaza Haveliwala
o facebook.com/murtaza.haveliwala
3. Agenda
• Why AngularJs?
• What is AngularJs?
• Getting started
o Anatomy of an Angular app
o MVC
o Data-binding
o Bindings, expressions, filters
o Directives
o Services
o Dependency Injections
• Demo
• Form Validation
• Custom Directives
• Best practices
• Q&A
4. Why AngularJs?
• Attempt to make static HTML dynamic, easier and fun
• Flexible & extensible
• Well organized - highly modular
• Write less code
• Focus on testing – Jasmine, Karma, Protractor etc.
• Versatile - works well with other libraries
5. What is AngularJs?
• Framework
• Free & open source (MIT License)
• Current version – 1.2.16
• Vibrant & growing community – Good documentation, tons of articles & videos
available
o Project home page – angularjs.org
o Guide – docs.angularjs.org/guide
o API reference - docs.angularjs.org/api
• Browser support - IE8+*, Firefox , Chrome & Safari
• Whose using it? YouTube on PS3, Plunker, DoubleClick and many more
(builtwith.angularjs.org)
12. MVC
Model View ControllerTheory:
Plain Object HTML Plain FunctionAngular World:
$scope <... ng-controller=“MyCtrl”> function MyCtrl ($scope)Syntax:
Think of:
13. Data-binding
• View is an instant projection of the model
• Eliminates need of event binding and handling
• Achieved through
o ng-model directive,
o $scope object
o {{ }} bindings,
o $watch method
o etc..
automatic
14. Bindings, Expressions
• Binding – {{ <expression> | filter | orderBy }}
o To be used in Views/HTML.
• Expressions –
o JavaScript *like* code-snippets – {{ 1 + 2 }}, {{ ‘hello World!’ }}
o Evaluated against a ‘$scope’ object – {{ a + b }}, {{ user.name }}, {{ items[index] }}, {{
doSomething() }}
o *Cannot* use conditionals, loops & exceptions
• Filters – Data formatters
o lowercase, currency, date & any custom-filters
• orderBy – Sorts filtered result-set
15. Directives
Used to teach HTML new tricks
ng-app
ng-repeat ng-class
ng-disabled ng-show ng-click
ng-model
ng-checked
ng-controller
ng-dblclick
ng-href
ng-submit
ng-transclude ng-change
Many more!
ng-if
ng-init
ng-form
16. Directives
• Used to
o Create new tags or attributes – tabs, accordions, ng-repeat, ng-app, ng-disabled etc.
o Extend other HTML attributes with more capabilities – required, type, input etc.
o Abstract repetitive markups via ng-include, ng-transclude and ng-view
• Can be expressed as a
o Tag – <my-directive></my-directive>
o Attribute – ng-app, ng-controller, ng-model, ng-disabled
o Class – one of the className in an element’s ‘class’ attribute
o (HTML) Comment – <!-- my-directive -->
• No magic, implemented purely using JS and HTML
18. Services
• Reusable business logic, independent of views
• Can be used by controllers and other services/components
• Defined like this –
• Many flavors – factories , services & providers
o 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();
}
};
});
19. Dependency Injections (DI)
• Creates and wires objects/functions
• Freedom from creating and managing services, internal
dependencies
o No need of doing ‘new’ for components
o No more inter-dependency management
• Handled by ‘Injector’ sub-system
• All services, modules registered via Ids – $scope, $http, greeter
etc.
o Modules assist in registering their own components
o Crucial in writing unit and end-to-end tests
• Angular sub-system != requireJS/ AMD.js
21. Form Validation
• Make use of these validation directives -
o required, type, ng-minlength, ng-maxlength, ng-pattern
o Your own custom directive
• Start by - adding ‘name’ attribute to ‘form’ and ‘form elements’
• Angular attaches these properties to form and form elements
• Accessed as
o Form: <form name>.<property>
o Individual form element: <form name>.<element name>.<property>
• Applies these styling classes –
o .ng-valid, .ng-invalid, .ng-pristine, .ng-dirty
o .ng-invalid-required, .ng-valid-max-length, etc.
• Use ‘novalidate’ attribute to stop HTML5 auto validation
23. Best Practices
• In HTML templates/views,
o Use Directives for abstracting common markups, extensions
o Do not use complex expressions in bindings. Move them to Controllers
o Optimize use of bindings. Lesser, the faster your application gets
• In Controllers,
o Keep them light. Use Services to offload functionality
o No DOM manipulations! Delegate them to directives
• In Directives,
o Prefer using directives as tag names or attributes over classes and comments
o Do not use ‘ng-’ prefix for your directives
o Create isolate scopes to avoid accidental overrides of properties
o Notify Angular about direct changes on DOM, via $scope.$apply
• Create modules to group controllers, services, directives etc.
• Test (unit & E2E) each component – Services, Controllers, Directives etc.
24. Best Practices..
• Use $inject pattern for defining components.
o Avoids breakages when minifying
• Do not create $ and $$ prefixed APIs
o Could lead to collisions
• Prefer ‘data-’ prefix when using directives
26. References
• Articles
o AngularJS official guide
o Use AngularJS to power your application
o Why does AngularJS rock?
o Rapid prototyping with AngularJs
o AngularJs Form Validation
• Videos
o Official YouTube channel
o AngularJs Fundamentals in 60-ish minutes
o Writing Directives
o Introduction to AngularJs Unit Testing
o End to End testing of AngularJs apps with Protractor