Laco Gažo urobil prednášku o AngularJS

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, nginx
5 | Internal use only

6. JavaScript world
• BackboneJS • jQuery
• underscore • YUI
• EmberJS • node.js
• CanJS • TypeScript
• MeteorJS • Closure
• EsteJS
6 | 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
• Testing
8 | 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 wohohooo
13 | 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. Neatness
16 | 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
@ladislavGazo
19 | 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