ITexperience - AngularJS
1 like750 views
This document provides an overview of JavaScript and the AngularJS framework. It discusses what JavaScript is, its basic features and uses, popular JavaScript libraries and tools, what AngularJS is and how it works, examples of using AngularJS directives and data binding, and tips for organizing AngularJS code neatly. The document also shares links to related projects, meetup groups, and resources for learning more.
![function BizmonCtrl($scope, projectService) {
$scope.projects = projectService.query();
}
BizmonCtrl.$inject = ["$scope", "projectService"];
11 | Internal use only](https://image.slidesharecdn.com/itxpjavascriptandangularjsfirststeps-130206041315-phpapp02/85/ITexperience-AngularJS-11-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 )
12 | Internal use only](https://image.slidesharecdn.com/itxpjavascriptandangularjsfirststeps-130206041315-phpapp02/85/ITexperience-AngularJS-12-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>
14 | Internal use only](https://image.slidesharecdn.com/itxpjavascriptandangularjsfirststeps-130206041315-phpapp02/85/ITexperience-AngularJS-14-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);
17 | Internal use only](https://image.slidesharecdn.com/itxpjavascriptandangularjsfirststeps-130206041315-phpapp02/85/ITexperience-AngularJS-17-320.jpg)
ITexperience - 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>© 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