AngularJS first steps
Upcoming SlideShare
Loading in...5
×
 

AngularJS first steps

on

  • 3,918 views

From Java Dinosaur to AngularJS JavaScripter - introduction talk to powerful AngularJS framework

From Java Dinosaur to AngularJS JavaScripter - introduction talk to powerful AngularJS framework

Statistics

Views

Total Views
3,918
Views on SlideShare
3,891
Embed Views
27

Actions

Likes
5
Downloads
72
Comments
0

5 Embeds 27

http://qatest.downtowncleveland.com 12
http://osy21.tistory.com 11
http://www.envisionme.co.za 2
http://digitalfalls-dca.com 1
http://www.downtowncleveland.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AngularJS first steps AngularJS first steps Presentation Transcript

  • od Dinosaura k JavaScriptu Ladislav Gažo gazo@seges.sk @ladislavGazo
  • JavaScript.... whaaat?2 | Internal use only
  • I need CLEVER JavaScript framework bottle for the trip3 | Internal use only
  • A co to ten angulár umí? • Data binding • Controller • Plain JavaScript • Validation • Server communication • Directives • Injection • Testing4 | 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>5 | Internal use only
  • Curly brackets? In HTML?6 | Internal use only
  • function BizmonCtrl($scope, projectService) { $scope.projects = projectService.query(); } BizmonCtrl.$inject = ["$scope", "projectService"];7 | 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 )8 | Internal use only
  • ng-click wohohooo9 | 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>10 | Internal use only
  • <input type="textarea" ng-model="activeIssueState.reason" placeholder="optional reason why you are creating the issue" size="4"/>11 | Internal use only
  • Neatness12 | 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);13 | Internal use only
  • 14 | Internal use only
  • WORK with US Thank you for your patience gazo@seges.sk @ladislavGazo15 | Internal use only
  • Links • BizMon project - https://github.com/lgazo/bizmon • AcrIS – http://acris.googlecode.com • AngularJS – http://angularjs.org16 | Internal use only