AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS

  • Published on

  • View

  • Download

Embed Size (px)


AngularJs Training

HTML enhanced for web apps!AgendaAngularJS: IntroductionIntroduction to Single-Page-AppsUnderstand what AngularJS is and why it's importantInstalling AngularJSWrite your first AngularJS applicationUnderstand Data-binding, Directives, Filters, Controller & ViewRun AngularJS application using HTTP serverIntroductionA 100% client-side and 100% JavaScript FrameworkFree and open source (MIT License)Built with modern development principles in mindFlexibleModularityVersatilityTestabilityRe-use, Less CodeSPAQuick prototypingExtensible

IntroductionCurrent Version - 1.2.27Work in progress - 2.0 (to be mobile-first)Has a port available in Dart (AngularDart)Vibrant and growing communityProject homepage angularjs.orgGuide reference - support Firefox, Chrome, Safar, IE8+*

What is AngularJS?AngularJS - MVWhatever Design Model View Controller

*Image courtesy: - MVWhatever Design Supports MVC pattern

*Image courtesy: - MVWhatever Design Supports MVVM pattern

*Image courtesy:

AngularJS - MVWhatever Design Supports MVP pattern

*Image courtesy:

AngularJS - MVWhatever Design Supports MVC, MVP, MVVM patterns

*Image courtesy:

Traditional Apps Multi-Page AppsFull page reloaded on hopping between pages Server communication includes all resources in a pageURLs look like, Linkedin, NYTimes, hrms

*Image courtesy:

Modern Apps Single Page AppsOptimized - pages do NOT reload completelyServer communication reduces to just data jsons or partial markupsURLs look like,!searchExamples Gmail, Twitter, Facebook etc.

*Image courtesy:

AngularJSFull-featured SPA frameworkTemplatingRoutingDeep LinkingHistoryAngularJS FeaturesData-bindingDirectivesDependency InjectionForm ValidationServer CommunicationLocalizationEmbeddablePlain JavaScriptetc.

Working with AngularJSGetting StartedGetting Scripts -Download directly via angularjs.orgCDNTools BowerYeoman

My App

{{ myString }}

Application Layout

Data-BindingAutomatic & Two-way: View to Model & Model to ViewEliminates need of event binding and handlingAchieved through ng-model directive {{ }} bindings, {{ foo }}$scope object $ = hello!;$watch method $scope.$watch(foo, function(newVal, oldVal){ // do something here });Pass between controllers, directivesetc..

DirectivesLets you *invent* new HTML syntaxCreate new tags, attributes, as a css classChange existing tags, attributes with new meaningsLets you abstract markup in a templateExamples ng-app ng-init ng-model ng-controller ng-view (for routing) ng-class, ng-show, ng-hide ng-repeat {{}} ng-click, ng-dblclick, ng-submit Click MeMany many more - hereBindings, Expressions, FiltersBinding {{ | filter | orderBy }}To be used in Views/HTML.Expressions JavaScript *like* code-snippets {{ 1 + 2 }}, {{ hello World! }} Evaluated against a $scope object {{ a + b }}, {{ }}, {{ items[index] }}, {{ doSomething() }} *Cannot* use conditionals, loops & exceptions Filters Data formatterslowercase, currency, date & any custom-filtersorderBy Sorts filtered result-setDemo 1Data binding, built-in directivesAnatomy of an Angular App

My App

{{ myString }}

BasicAnatomy of an Angular App

My App

{{ myString }}

Better// app.js

function MyController($scope) { $scope.myString = hello world!;

}Anatomy of an Angular App

My App

{{ myString }}

Even better using Modules// app.js

var myApp = angular.module('myApp', []);

myApp.controller(MyController, [$scope, function($scope) { $scope.myString = hello world!;}]); ControllersUsed to provide business logic, methods for the viewMakes use of ServicesProvided with scope objectDependencies are injectedViewsUsed for interaction by userSimple HTML, CSS filesCan work on models directlyRecommendationUse controllers for any manipulationsUse directive for explicit HTML manipulationsUseful Directives ng-controller, ng-include, ng-viewDemo 2Anatomy BasicBetterBestRunning using HTTPServersAny web server which can serve static HTML pagesOptions: NodeJS or PythonNodeJS:Install NodeJS instructions hereInstall Express - $ my_app> npm install expressCreate a script (server.js)

$ my_app > node server.jsvar express = require('express');var app = express();app.use(express.static(__dirname + '/static'));

app.listen(3000, function(err) { if (err) { console.log('Server couldn\'t be started!', err); } else { console.log('Server started.'); }});Questions.. ?ReferencesArticlesAngularJS official guideUse AngularJS to power your applicationWhy does AngularJS rock?Rapid prototyping with AngularJsAngularJs Form Validation

VideosOfficial YouTube channelAngularJs Fundamentals in 60-ish minutesWriting DirectivesIntroduction to AngularJs Unit Testing End to End testing of AngularJs apps with ProtractorThank you!End of Day 1.


View more >