Moc dyrektyw – ng-poznan 12.06.2014

View Github Repository Open presentation in a new window

winktechnologies

See all presentation from winktechnologies

Moc dyrektyw – ng-poznan 12.06.2014

0 0

ng-directives-ng-poznan

presentation about directives in AngularJS

On Github winktechnologies / ng-directives-ng-poznan

Moc dyrektyw

ng-poznan 12.06.2014

Kamil Augustynowicz / @AugKamil

Co was czeka?

Jak zadeklarować dyrektywę

Scope i przekazywanie parametrów

Gdzie wrzucić logikę

Gotowe dyrektywy w AngularJS


  
"Powrót do Przyszłości"

  

    Ocena: 3
  

  

    

      Trailers:
    

    
  

  

    

      Recenzje:
    

    
  



          
          
Co łatwiej zrozumieć?

          

  

          
          
        
Definicja dyrektywy

          
angular.module "movieApp", []
.directive "movieTitle", ->
  restrict: String
  priority: Number
  terminal: Boolean
  template: String or Template Function:
    (tElement, tAttrs) ->
      ...
  templateUrl: String
  replace: Boolean or String
  scope: Boolean or Object
  transclude: Boolean
  controller: String or
    (scope, element, attrs, transclude, otherInjectables) ->
      ...
  controllerAs: String
  require: String
  link: (scope, iElement, iAttrs) ->
    ...
  compile:
     (tElement, tAttrs, transclude) ->
      ...
          

        
Dyrektywa jako element

          


angular.module 'movieApp',[]
.directive 'movieTitle', ->
  restrict: "E"
    ...
          



          
            

        
Dyrektywa jako atrybut

          


angular.module 'movieApp',[]
.directive 'movieTitle', ->
  restrict: "A"
    ...
          



          
            

          
        
Dyrektywa jako klasa

          


angular.module 'movieApp',[]
.directive 'movieTitle', ->
  restrict: "C"
    ...
          



          
            

          
        
Dyrektywa jako komentarz

          


angular.module 'movieApp',[]
.directive 'movieTitle', ->
  restrict: "M"
    ...
          



          
            
          

        
scope

          
movie_app = angular.module 'movieApp',[]

movie_module.directive 'movieReview', ->
  restrict: "E"
  scope: {}
  template:
    ''+
    'Twoja recenzja: {{review}}'

          

          

  

    



          
        
scope

          
movie_app = angular.module 'movieApp',[]

movie_app.controller "AppCtrl", ($scope) ->
  $scope.showInfo = (title) ->
    alert "Dodaj do ulubionych filmów: " + title

movie_app.directive 'movieTitle', ->
  restrict: "E"
  scope:
    title: "@"
    favoriteMovie: "&"
  template:
    '
'+
    '
{{title}}
'+
    '
'
  ...
          
          

  

    



          
        
scope

          
movie_app = angular.module 'movieApp',[]

movie_app.controller "AppCtrl", ($scope) ->
  $scope.rates = ["Tragedia", "Słaby", "Średni", "Dobry", "Rewelacyjny"]

movie_app.directive 'movieRating', ->
  restrict: "E"
  scope:
    rate: "="
    rates: "="
  template:
    '


Twoja ocena: {{rate}}
'+
    ''+
    '
'
  ...
          
          

  

    Ocena poza scopem: {{rate}}
    



          
        
link / controller

          
movie_app = angular.module 'movieApp',[]

movie_app.directive 'movieRating', ->
    ...
    link: (scope, element, attrs, ctrls) -> 

      element.bind 'mouseover', ->
        element.css 'color', 'red'
      
      element.bind 'mouseleave', ->
        element.css 'color', 'black'

      scope.$watch "rate", ((newValue, oldValue) ->
        if !angular.equals(newValue, oldValue)
          if newValue != "Rewelacyjny"
            alert "Czy jesteś pewien tej oceny?"
      ), true
    ...
          

        
require

          
movie_app = angular.module 'movieApp',[]

movie_app.directive 'movieHeading', ->
  require: ["^title", "^director"]
  link: (scope, element, attrs, ctrls) ->
    ctrls[0].showTitle("Powrót do Przyszłości")
    ctrls[1].showDirector("Robert Zemeckis")
  ...
          

        
To też dyrektywy

          
            

          
          
            

          
          
            

          
          

  
{{movie.title}}

  
{{movie.director}}



          
          

  Tytuł:
  Najlepszy tytuł filmu to:
  {{movie.title}}


          
          

  Last night, Darth Vader came down from planet Vulcan and told me that


          
          

  if I didn't take Lorraine out that he'd melt my brain.


          
          
            {{movie.title}}
          

          

          
            

          
            
          

        
I to też

          
ng-href

          
ng-src

          
ng-disabled

          
ng-checked

          
ng-readonly

          
ng-selected

          
ng-class

          
ng-style

          
ng-view

          
ng-form

          
ng-submit

          
ng-select

          
ng-cloak

          
ng-init

        
Gdzie wykorzystać tę moc?

          
Aby połączyć z logiką

          
Jako opakowanie dla plugin-ów jQuery

          
Modyfikowanie elementów DOM

          
DRY

        
THE END

          

            kamil@briisk.co
          

          

            Kamil Augustynowicz / @AugKamil