itexperience - angularjs
TRANSCRIPT
2 | Internal use only
JavaScript.... whaaat?
3 | Internal use only
4 | Internal use only
JavaScript
• JavaScript (JS) is an open
source client-side scripting
language commonly
implemented as part of a
web browser in order to
create enhanced user
interfaces and dynamic
websites.
• JavaScript is:
– Prototype-based
– Dynamic
– Weakly-typed
– Has First-class functions
– Influenced by C &
Java,...
5 | Internal use only
Basics
• <script> tag
• var a = 7;
• if, then, else
• for, while
• namespaces
• functions
• web server – Apache, nginx
6 | Internal use only
JavaScript world
• BackboneJS
• underscore
• EmberJS
• CanJS
• MeteorJS
• EsteJS
• jQuery
• YUI
• node.js
• TypeScript
• Closure
7 | Internal use only
Tools
• Chrome Developer Tools
• Firebugs
• IE Developer Toolbar
• Opera
• Editor: vim, webstorm,
sublime text, notepad,...
8 | Internal use only
A co to ten angulár umí?
• Data binding
• Controller
• Plain JavaScript
• Validation
• Server communication
• Directives
• Injection
• Testing
9 | Internal use only
<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>© Seges 2012</p> </footer></div>
</div>
10 | Internal use only
Curly brackets?
In HTML?
11 | Internal use only
function BizmonCtrl($scope, projectService) {$scope.projects = projectService.query();
}BizmonCtrl.$inject = ["$scope", "projectService"];
12 | Internal use only
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 )
13 | Internal use only
ng-click wohohooo
14 | Internal use only
<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>
15 | Internal use only
<input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue"
size="4"/>
16 | Internal use only
Neatness
17 | Internal use only
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);
18 | Internal use only
19 | Internal use only
WORK with US
Thank you for your patience
[email protected]@ladislavGazo
Java GroupWebElementRubyslava
20 | Internal use only
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/