SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
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 trip

3 | Internal use only
A co to ten angulár umí?

      • Data binding
      • Controller
      • Plain JavaScript
      • Validation
      • Server communication
      • Directives
      • Injection
      • Testing

4 | 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 wohohooo




9 | 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
Neatness


12 | 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
                              @ladislavGazo

15 | Internal use only
Links

      • BizMon project - https://github.com/lgazo/bizmon
      • AcrIS – http://acris.googlecode.com
      • AngularJS – http://angularjs.org




16 | Internal use only

Mais conteúdo relacionado

Mais procurados

Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0Eyal Vardi
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Eyal Vardi
 
Using JavaScript in Drupal
Using JavaScript in DrupalUsing JavaScript in Drupal
Using JavaScript in Drupalkatbailey
 
Contagion的Ruby/Rails投影片
Contagion的Ruby/Rails投影片Contagion的Ruby/Rails投影片
Contagion的Ruby/Rails投影片cfc
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupalkatbailey
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuerySudar Muthu
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js iloveigloo
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Eyal Vardi
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery BasicsKaloyan Kosev
 
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Marcin Wosinek
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuerykatbailey
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex DevsAaronius
 
Jquery for post a form
Jquery for post a formJquery for post a form
Jquery for post a formRakesh Kumar
 

Mais procurados (20)

Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
 
Using JavaScript in Drupal
Using JavaScript in DrupalUsing JavaScript in Drupal
Using JavaScript in Drupal
 
Contagion的Ruby/Rails投影片
Contagion的Ruby/Rails投影片Contagion的Ruby/Rails投影片
Contagion的Ruby/Rails投影片
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuery
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
jQuery Beginner
jQuery BeginnerjQuery Beginner
jQuery Beginner
 
J querypractice
J querypracticeJ querypractice
J querypractice
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
AngularJS
AngularJSAngularJS
AngularJS
 
JQuery
JQueryJQuery
JQuery
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
 
Broadleaf Presents Thymeleaf
Broadleaf Presents ThymeleafBroadleaf Presents Thymeleaf
Broadleaf Presents Thymeleaf
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex Devs
 
Jquery for post a form
Jquery for post a formJquery for post a form
Jquery for post a form
 

Semelhante a AngularJS first steps

Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSbuttyx
 
Angular Performance: Then, Now and the Future. Todd Motto
Angular Performance: Then, Now and the Future. Todd MottoAngular Performance: Then, Now and the Future. Todd Motto
Angular Performance: Then, Now and the Future. Todd MottoFuture Insights
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshowsblackman
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияOlga Lavrentieva
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Componentscagataycivici
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript FrameworkAll Things Open
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 
Building Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And TricksBuilding Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And TricksMike Hugo
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 

Semelhante a AngularJS first steps (20)

Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJS
 
Angular Performance: Then, Now and the Future. Todd Motto
Angular Performance: Then, Now and the Future. Todd MottoAngular Performance: Then, Now and the Future. Todd Motto
Angular Performance: Then, Now and the Future. Todd Motto
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Components
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
 
Angular
AngularAngular
Angular
 
Angular
AngularAngular
Angular
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Introduction to angular js
Introduction to angular jsIntroduction to angular js
Introduction to angular js
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
Nicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JSNicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JS
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
 
Building Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And TricksBuilding Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And Tricks
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 

Mais de seges

Spring Boot and Microservices
Spring Boot and MicroservicesSpring Boot and Microservices
Spring Boot and Microservicesseges
 
Automated Tomcat Management
Automated Tomcat ManagementAutomated Tomcat Management
Automated Tomcat Managementseges
 
Javist Being Cheftain
Javist Being CheftainJavist Being Cheftain
Javist Being Cheftainseges
 
Multi-tenancy in Java
Multi-tenancy in JavaMulti-tenancy in Java
Multi-tenancy in Javaseges
 
OSGi experiments
OSGi experimentsOSGi experiments
OSGi experimentsseges
 
Internetová prítomnosť a content management
Internetová prítomnosť a content managementInternetová prítomnosť a content management
Internetová prítomnosť a content managementseges
 
GWT Workshop
GWT WorkshopGWT Workshop
GWT Workshopseges
 
Ako sme zistili ze asi robime Scrum
Ako sme zistili ze asi robime ScrumAko sme zistili ze asi robime Scrum
Ako sme zistili ze asi robime Scrumseges
 

Mais de seges (8)

Spring Boot and Microservices
Spring Boot and MicroservicesSpring Boot and Microservices
Spring Boot and Microservices
 
Automated Tomcat Management
Automated Tomcat ManagementAutomated Tomcat Management
Automated Tomcat Management
 
Javist Being Cheftain
Javist Being CheftainJavist Being Cheftain
Javist Being Cheftain
 
Multi-tenancy in Java
Multi-tenancy in JavaMulti-tenancy in Java
Multi-tenancy in Java
 
OSGi experiments
OSGi experimentsOSGi experiments
OSGi experiments
 
Internetová prítomnosť a content management
Internetová prítomnosť a content managementInternetová prítomnosť a content management
Internetová prítomnosť a content management
 
GWT Workshop
GWT WorkshopGWT Workshop
GWT Workshop
 
Ako sme zistili ze asi robime Scrum
Ako sme zistili ze asi robime ScrumAko sme zistili ze asi robime Scrum
Ako sme zistili ze asi robime Scrum
 

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 angulár 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>&copy; 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
  • 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 – http://acris.googlecode.com • AngularJS – http://angularjs.org 16 | Internal use only