Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Angularjs Basics

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
AngularJS Basics
AngularJS Basics
Chargement dans…3
×

Consultez-les par la suite

1 sur 16 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Similaire à Angularjs Basics (20)

Plus récents (20)

Publicité

Angularjs Basics

  1. 1. Isn’t that all you need ?
  2. 2. • Pure JS (no JQuery) • MVC framework • Dependency Injection • There are no Observables objects/Properties • Encourage to write unit testable code
  3. 3. Basic Concepts • Model - application data • View - what the user sees • Controller - application behavior • Scope - glue between application data and behavior • $ - angular namespace ($$ is private ) • Module - configures the injector • Injector - assembles the application
  4. 4. Data Binding Write an interactive app without using custom JavaScript Few directives • Define data in the view itself ng-init • Initialize the application ng-app • Two way binding ng-model
  5. 5. Expressions {{ expression | filter }} expression - access variables and functions from the scope filter - formats the value of an expression for display to the user
  6. 6. Controllers • The UI Logic • Use of ng-controller
  7. 7. Services • View independent business logic • Share common logic across controllers • Lazily instantiated • Singletons • Built in services - $http, $compile, $q
  8. 8. References • https://www.youtube.com/watch?v=i9MHigUZKEM • https://docs.angularjs.org/guide/concepts • http://stackoverflow.com/questions/tagged/angula rjs

Notes de l'éditeur

  • Developed by Misko hevery , in three weeks
  • google trends
  • http://blog.stackoverflow.com/2014/02/2013-stack-overflow-user-survey-results/
  • https://docs.angularjs.org/guide/concepts
    http://plnkr.co/edit/?p=preview

    <div ng-app ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div> Quantity: <input type="number" ng-model="qty" required >
    </div>
    <div>
    Costs: <input type="number" ng-model="cost" required >
    </div> <div> <b>Total:</b> {{qty * cost | currency}}
    </div>
    </div>
  • https://docs.angularjs.org/guide/filter
    {{qty * cost | currency}}
  • constructor function that creates the actual controller instance. The purpose of controllers is to expose variables and functionality to expressions and directives.

    http://plnkr.co/edit/lwlrMd66y8mQjzGZVWd2?p=preview

  • https://docs.angularjs.org/guide/services
  • https://docs.angularjs.org/guide/concepts#controller
    http://plnkr.co/edit/AZYwKmTv5P14vjNEGz0j?p=preview

    Angular 2.0- for future browsers
    Intergration with other libraries – kendo-angular
    Writing directives

×