![function BizmonCtrl($scope, projectService) {
$scope.projects = projectService.query();
}
BizmonCtrl.$inject = ["$scope", "projectService"];
7 | Internal use only](https://image.slidesharecdn.com/angularjsfirststeps-121012103645-phpapp02/85/AngularJS-first-steps-7-320.jpg)
![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](https://image.slidesharecdn.com/angularjsfirststeps-121012103645-phpapp02/85/AngularJS-first-steps-8-320.jpg)
![<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](https://image.slidesharecdn.com/angularjsfirststeps-121012103645-phpapp02/85/AngularJS-first-steps-10-320.jpg)
![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](https://image.slidesharecdn.com/angularjsfirststeps-121012103645-phpapp02/85/AngularJS-first-steps-13-320.jpg)
AngularJS first steps
- 1. od Dinosaura k JavaScriptu Ladislav Ga?o gazo@seges.sk @ladislavGazo
- 2. JavaScript.... whaaat? 2 | Internal use only
- 3. I need CLEVER JavaScript framework bottle for the trip 3 | Internal use only
- 4. A co to ten angulr um? ? Data binding ? Controller ? Plain JavaScript ? Validation ? Server communication ? Directives ? Injection ? Testing 4 | Internal use only
- 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>© Seges 2012</p> </footer> </div> </div> 5 | Internal use only
- 6. Curly brackets? In HTML? 6 | Internal use only
- 7. function BizmonCtrl($scope, projectService) { $scope.projects = projectService.query(); } BizmonCtrl.$inject = ["$scope", "projectService"]; 7 | Internal use only
- 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. ng-click wohohooo 9 | Internal use only
- 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. <input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue" size="4"/> 11 | Internal use only
- 12. Neatness 12 | Internal use only
- 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 | Internal use only
- 15. WORK with US Thank you for your patience gazo@seges.sk @ladislavGazo 15 | Internal use only
- 16. Links ? BizMon project - https://github.com/lgazo/bizmon ? AcrIS C http://acris.googlecode.com ? AngularJS C http://angularjs.org 16 | Internal use only