od Dinosaura k JavaScriptu        Ladislav Gažo       gazo@seges.sk       @ladislavGazo
JavaScript.... whaaat?2 | Internal use only
I need CLEVER JavaScript framework                                                bottle for the trip3 | Internal use only
A co to ten angulár umí?      • Data binding      • Controller      • Plain JavaScript      • Validation      • Server com...
<h2>BizMon</h2>                        <div id="bizmonApp" ng-controller="BizmonCtrl">                            <div cla...
Curly brackets?                          In HTML?6 | Internal use only
function BizmonCtrl($scope, projectService) {              $scope.projects = projectService.query();           }          ...
angular.module(bizmonApp.services, [ ngResource ]).factory(           projectService, function($resource) {           var ...
ng-click wohohooo9 | Internal use only
<tr ng-repeat="issueState in prjScope.issueStates">           <td ng-class="operation- + issueState.operation">           ...
<input type="textarea" ng-model="activeIssueState.reason"                        placeholder="optional reason why you are ...
Neatness12 | Internal use only
var inputNameDirective =         [$interpolate,                                             function($interpolate) {      ...
14 | Internal use only
WORK with US                         Thank you for your patience                              gazo@seges.sk               ...
Links      • BizMon project - https://github.com/lgazo/bizmon      • AcrIS – http://acris.googlecode.com      • AngularJS ...
Upcoming SlideShare
Loading in …5
×

AngularJS first steps

3,529 views
3,408 views

Published on

From Java Dinosaur to AngularJS JavaScripter - introduction talk to powerful AngularJS framework

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,529
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
73
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

AngularJS first steps

  1. 1. od Dinosaura k JavaScriptu Ladislav Gažo gazo@seges.sk @ladislavGazo
  2. 2. JavaScript.... whaaat?2 | Internal use only
  3. 3. I need CLEVER JavaScript framework bottle for the trip3 | Internal use only
  4. 4. A co to ten angulár umí? • Data binding • Controller • Plain JavaScript • Validation • Server communication • Directives • Injection • Testing4 | Internal use only
  5. 5. <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>5 | Internal use only
  6. 6. Curly brackets? In HTML?6 | Internal use only
  7. 7. function BizmonCtrl($scope, projectService) { $scope.projects = projectService.query(); } BizmonCtrl.$inject = ["$scope", "projectService"];7 | Internal use only
  8. 8. 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 )8 | Internal use only
  9. 9. ng-click wohohooo9 | Internal use only
  10. 10. <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>10 | Internal use only
  11. 11. <input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue" size="4"/>11 | Internal use only
  12. 12. Neatness12 | Internal use only
  13. 13. 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);13 | Internal use only
  14. 14. 14 | Internal use only
  15. 15. WORK with US Thank you for your patience gazo@seges.sk @ladislavGazo15 | Internal use only
  16. 16. Links • BizMon project - https://github.com/lgazo/bizmon • AcrIS – http://acris.googlecode.com • AngularJS – http://angularjs.org16 | Internal use only

×