od Dinosaura k JavaScriptu

Ladislav Gažo

gazo@seges.sk@ladislavGazo

2 | Internal use only

JavaScript.... whaaat?

3 | Internal use only

I need CLEVER JavaScript framework

bottle for the trip

4 | Internal use only

A co to ten angulár umí?

• Data binding

• Controller

• Plain JavaScript

• Validation

• Server communication

• Directives

• Injection

• Testing

5 | 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>&copy; Seges 2012</p> </footer></div>

</div>

6 | Internal use only

Curly brackets?

In HTML?

7 | Internal use only

function BizmonCtrl($scope, projectService) {$scope.projects = projectService.query();

}BizmonCtrl.$inject = ["$scope", "projectService"];

8 | 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 )

9 | Internal use only

ng-click wohohooo

10 | 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>

11 | Internal use only

<input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue"

size="4"/>

12 | Internal use only

Neatness

13 | 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);

14 | Internal use only

15 | Internal use only

WORK with US

Thank you for your patience

gazo@seges.sk@ladislavGazo

16 | Internal use only

Links

• BizMon project - https://github.com/lgazo/bizmon

• AcrIS – http://acris.googlecode.com

• AngularJS – http://angularjs.org