SlideShare a Scribd company logo
1 of 29
ngularJS – Beginner Module
December 2, 2015
#YOOXlabsTechEvent
(maybe )
Why is this project called "AngularJS"?
Because HTML has Angular brackets
Why is the namespace called "ng"?
"ng" sounds like "Angular"
Is AngularJS a library, framework, plugin or a
browser extension?
AngularJS fits the definition of a framework
the best
AngularJS Speech Topics
Template
Module
Scope
Controller
Model
View
Dev Utils
 Getting Started: Comparison of the
options for starting a new project
 Debugging: Batarang
 Testing: Karma, Protractor
 Editor support: Webstorm, Sublime
Text, Visual Studio
 Workflow: Yeoman.io and Angular
Yeoman Tutorial
We understand two main data binding
concepts
Data Binding
Data Binding
Template
Directive
Template structure
We will say: «Hello world!»
At a high level,
Directives are markers
on a DOM element
(such as an attribute,
element name, comment
or CSS class) that tell
AngularJS's HTML
compiler ($compile) to
attach a specified
behavior to that DOM
element (e.g. via event
listeners), or even to
transform the DOM
element and its children
«Hello world!!» - Template Head
<!DOCTYPE html>
<html lang="en" ng-app="ngBeginner" class="no-
js">
<head>
....
<link type="text/css" rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootst
rap-theme.min.css">
<link type="text/css" rel="stylesheet"
href="assets/css/main.css">
....
</head>
«Hello world!!» - ngApp
Use this directive to auto-bootstrap an
AngularJS application.
The ngApp directive designates the root
element of the application and is typically
placed near the root element of the page
- e.g. on the <body> or <html> tags.
«Hello world!!» - Template Body
<body>
<!-- menu -->
......
<!-- Dynamic view injection -->
<div ng-view></div>
......
ngView is a directive that complements the $route service by
including the rendered template of the current route into the
main layout (index.html) file.
«Hello world!!» - Template Footer
......
<script
src="bower_components/angular/angular.js"
></script>
<script src="bower_components/angular-
route/angular-route.js"></script>
<script src="app.js"></script>
......
</body>
</html>
Module
DI – dependecy injection
Routing
Partial Template
Module defined in app.js
We will say: «Hello world!»
Dependency
Injection (DI) is a
software design
pattern that deals
with how
components get
hold of their
dependencies
«Hello world!!» - App.js <init>
(function (jQuery) {
'use strict';
var NGBeginner = angular
.module('ngBeginner', [
'ngRoute'
])
})(jQuery);
"use strict"; Defines that JavaScript code
should be executed in "strict mode"
«Hello world!!» - App.js <DI - Routing>
NGBeginner.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl:'views/home.html‘
}).
when('/scope-hierarchy', {
templateUrl:'views/scopeHierarchy.html'
}).
Scope
Hierarchy
Scope EcoSystem
We will say: «Hello world!»
Scope is an object that
refers to the application
model. It is an execution
context for expressions.
Scopes are arranged in
hierarchical structure
which mimic the DOM
structure of the
application. Scopes can
watch expressions and
propagate events
«Hello world!!» - Scope EcoSystem
«Hello world!!» - Scope EcoSystem
«Hello world!!» - Scope EcoSystem
Controller
DataBinding
Model
Controller and Model
We will say: «Hello world!»
In Angular, a Controller
is defined by a
JavaScript constructor
function that is used to
augment the Angular
Scope
«Hello world!!» - Controllers and Model
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department}}
</li>
</ol>
</div>
</div>
«Hello world!!» - The code
angular
.module('ngBeginner')
.controller('GreetController', greetController)
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}]);
function greetController($rootScope, $scope){
$scope.name = 'World';
$rootScope.department = 'Angular';
}
«Hello world!!» - Scope EcoSystem
Learning curve
-3
-2
-1
0
1
2
3
4
5
6
7
8
NG Learning
Difficult
Time
ANGULAR
Angular
Well...and now??
Facepalm
Most awesome framwork ever!!
My code works I
have no idea why
My code doesn’t
works I have no
idea why
My code works I
have idea why
My code doesn’t
works I have idea
why
We can say
ngular(ly) Happy ^_^
Angular
^_^We are Angular(ly) Happy
QUESTIONS
#YOOXlabsTechEvent
riccardo.masetti@yoox.com - @MaRiccardo

More Related Content

What's hot

Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JSBrajesh Yadav
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slidessamhelman
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSSimon Guest
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS introdizabl
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsAviran Cohen
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routingBrajesh Yadav
 
Angularjs architecture
Angularjs architectureAngularjs architecture
Angularjs architectureMichael He
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practicesHenry Tao
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorialClaude Tech
 

What's hot (20)

Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JS
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS
AngularJSAngularJS
AngularJS
 
Intro to UI-Router/TypeScript
Intro to UI-Router/TypeScriptIntro to UI-Router/TypeScript
Intro to UI-Router/TypeScript
 
