Your SlideShare is downloading. ×
ITexperience - AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

ITexperience - AngularJS

616
views

Published on

Laco Gažo urobil prednášku o AngularJS

Laco Gažo urobil prednášku o AngularJS


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
616
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Svet JavaScriptu Ladislav Gažo gazo@seges.sk @ladislavGazo
  • 2. JavaScript.... whaaat?2 | Internal use only
  • 3. 3 | Internal use only
  • 4. JavaScript • JavaScript (JS) is an open • JavaScript is: source client-side scripting – Prototype-based language commonly – Dynamic implemented as part of a – Weakly-typed web browser in order to – Has First-class functions create enhanced user – Influenced by C & interfaces and dynamic websites. Java,...4 | Internal use only
  • 5. Basics • <script> tag • var a = 7; • if, then, else • for, while • namespaces • functions • web server – Apache, nginx5 | Internal use only
  • 6. JavaScript world • BackboneJS • jQuery • underscore • YUI • EmberJS • node.js • CanJS • TypeScript • MeteorJS • Closure • EsteJS6 | Internal use only
  • 7. Tools • Chrome Developer Tools • Firebugs • IE Developer Toolbar • Opera • Editor: vim, webstorm, sublime text, notepad,...7 | Internal use only
  • 8. A co to ten angulár umí? • Data binding • Controller • Plain JavaScript • Validation • Server communication • Directives • Injection • Testing8 | Internal use only
  • 9. <h2>BizMon</h2> <div id="bizmonApp" ng-controller="BizmonCtrl"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Bizmon</a> <ul class="nav"> <li ng-repeat="project in projects"> <a ng-href="#/projects/ {{project.id}}">{{project.name}}</a> </li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid" ng-view></div> <footer> <p>&copy; Seges 2012</p> </footer> </div> </div>9 | Internal use only
  • 10. Curly brackets? In HTML?10 | Internal use only
  • 11. function BizmonCtrl($scope, projectService) { $scope.projects = projectService.query(); } BizmonCtrl.$inject = ["$scope", "projectService"];11 | Internal use only
  • 12. angular.module(bizmonApp.services, [ ngResource ]).factory( projectService, function($resource) { var service = $resource(rest/projects/:projectId, {}, {}); return service; }); mvn -o archetype:generate -DarchetypeGroupId=sk.seges.acris.archetype -DarchetypeArtifactId=acris-archetype-rest-server ( AcrIS - http://acris.googlecode.com )12 | Internal use only
  • 13. ng-click wohohooo13 | Internal use only
  • 14. <tr ng-repeat="issueState in prjScope.issueStates"> <td ng-class="operation- + issueState.operation"> <a ng-click="editIssue(issueState)">{{issueState.uuid}}</a> </td> <td>{{issueState.reason}}</td> <td> <span class="btn-group" ng-show="projectScopeViews[prjScope.id].edit"> <a class="btn btn-primary" ng-click="toggleOperation(issueState)"> <span ng-bind="issueState.operation"></span> </a> <a class="btn btn-danger" ng-click="deleteIssue(prjScope, issueState)">Delete</a> </span> </td> </tr>14 | Internal use only
  • 15. <input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue" size="4"/>15 | Internal use only
  • 16. Neatness16 | Internal use only
  • 17. var inputNameDirective = [$interpolate, function($interpolate) { return { restrict: A, scope: { inputName: attribute, ngModel: accessor }, require: [ngModel,^?form], link: function (scope, element, attrs, ctrl) { var ex = $interpolate(scope.inputName); scope.nameTransformed = ex(scope.$parent); var modelCtrl = ctrl[0]; modelCtrl.$name = scope.nameTransformed; var formCtrl = ctrl[1] || nullFormCtrl; formCtrl.$addControl(modelCtrl); } }; }]; angular.module(bizmonApp.directives,[]).directive(inputName, inputNameDirective);17 | Internal use only
  • 18. 18 | Internal use only
  • 19. WORK with US WebElement Java Group Rubyslava Thank you for your patience gazo@seges.sk @ladislavGazo19 | Internal use only
  • 20. Links BizMon project - https://github.com/lgazo/bizmon • AcrIS – http://acris.googlecode.com • AngularJS – http://angularjs.org • GDG – http://www.meetup.com/GTUG-Slovakia/ – https://www.facebook.com/groups/149659868513109/ – https://plus.google.com/115200570829527654069 • Java Group - https://www.facebook.com/groups/359487710807375/20 | Internal use only