Angular - Beginner

Angular - Beginner

• 1.
  ngularJS – BeginnerModule December 2, 2015 #YOOXlabsTechEvent
• 2.
  (maybe )
• 3.
  Why is thisproject 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
• 4.
  AngularJS Speech Topics Template Module Scope Controller Model View
• 5.
  Dev Utils  GettingStarted: 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 twomain data binding concepts
• 7.
  Data Binding
• 8.
  Data Binding
• 10.
  Template Directive Template structure We willsay: «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 – dependecyinjection 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 willsay: «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 Wewill 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...andnow?? 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
• 27.
  We can say
• 28.
  ngular(ly) Happy ^_^ Angular ^_^Weare Angular(ly) Happy
• 29.
  QUESTIONS #YOOXlabsTechEvent riccardo.masetti@yoox.com - @MaRiccardo