Why try angularJS?

Why try angularJS?

• 1.
  $scope.presentation = { author:'Jerguš Lejko', year: 2015 };
• 2.
  What is AngularJS? •MAGIC • JS frontend MVC framework • SPA • routing (history-back, url change) • api calls • view loading • really cool thing • "HTML extension" • full-package solution
• 3.
  Miško Hevery • <ng-creator ng-init="year =2009" /> • code tester • Adobe, Sun Microsystems, Intel, Xerox
• 4.
  Why use AngularJS? •MVC done RIGHT • perfect match to REST API • Two-Way Data Binding • Dependency Injection • Directives • works out-of-box • NO DIRTY DOM MANIPULATION
• 5.
  One-way Data Binding
• 6.
  Two-way Data Binding
• 7.
  Dependency Injection • angulartakes care of DI • injects what needed, where needed app.controller('MyFirstController', function(dep1, dep2) { // some really smart stuff }); app.controller('MyFirstController', ['dep1', 'dep2', function(dep1, dep2) { // some really smart stuff }]);
• 8.
  $scope • data-model • createdby some directives (ng-controller, ng-repeat) • similar to traditional JS scope • also referred to as 'controller' • inherits from it’s parent • $rootScope
• 9.
  {{ expression }} •complied by angular’s compiler on view-load • expression - variables from current scope (or from parent scope), not global js variables • filters applicable - {{ expression | filter1 | filter2 }} • has "flash effect" - avoid by using: <div ng-bind="expression"></div>
• 10.
  {{ 'hello' |uppercase }} => HELLO {{ 'hello' | limitTo:4 }} => hell {{ 1288323623006 | date:"MM/dd/yyyy 'at' h:mma" }}: 10/29/2010 at 5:40AM • filter:argument1:argument2:argumentN • modifies the expression and returns a modified value • apply as much filters as you want {{ expression | filter }}
• 11.
  <directives> • custom HTMLelements • "extension of HTML" • represented by: element, attribute or css class • attach special behaviour to a DOM element • ex.: ng-model, ng-bind, ng-click…
• 12.
  How to start? angularjs.org angular.codeschool.com tutorialspoint.com/angularjs thinkster.io/a-better-way-to-learn-angularjs Goodluck!