Angular js PPT
Angular js PPTAngular js PPT
Angular js PPT
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
 
Angular js
Angular jsAngular js
Angular js
 
Angularjs architecture
Angularjs architectureAngularjs architecture
Angularjs architecture
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorial
 

Viewers also liked

Angular1x and Angular 2 for Beginners
Angular1x and Angular 2 for BeginnersAngular1x and Angular 2 for Beginners
Angular1x and Angular 2 for BeginnersOswald Campesato
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2Ron Heft
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next FrameworkCommit University
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2FITC
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Micael Gallego
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Minko Gechev
 

Viewers also liked (12)

Angular1x and Angular 2 for Beginners
Angular1x and Angular 2 for BeginnersAngular1x and Angular 2 for Beginners
Angular1x and Angular 2 for Beginners
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
 
Angular2
Angular2Angular2
Angular2
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 

Similar to Angular - Beginner

One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJSYashobanta Bai
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsCourse CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsVinícius de Moraes
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architectureJasper Moelker
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docsAbhi166803
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSDeepu S Nath
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day trainingTroy Miles
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular jsAayush Shrestha
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 

Similar to Angular - Beginner (20)

Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.jsCourse CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
243329387 angular-docs
243329387 angular-docs243329387 angular-docs
243329387 angular-docs
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
 

Angular - Beginner

  • 1. ngularJS – Beginner Module December 2, 2015 #YOOXlabsTechEvent
  • 3. Why is this project called "AngularJS"? Because HTML has Angular brackets Why is the namespace called "ng"? "ng" sounds like "Angular" Is AngularJS a library, framework, plugin or a browser extension? AngularJS fits the definition of a framework the best
  • 5. Dev Utils  Getting Started: Comparison of the options for starting a new project  Debugging: Batarang  Testing: Karma, Protractor  Editor support: Webstorm, Sublime Text, Visual Studio  Workflow: Yeoman.io and Angular Yeoman Tutorial
  • 6. We understand two main data binding concepts
  • 9.
  • 10. Template Directive Template structure We will say: «Hello world!» At a high level, Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children
  • 11. «Hello world!!» - Template Head <!DOCTYPE html> <html lang="en" ng-app="ngBeginner" class="no- js"> <head> .... <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootst rap-theme.min.css"> <link type="text/css" rel="stylesheet" href="assets/css/main.css"> .... </head>
  • 12. «Hello world!!» - ngApp Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.
  • 13. «Hello world!!» - Template Body <body> <!-- menu --> ...... <!-- Dynamic view injection --> <div ng-view></div> ...... ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file.
  • 14. «Hello world!!» - Template Footer ...... <script src="bower_components/angular/angular.js" ></script> <script src="bower_components/angular- route/angular-route.js"></script> <script src="app.js"></script> ...... </body> </html>
  • 15. Module DI – dependecy injection Routing Partial Template Module defined in app.js We will say: «Hello world!» Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies
  • 16. «Hello world!!» - App.js <init> (function (jQuery) { 'use strict'; var NGBeginner = angular .module('ngBeginner', [ 'ngRoute' ]) })(jQuery); "use strict"; Defines that JavaScript code should be executed in "strict mode"
  • 17. «Hello world!!» - App.js <DI - Routing> NGBeginner.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', { templateUrl:'views/home.html‘ }). when('/scope-hierarchy', { templateUrl:'views/scopeHierarchy.html' }).
  • 18. Scope Hierarchy Scope EcoSystem We will say: «Hello world!» Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events
  • 19. «Hello world!!» - Scope EcoSystem
  • 20. «Hello world!!» - Scope EcoSystem
  • 21. «Hello world!!» - Scope EcoSystem
  • 22. Controller DataBinding Model Controller and Model We will say: «Hello world!» In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope
  • 23. «Hello world!!» - Controllers and Model <div class="show-scope-demo"> <div ng-controller="GreetController"> Hello {{name}}! </div> <div ng-controller="ListController"> <ol> <li ng-repeat="name in names"> {{name}} from {{department}} </li> </ol> </div> </div>
  • 24. «Hello world!!» - The code angular .module('ngBeginner') .controller('GreetController', greetController) .controller('ListController', ['$scope', function($scope) { $scope.names = ['Igor', 'Misko', 'Vojta']; }]); function greetController($rootScope, $scope){ $scope.name = 'World'; $rootScope.department = 'Angular'; }
  • 25. «Hello world!!» - Scope EcoSystem
  • 26. Learning curve -3 -2 -1 0 1 2 3 4 5 6 7 8 NG Learning Difficult Time ANGULAR Angular Well...and now?? Facepalm Most awesome framwork ever!! My code works I have no idea why My code doesn’t works I have no idea why My code works I have idea why My code doesn’t works I have idea why
  • 28. ngular(ly) Happy ^_^ Angular ^_^We are Angular(ly) Happy