Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • AngularJS - HTML Enhanced For Web-Apps Presentation

    Enviado por

    Rony Mateo
    26 visualizações17 páginas
    Angular HTMLO Enhanced for Web-Apps

    Título original

    AngularJS - HTML Enhanced for Web-Apps Presentation

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Angular HTMLO Enhanced for Web-Apps

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    26 visualizações17 páginas

    AngularJS - HTML Enhanced For Web-Apps Presentation

    Enviado por

    Rony Mateo
    Angular HTMLO Enhanced for Web-Apps

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 17

    Design Principles of

    Miko Hevery Father of AngularJS

    The Principles

    Boilerplate

    D.R.Y.

    Structure

    Testability

    2009: GetAngular

    <angular/>

    Project

    Results

    17,000 LOC

    1,500 LOC

    Before

    with Angular

    <div> <span> <ul> <li> <li> <li>


    RAM
    Database

    Data Binding
    <html ng-app> <body> <input ng-model='user.name'> <p ng-show='user.name'>Hi {{user.name}}</p> <script src='angular.js'></script> </body> </html> Eureka: DOM

    {{ databinding }}
    <div>
    <span> <ul> <li> <li> <li>

    Logic

    RAM

    MVC
    <html ng-app> <body ng-controller='UserCtrl as uCtrl'> Hi <input ng-model='uCtrl.user.first'> <button ng-click='uCtrl.bye()'>bye</button> <script src='angular.js'></script> <script src='UserControllers.js'></script> </body> </html> function UserCtrl() { this.user = { first:'Larry', last:'Page' };

    this.bye = function() {
    alert('bye:' + this.user.first); };

    index.html

    UserController.js

    Structure
    <div> <span> <ul>

    <li>

    UI / View (DOM)

    Observes
    RAM

    Data / Model (JS Objects)

    Notifies Logic / Controller (JS Classes)

    Manages

    Dependency Injection
    function UserController(voiceSynth) { this.user = { first:'Larry', last: 'Page' }; this.bye = function() { voiceSynth.say('bye') }; View (DOM)

    Module: myApp

    function VoiceSynth(webAudio) { this.say = function(text) {// do Web Audio stuff}; };

    UserController

    VoiceSynth

    var myApp = angular.module('myApp', []); myApp.controller('UserController', UserController); myApp.service('voiceSynth', VoiceSynth);

    WebAudio

    Dependency Injection: Mocking


    function VoiceSynthMock() { this.say = function(text) { this.said.push(text); View (DOM)

    Module: myMocks -> myApp

    };
    this.said = []; }; UserController

    var myMocks = angular.module('myMocks', ['myApp']); myApp.service('voiceSynth', VoiceSynthMock);

    VoiceSynth

    VoiceSynthMock

    WebAudio

    Imperative
    Eureka!!!

    Declarative
    {{ databinding }} ng-hide ng-controller ng-model my-tab my-pane my-map

    Directives as Components
    <rating max="5" model="stars.average">

    </rating>

    <tabs> <tab title="Active tab">...</tab> <tab title="Inactive tab">...</tab> </tabs>

    <span tooltip="{{messages.tip1}}">

    Live Coding

    Community

    Ecosystem
    Tools UI Components Libraries Books

    Batarang

    AngularUI

    Thank You!
    angularjs.org +angularjs
    @angularjs @mhevery Code samples: http://goo.gl/N1sCd

    Você também pode gostar