Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ng poznan 12.06

1,066 views

Published on

Prezentacja o dyrektywach w AngularJS

Published in: Software
  • Be the first to comment

  • Be the first to like this

Ng poznan 12.06

  1. 1. MOC DYREKTYW NG­POZNAN 12.06.2014 Kamil Augustynowicz / @AugKamil
  2. 2. CO WAS CZEKA? Jak zadeklarować dyrektywę Scope i przekazywanie parametrów Gdzie wrzucić logikę Gotowe dyrektywy w AngularJS
  3. 3. <divclass="col-sm-12"> <h3>"PowrótdoPrzyszłości"</h3> <divclass="col-sm-12"> <span>Ocena:</span>3 </div> <divclass="col-sm-12"> <h4> Trailers: </h4> <div> <ahref="/video1">Trailer1</a> </div> </div> <divclass="col-sm-12"> <h4> Recenzje: </h4> <div> <ahref="/review1.html">Review1</a> </div> </div> </div> CO ŁATWIEJ ZROZUMIEĆ? <divclass="col-sm-12"> <movie-title></movie-title> <movie-rating></movie-rating> <movie-trailers></movie-trailers> <movie-reviews></movie-reviews> </div>
  4. 4. DEFINICJA DYREKTYWY angular.module"movieApp",[] .directive"movieTitle",-> restrict:String priority:Number terminal:Boolean template:StringorTemplateFunction: (tElement,tAttrs)-> ... templateUrl:String replace:BooleanorString scope:BooleanorObject transclude:Boolean controller:Stringor (scope,element,attrs,transclude,otherInjectables)-> ... controllerAs:String require:String link:(scope,iElement,iAttrs)-> ... compile: (tElement,tAttrs,transclude)-> ...
  5. 5. DYREKTYWA JAKO ELEMENT angular.module'movieApp',[] .directive'movieTitle',-> restrict:"E" ... <movie-title></movie-title>
  6. 6. DYREKTYWA JAKO ATRYBUT angular.module'movieApp',[] .directive'movieTitle',-> restrict:"A" ... <divmovie-title=""></div>
  7. 7. DYREKTYWA JAKO KLASA angular.module'movieApp',[] .directive'movieTitle',-> restrict:"C" ... <divclass="movie-title"></div>
  8. 8. DYREKTYWA JAKO KOMENTARZ angular.module'movieApp',[] .directive'movieTitle',-> restrict:"M" ... <!--directive:movie-title-->
  9. 9. SCOPE movie_app=angular.module'movieApp',[] movie_module.directive'movieReview',-> restrict:"E" scope:{} template: '<inputtype="text"ng-model="review">'+ '<span>Twojarecenzja:{{review}}</span>' <divng-app="movieApp"> <divng-controller="AppCtrl"> <movie-review></movie-review> <movie-review></movie-review> <movie-review></movie-review> </div> </div>
  10. 10. SCOPE movie_app=angular.module'movieApp',[] movie_app.controller"AppCtrl",($scope)-> $scope.showInfo=(title)-> alert"Dodajdoulubionychfilmów:"+title movie_app.directive'movieTitle',-> restrict:"E" scope: title:"@" favoriteMovie:"&" template: '<divng-click="favoriteMovie({title:title})">'+ '<h3>{{title}}</h3>'+ '</div>' ... <divng-app="movieApp"> <divng-controller="AppCtrl"> <movie-titletitle="Powrótdo przyszłości"favorite-movie="showInfo(title)"> </movie-title> </div> </div>
  11. 11. 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: '<div><div>Twojaocena:{{rate}}</div>'+ '<selectng-model="rate"ng-options="rateforrateinrates">'+ '</select></div>' ... <divng-app="movieApp"> <divng-controller="AppCtrl"> <span>Ocenapozascopem:{{rate}}</span> <selectng-model="rate"ng-options="rateforrateinrates"></select> <movie-ratingrate="rate"rates="rates"></movie-rating> </div> </div>
  12. 12. 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) ifnewValue!="Rewelacyjny" alert"Czyjesteśpewientejoceny?" ),true ...
  13. 13. REQUIRE movie_app=angular.module'movieApp',[] movie_app.directive'movieHeading',-> require:["^title","^director"] link:(scope,element,attrs,ctrls)-> ctrls[0].showTitle("PowrótdoPrzyszłości") ctrls[1].showDirector("RobertZemeckis") ...
  14. 14. TO TEŻ DYREKTYWY <divng-app="movieApp"></div> <divng-controller="MovieControllerasmovie"></div> <divng-include="movie.html"></div> <divng-repeat="movieinmovies"> <h3>{{movie.title}}</h3> <div>{{movie.director}}</div> </div> <divng-swith=""on="movie.title"> <spanng-switch-default="">Tytuł:</span> <spanng-switch-when="Powrótdoprzyszłości">Najlepszytytułfilmuto: </span>{{movie.title}} </div> <divng-if="movie.year==1955"> Lastnight,DarthVadercamedownfromplanetVulcanandtoldmethat </div> <divng-show="movie.year==1955"> ifIdidn'ttakeLorraineoutthathe'dmeltmybrain. </div> {{movie.title}} <inputtype="text"ng-model="movie.title"> <!--CSS:ng-valid,ng-invalid,ng-prisitne,ng-dirty-->
  15. 15. 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
  16. 16. GDZIE WYKORZYSTAĆ TĘ MOC? Aby połączyć z logiką Jako opakowanie dla plugin-ów jQuery Modyfikowanie elementów DOM DRY
  17. 17. THE END kamil@briisk.co Kamil Augustynowicz / @AugKamil

×