System is processing data
Please download to view
...

Ng poznan 12.06

by kamil-augustynowicz

on

Report

Category:

Software

Download: 0

Comment: 0

669

views

Comments

Description

Download Ng poznan 12.06

Transcript

  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
Fly UP