Scribd Logo
Unggah

Selamat datang di Scribd!

  • Introdução Ao Angular JS

    Diunggah oleh

    Anderson Oliveira
    173 tayangan6 halaman
    O documento introduz o framework AngularJS da Google, explicando seus principais conceitos como: 1) Separação de model, view e controller; 2) Programação declarativa através de templates; 3) Data binding de duas vias entre model e view.

    Deskripsi Asli:

    Introdução

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    O documento introduz o framework AngularJS da Google, explicando seus principais conceitos como: 1) Separação de model, view e controller; 2) Programação declarativa através de templates; 3) Data binding de duas vias entre model e view.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    173 tayangan6 halaman

    Introdução Ao Angular JS

    Diunggah oleh

    Anderson Oliveira
    O documento introduz o framework AngularJS da Google, explicando seus principais conceitos como: 1) Separação de model, view e controller; 2) Programação declarativa através de templates; 3) Data binding de duas vias entre model e view.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Comear os exerccios

    Ver texto

    Ir para o prximo captulo

    Explicao
    (Reportar problema na explicao)

    Download
    Segue o link do projeto utilizado nessa aula: Introduo AngularJS

    Introduo ao AngularJS
    Quando desenvolvemos no server-side, organizamos nosso cdigo em
    camadas para facilitar a manuteno, o reaproveitamento e a
    legibilidade de nosso cdigo. Inclusive tornamos nosso cdigo
    testvel atravs de testes automatizados.

    Cdigo no client-side
    Muitas vezes o mesmo desenvolvedor que segue essa srie de
    prticas acaba deixando-as de lado quando codifica no client-side.
    Mesmo aqueles que procuram organizar melhor seu cdigo acabam
    criando solues caseiras que nem sempre so bem documentadas.

    Frameworks MVC client-side


    Tendo como base este cenrio, frameworks MVC client-side foram
    criados. Entre eles temos o Backbone (http://backbonejs.org/), Amber
    (http://emberjs.com/), Knockout (http://knockoutjs.com/), CanJS
    (http://canjs.com/), Batman (http://batmanjs.org/), entre outros.

    AngularJS, o framework MVC da Google


    Um framework que vem ganhando muita ateno da comunidade o
    AngularJS. Criado como um projeto interno da Google e liberado para
    o pblico em 2009, ele possui caractersticas que tornam sua adoo
    interessante:

    Paradigma MVC: separao entre model, view e controller

    Programao declarativa atravs de templates: templates


    consomem dados e se redesenham com base nesses dados.

    Two-way databinding: alterao no model reflete na view e


    vice-versa.

    Componentes visuais reutilizveis: ampliao do


    vocabulrio do navegador, criando suas prprias tags atravs de
    diretivas.

    Single Page Application (SPA)


    AngularJS tem como foco a criao de Single Page
    Applications (SPAs), mas no restrito a este tipo de aplicao. Em
    SPA, apenas a pgina principal carregada e atravs de um sistema
    de rotas do framework, seu miolo trocado a partir da navegao do
    usurio. No se preocupe se voc novo para este tipo de aplicao,
    voc ter a oportunidade de entender melhor seus conceitos ao logo
    do treinamento.

    Baixando o AngularJS
    possvel baixar um arquivo ZIP com todos os mdulos do Angular
    em seu prprio site (http://www.angularjs.org). Usaremos alguns deles
    durante o treinamento.

    Primeiro exemplo: Hello World


    Temos a pasta hello, criada com o arquivo do Angular, e a
    pgina index.html que possui um boto e um rtulo:
    <!-- hello/index.html -->
    <!doctype html>
    <html lang="pt">
    <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    </head>
    <body>
    <button>Clicar</button>
    <label>Voc clicou: 0 veze(s)</label>

    <script src="js/angular.min.js"></script>
    </body>
    </html>

    Primeiro, importaremos o Angular como qualquer outro script de


    nossa pgina. O prximo passo coloc-lo no controle, o que feito
    adicionando o atributo ng-app na tag <html>:
    <html lang="pt" ng-app>

    Este atributo no existe na especificao do HTML, sendo


    uma diretiva do Angular. Entenda por enquanto que diretivas
    ampliam o vocabulrio do navegador e que utilizaremos outras ao
    longo do curso.
    possvel adotar um escopo menor, por exemplo, adicionando o
    atributo ng-app apenas numa rea de nossa pgina (apenas
    para <body>, por exemplo), o que evitaria conflito entre Angular e
    outro framework MVC client-side que j estivesse sido carregado na
    pgina.

    Entendendo Angular Expression


    Queremos que a quantidade total exibida no label varie de acordo
    com o nmero de cliques no boto. Sendo assim, utilizaremos
    uma Angular Expression(AE) que sempre comea e termina com
    chaves duplas {{ }}:
    <label>Voc clicou: {{total}} veze(s)</label>

    Quando visualizamos o resultado, nada exibido. Isso acontece


    porque a Angular Expression(AE) no foi resolvida e ignorada.

    Definio de Model
    Vamos encarar a varivel da nossa Angular Expression como
    nosso model. O Angular no rgido a esse aspecto, e qualquer tipo
    do JavaScript pode ser o modelo. Se estamos trabalhando com MVC,
    quem o responsvel em disponibilizar o model para view?
    O controller!

    Criando o primeiro Controller

    Em Angular, um controller nada mais do que uma funo JavaScript.


    Criaremos uma dentro de um arquivo de mesmo nome:
    //js/HelloController.js

    function HelloController() {
    }

    Como nossa pgina saber da existncia desse controller? Onde ele


    ser instanciado? Angular permite que voc tenha mais de um
    controller por pgina, o que faz muito sentido, j que possvel dividir
    responsabilidades. Em nosso caso, trabalharemos apenas com um.
    atravs da diretiva ng-controller que associamos um controller a um
    fragmento do DOM, em nosso caso, tag <body>:
    <body ng-controller="HelloController">

    O objeto $scope
    Quando a pgina for carregada, Angular se encarregar de instanciar
    nosso controller sem termos que nos preocupar com isso. S no
    podemos esquecer de import-lo em nosso pgina:
    <script src="js/HelloController.js"></script>

    Visualizando mais uma vez, o total ainda no exibido. Isso ocorre


    porque ainda no disponibilizamos no escopo do controlador a
    informao de que a nossa view precisa. Fazemos isso atravs de um
    objeto especial chamado $scope.
    //js/HelloController.js

    function HelloController($scope) {
    }

    Injeo de dependncia no AngularJS


    Quando nosso controlador instanciado, um novo escopo criado e
    disponibilizado atravs da varivel $scope, mas apenas se o nome do
    parmetro da funo for exatamente igual $scope.
    Repare que apenas declaramos nossa dependncia e o Angular se
    encarregou de resolv-la para ns. Isso demostra que Angular possui
    um sistema prprio de injeo de dependncias baseado em

    nomes de parmetros. Utilizaremos este sistema com mais afinco at


    o final do curso.
    O objeto $scope, como qualquer outro objeto JavaScript, permite
    adicionar dinamicamente novas propriedades. Em nosso caso,
    adicionaremos a propriedade total com valor inicial 0.
    //js/HelloController.js

    function HelloController($scope) {
    $scope.total = 0;
    }

    Pronto! Visualizando mais uma vez, vemos que o valor 0 exibido,


    estando em perfeita sincronia com nosso modelo.

    A diretiva ng-click
    Falta implementar nosso boto. Queremos chamar a funo que
    incrementar a varivel total toda vez que nosso boto for clicado.
    Para isso existe a diretiva ng-click:
    <button ng-click="incrementar()">Clicar</button>

    Nela, indicamos que a funo incrementar() ser chamada. Mas


    onde ela chamar essa funo ? Em nosso controlador, j que ele o
    responsvel por esta parte do DOM:
    //js/HelloController.js

    function HelloController($scope) {
    $scope.total = 0;
    $scope.incrementar = function() {
    $scope.total++;
    };
    }

    Criamos a propriedade incrementar em $scope, que guarda nossa funo


    que incrementar o total(nosso modelo).

    Data binding: Sincronizando Model e View

    Visualizando mais uma vez, percebemos que cada clique altera nosso
    model. E o mais fantstico: nossa view atualizada sem nossa
    interveno.
    Angular sabe quando o model modificado e atualiza a view com
    base nesse novo valor. Podemos resumir este processo utilizando o
    termo data binding, a associao entre a view e o model.
    algo muito diferente de quando trabalhamos manipulando o DOM
    com jQuery, no qual, alm de atualizar nosso model, somos os
    responsveis ao sincroniz-lo com a view.
    Nossa view completa:
    <!-- hello/index.html -->
    <!doctype html>
    <html lang="pt" ng-app>
    <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    </head>
    <body ng-controller="HelloController">
    <button ng-click="incrementar()">Clicar</button>
    <label>Voc clicou: {{total}} veze(s)</label>

    <script src="js/angular.min.js"></script>
    <script src="js/HelloController.js"></script>
    </body>
    </html>

    Anda mungkin juga menyukai