Como trabalhar com AngularJS — O Guia Absolutamente Completo
Tags: webdev, angular
Published: 2018-11-05 20:00:44

---
title: Como trabalhar com AngularJS — O Guia Absolutamente Completo
published: true
tags: webdev,angularjs
canonical_url: https://eusoudev.com.br/trabalhar-com-angularjs/
---

Tempo de leitura:<small> 9 minutos</small>

 <section>
<div>
<div>
<p><a href="//app.vulpi.com.br/dev?utm_source=blog&amp;utm_medium=eu_sou_dev" target="_blank" rel="noopener"><img src="https://www.eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor.jpg" alt="diferença entre profissoes" width="1200" height="300" srcset="//eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor.jpg 1200w, //eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor-300x75.jpg 300w, //eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor-768x192.jpg 768w, //eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor-1024x256.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px"></a></p>
<p id="684a"><strong style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.60181rem;">Motivação</strong></p>
<p><span style="font-size: 1rem;">Existem diversos </span><em style="font-size: 1rem;">frameworks</em><span style="font-size: 1rem;"> de JavaScript atualmente. Então porque você deveria trabalhar com AngularJS ao invés dos outros?</span></p>
</div>
</div>
</section><section>
<div>
<div>
<h2 id="6062"><strong>Modularização</strong></h2>
<p id="e270">A modularização facilita o desenvolvimento, a configuração e principalmente, os testes da sua aplicação. O AngularJS vem com um mecanismo de <a href="https://docs.angularjs.org/guide/di" target="_blank" rel="nofollow noopener" data-href="//docs.angularjs.org/guide/di">Injeção de Dependências</a> <em>built-in</em>, por exemplo, que transforma a tarefa de dividir a sua aplicação em pequenos módulos em algo trivial.</p>
<h2 id="649e"><strong>Two-way Data Binding</strong></h2>
<p id="60be">Uma das <em>features</em> mais polêmicas do AngularJS é o <a href="https://docs.angularjs.org/guide/databinding" target="_blank" rel="nofollow noopener" data-href="//docs.angularjs.org/guide/databinding"><em>Two-way Data Binding</em></a>. Apesar de ser muito útil e um dos grandes fatores para o sucesso do <em>framework</em> no começo, ela pode apresentar problemas de perfomance caso não seja usada corretamente.</p>
<h2 id="de35"><strong>Extensibilidade</strong></h2>
<p id="92ea">Estender o HTML com o AngularJS, usando <a href="https://docs.angularjs.org/guide/directive" target="_blank" rel="nofollow noopener" data-href="//docs.angularjs.org/guide/directive">diretivas</a>, é a <em>feature</em> mais incrível do <em>framework</em>. Diretivas são poderosas ferramentas para modificar e manipular o <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" target="_blank" rel="nofollow noopener" data-href="//developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>, além de ter a facilidade de reuso em toda a aplicação.</p>
<p><strong style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.60181rem;">Ferramentas</strong></p>
</div>
</div>
</section><section>
<div>
<div>
<h4 id="26da">Sublime Text</h4>
<h4><img style="font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*oyx6CUkqIBg-b0BzKiBJrQ.jpeg" data-src="//cdn-images-1.medium.com/max/800/1*oyx6CUkqIBg-b0BzKiBJrQ.jpeg"></h4>
<h4>O editor mais usado para desenvolver aplicações com AngularJS continua sendo o <a href="http://www.sublimetext.com/" target="_blank" rel="nofollow noopener" data-href="//www.sublimetext.com/"><em>Sublime Text</em></a>. Além de ser bem leve e fácil de usar, ele possui um <a href="http://weblogs.asp.net/dwahlin/using-the-angularjs-package-for-sublime-text" target="_blank" rel="nofollow noopener" data-href="//weblogs.asp.net/dwahlin/using-the-angularjs-package-for-sublime-text"><em>package (plugin)</em></a> específico para o <a href="//www.eusoudev.com.br/dot-net-core/" target="_blank" rel="noopener">AngularJS</a>.</h4>
<h4 id="ebe9">Jasmine</h4>
<h4><img style="font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*Y1ad7En1PdmQd9Wkd5_6yw.jpeg" data-src="//cdn-images-1.medium.com/max/800/1*Y1ad7En1PdmQd9Wkd5_6yw.jpeg"></h4>
<h4>O <a href="http://jasmine.github.io/" target="_blank" rel="nofollow noopener" data-href="//jasmine.github.io/"><em>Jasmine</em></a> foi desenvolvido para ser usado em <a href="http://blog.concretesolutions.com.br/tag/bdd/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/tag/bdd/">BDD</a> (<em>behavior-driven development</em>), porém ele geralmente é usado em AngularJS para testes unitários e <a href="//www.eusoudev.com.br/tdd/" target="_blank" rel="noopener">TDD (<em>test-driven development</em>)</a>.</h4>
<h4 id="bdc0">Karma</h4>
<h4><img style="font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*9OWIvsf4KtTDYxWMaCqEBQ.png" data-src="//cdn-images-1.medium.com/max/800/1*9OWIvsf4KtTDYxWMaCqEBQ.png"></h4>
<h4>
<a href="http://karma-runner.github.io/0.12/index.html" target="_blank" rel="nofollow noopener" data-href="//karma-runner.github.io/0.12/index.html"><em>Karma</em></a> é um <em>test runner</em> feito para o AngularJS (apesar de atualmente você poder usá-lo com outros <em>frameworks</em> <a href="//www.eusoudev.com.br/javascript/" target="_blank" rel="noopener">JavaScript</a>). O principal objetivo do <em>Karma</em> é automatizar os testes em diversos <em>browsers</em> com um simples comando. Uma das vantagens é que ele suporta diversos tipos de testes, como: unitários, integração e <em>E2E</em>.</h4>
<h4 id="a621">Bower</h4>
<h4><img style="font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*53qsDTrrbBj8ODDOTYtJDw.jpeg" data-src="//cdn-images-1.medium.com/max/800/1*53qsDTrrbBj8ODDOTYtJDw.jpeg"></h4>
<h4>O <a href="http://bower.io/" target="_blank" rel="nofollow noopener" data-href="//bower.io/"><em>Bower</em></a>, criado como um projeto <em>Open-Source</em> do <em>Twitter</em>, foi desenvolvido para facilitar o uso de bibliotecas e pacotes em um projeto <em>web</em>. É possível inclusive, <a href="http://briantford.com/blog/angular-bower" target="_blank" rel="nofollow noopener" data-href="//briantford.com/blog/angular-bower">desenvolver pacotes próprios e distribuí-los em diferentes projetos de forma fácil</a>.</h4>
<h4 id="23aa">Grunt</h4>
<h4><img style="font-family: 'Open Sans', Arial, sans-serif; font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*4HltHKq-_z31xiug0kr4dA.jpeg" data-src="//cdn-images-1.medium.com/max/800/1*4HltHKq-_z31xiug0kr4dA.jpeg"></h4>
<h4>Em diversas ocasiões, nós desenvolvedores, enfrentamos tarefas repetitivas que podem ser facilmente automatizadas. É aí que entra o <a href="http://gruntjs.com/" target="_blank" rel="nofollow noopener" data-href="//gruntjs.com/"><em>Grunt</em></a>. Ele é usado para: <a href="https://www.jetbrains.com/webstorm/help/minifying-javascript.html" target="_blank" rel="nofollow noopener" data-href="//www.jetbrains.com/webstorm/help/minifying-javascript.html">minificação</a>, <a href="http://www.jslint.com/" target="_blank" rel="nofollow noopener" data-href="//www.jslint.com/"><em>linting</em> de JavaScript</a> e <a href="http://www.sitepoint.com/writing-awesome-build-script-grunt/" target="_blank" rel="nofollow noopener" data-href="//www.sitepoint.com/writing-awesome-build-script-grunt/">geração de <em>builds</em></a><em>.</em>
</h4>
<p><strong style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.60181rem;">Exemplo de Aplicação</strong></p>
<p><span style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.125rem;">Setup</span></p>
</div>
</div>
</section><section>
<div>
<div>
<p id="51f0">Para começarmos a nosso <em>setup</em>, precisamos instalar o <em>Bower</em>. Assumindo que você já tem o NPM instalado, precisamos apenas de:</p>
<pre id="d4e8">$ npm install -g bower</pre>
<p id="91ec">Agora, crie uma pasta chamada <strong>app-exemplo</strong>, entre nela e crie um arquivo de configuração do <em>Bower</em>:</p>
<pre id="b9bc">$ mkdir app-exemplo
$ cd app-exemplo
$ bower init</pre>
<p id="767c">Aceite todos os <em>defaults</em> e o seu <em>bower.json</em> deverá estar próximo disso:</p>
<pre id="077b">/// bower.json</pre>
<pre id="5e29">{
  "name": "app-exemplo",
  "version": "0.0.0",
  "authors": [
    "Matheus Lima &lt;<a href="mailto:matheusml90@gmail.com" target="_blank" rel="nofollow noopener" data-href="mailto:matheusml90@gmail.com">matheusml90@gmail.com</a>&gt;"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}</pre>
<p id="a0bc">Agora, para instalar o <em>AngularJS</em>, devemos adicionar a dependência no <em>Bower</em>. E para isso basta digitar:</p>
<pre id="21ac">$ bower install --save angular</pre>
<p id="627d">Observe que foi criada uma pasta chamada <em>bower_components</em>. Nessa pasta estarão todas as dependências do <em>Bower</em>.<br>
Além disso, o arquivo <em>bower.json</em> foi automaticamente modificado. Ficando dessa forma:</p>
<pre id="481e">/// bower.json</pre>
<pre id="2e03">{
  "name": "app-exemplo",
  "version": "0.0.0",
  "authors": [
    "Matheus Lima &lt;<a href="mailto:matheusml90@gmail.com" target="_blank" rel="nofollow noopener" data-href="mailto:matheusml90@gmail.com">matheusml90@gmail.com</a>&gt;"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  <strong>"dependencies": {
    "angular": "~1.4.3"
  }</strong>
}</pre>
<p id="eb60">É altamente recomendável adicionar a pasta <em>bower_components</em> no<em> .gitignore</em>. Para fazermos isso, basta primeiramente criar o arquivo:</p>
<pre id="b06f">$ touch .gitignore</pre>
<p id="4774">E dentro do .<em>gitignore</em>, precisamos deixá-lo dessa forma:</p>
<pre id="a3e3">/// .gitignore</pre>
<pre id="0bdb">bower_components</pre>
<p id="6be7">Agora, falta criar o <em>index.html</em> da nossa aplicação:</p>
<pre id="5067">$ mkdir app
$ cd app
$ touch index.html</pre>
<p id="d6ec">E nele, importar o arquivo minificado do <em>AngularJS</em>, que veio do <em>Bower</em>, para que a aplicação possa funcionar.</p>
<pre id="a505">/// index.html</pre>
<pre id="3910">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;AngularJS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;AngularJS&lt;/h1&gt;
    <strong>&lt;script type="application/javascript" src="../bower_components/angular/angular.min.js"&gt;&lt;/script&gt;</strong>
  &lt;/body&gt;
&lt;/html&gt;</pre>
<p id="980c">Precisamos também de um servidor para rodar nossa aplicação e ver que nosso <em>index.html</em> funciona. Vamos usar o <em>http-server</em> que pode ser baixado pelo NPM:</p>
<pre id="2c7c">$ npm install -g http-server
$ cd ..
$ <strong>http-server</strong></pre>
<p id="9844">Agora, basta entrar em <a href="http://localhost:8080/" target="_blank" rel="noopener" data-href="//localhost:8080/">http://localhost:8080/</a> e devemos visualizar algo próximo disso:</p>
<p><img style="font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*fCElMHnOrSrReN2J9j6ozg.png" data-src="//cdn-images-1.medium.com/max/800/1*fCElMHnOrSrReN2J9j6ozg.png"></p>
<p id="857f">Para padronizar e facilitar o <em>start</em> e os testes da aplicação, precisamos configurar um <em>package.json</em> (que é utilizado pelo NPM):</p>
<pre id="8b41">$ npm init</pre>
<p id="5094">Aceite todos os defaults e ele deverá ficar semelhante a isso:</p>
<pre id="4bb6">///package.json</pre>
<pre id="fafb">{
  “name”: “app-exemplo”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
      “test”: “echo \”Error: no test specified\” &amp;&amp; exit 1"
   },
  “author”: “”,
  “license”: “ISC”
}</pre>
<p id="82e1">Para que possamos iniciar a aplicação com apenas um comando, vamos editar o arquivo adicionando apenas uma linha:</p>
<pre id="18d5">///package.json</pre>
<pre id="128b">{
  “name”: “app-exemplo”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
      <strong>"start": "http-server ./app -a localhost -p 8080"</strong>,
      “test”: “echo \”Error: no test specified\” &amp;&amp; exit 1"
   },
  “author”: “”,
  “license”: “ISC”
}</pre>
<p id="5552">Com essa modificação, podemos rodar a aplicação da seguinte forma:</p>
<pre id="607f">$ npm start</pre>
<p id="c0d3">E acessando <a href="http://localhost:8080/" target="_blank" rel="nofollow noopener" data-href="//localhost:8080/">http://localhost:8080/</a> você deverá ver isso:</p>
<pre><img style="font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*1taZ1ZySbOTedyT2ipj99Q.png" data-src="//cdn-images-1.medium.com/max/800/1*1taZ1ZySbOTedyT2ipj99Q.png">
                                   index.html</pre>
<h2 id="6f9f"><strong>Arquitetura</strong></h2>
<p id="0f13">Agora que fizemos o <em>setup</em> básico, podemos partir para o modelo de arquitetura de aplicações em AngularJS que usamos aqui na Concrete Solutions.</p>
<ol>
<li id="0b3f">Estrutura<br>
Todos nossos <em>Controllers</em>, <em>Services</em>, <em>Factories</em> e Diretivas seguem a mesma estrutura:</li>
</ol>
<pre id="b4b6"><strong>(function() {
    'use strict';</strong></pre>
<pre id="d12b"><strong> angular
        .module('app')
        .controller('AuthController', AuthController);
    
    function AuthController() {
        /* código */
    }</strong></pre>
<pre id="c3f3"><strong>})();</strong></pre>
<p id="9740">Se você não entendeu a primeira e a última linhas, esse padrão bem comum em projetos com JavaScript, é chamado de <strong>IIFE</strong>. Recomendo <a href="http://blog.concretesolutions.com.br/2014/12/funcoes-imediatas-javascript-iife/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/2014/12/funcoes-imediatas-javascript-iife/">esse post</a> para você entender todos os detalhes dele.<br>
Outro padrão bem comum que nós usamos é o <strong>‘use strict’</strong>, que serve resumidamente para <a href="https://msdn.microsoft.com/library/br230269%28v=vs.94%29.aspx" target="_blank" rel="nofollow noopener" data-href="//msdn.microsoft.com/library/br230269(v=vs.94).aspx">melhorar o processo de verificação de erros no código</a>.<br>
E por último, vale notar que nós usamos uma abordagem <em>Top-Down</em>, em que as declarações ficam na parte de cima do arquivo, e a implementação fica em baixo.</p>
<p id="ac00">2. Injeção de Dependências<br>
Nós usamos o método <strong>$inject</strong> para fazer <a href="https://msdn.microsoft.com/en-us/library/ff921152.aspx" target="_blank" rel="nofollow noopener" data-href="//msdn.microsoft.com/en-us/library/ff921152.aspx">DI</a>:</p>
<pre id="b793">(function() {
    'use strict';</pre>
<pre id="68e1"> angular
        .module('app')
        .controller('AuthController', AuthController);</pre>
<pre id="55d3"> <strong> AuthController.$inject = ['$location', 'AuthService'];
    
    function AuthController($location, AuthService) {
        </strong>/* código */<strong>
    }</strong></pre>
<pre id="9a2d">})();</pre>
<p id="dcb9">A grande vantagem é a facilidade na minificação de arquivos (visto que as dependências são trazidas como <em>Strings</em>).</p>
<p id="1c7d">3. Controllers</p>
<pre id="98c5"><strong>function AuthController($location, AuthService) {
    var vm = this;</strong></pre>
<pre id="562f"><strong> vm.login = login;</strong></pre>
<pre id="1f72"><strong> function login(email, password) {
        AuthService.login(email, password).then(function() {
            $location.path('/');
        });
    }
}</strong></pre>
<p id="ccee">Tentamos manter os <em>Controllers</em> o mais <em>lean</em> possível, com pouca lógica, e seguindo o <a href="https://www.youtube.com/watch?v=Gt0M_OHKhQE" target="_blank" rel="nofollow noopener" data-href="//www.youtube.com/watch?v=Gt0M_OHKhQE">Single Responsability Principle</a>. Dessa forma eles ficam mais fáceis de manter, ler e testar.<br>
Usamos também o padrão do <strong>ControllerAs</strong> com a variável <strong>vm</strong>, <a href="http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/" target="_blank" rel="nofollow noopener" data-href="//www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/">proposta pelo John Papa</a>. Uma das vantagens é a não necessidade de se importar o <strong>$scope</strong>nos <em>Controllers</em>.</p>
<p id="0d13">4. Comunicação com o Back-End<br>
Preferimos encapsular chamadas <strong>$http</strong> em <em>Services</em>:</p>
<pre id="52da"><strong>function AuthService($http) {
    this.login = function(email, password) {
        var request = {
            username: email,
            password: password
        };
        return $http.post(url, request);
    };
}</strong></pre>
<p id="1b6f">Um dos focos dessa abordagem é o <a href="https://en.wikipedia.org/wiki/Separation_of_concerns" target="_blank" rel="nofollow noopener" data-href="//en.wikipedia.org/wiki/Separation_of_concerns">Separation of Concerns</a>. Ou seja, não é responsabilidade dos <em>Controllers</em> lidar com a lógica da comunicação com o <em>Back-End </em>e sim de um serviço feito apenas para lidar com isso<em>.</em></p>
<p id="9278">5. Factory<br>
Uma das formas de se compartilhar dados numa aplicação com AngularJS é feita com o uso das <em>Factories</em>. Como elas são <a href="http://www.oodesign.com/singleton-pattern.html" target="_blank" rel="nofollow noopener" data-href="//www.oodesign.com/singleton-pattern.html">singletons</a>, os dados não se perdem na mudança de contexto. Um bom caso de uso é a criação de uma <em>Session</em>:</p>
<pre id="d9bd"><strong>function Session($cookieStore) {
    return {
        create: create,
        destroy: destroy,
        isAuthenticated: isAuthenticated
    };
    
    function create(id) {
        $cookieStore.put('session', id);
    }</strong></pre>
<pre id="1ed4"><strong> function destroy() {
        $cookieStore.remove('session');
    }</strong></pre>
<pre id="ba2b"><strong> function isAuthenticated() {
        !!$cookieStore.get('session');
    }
}</strong></pre>
<p id="29ff">Nesse exemplo mostrado, podemos acessar de qualquer <em>Controller</em> a sessão do usuário e verificar se ele está autenticado ou não.<br>
Uma dúvida recorrente é a diferença entre <em>Factories</em> e <em>Services</em> que eu expliquei anteriormente nesse <a href="http://blog.concretesolutions.com.br/2015/03/angularjs-quando-usar-service-e-factory/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/2015/03/angularjs-quando-usar-service-e-factory/">post aqui</a>.</p>
<p id="03db">6. Diretivas<br>
Assim como <em>Controllers</em>, as Diretivas devem ser desenvolvidas com o <a href="https://www.youtube.com/watch?v=Gt0M_OHKhQE" target="_blank" rel="nofollow noopener" data-href="//www.youtube.com/watch?v=Gt0M_OHKhQE">Single Responsability Principle</a> em mente. Se uma Diretiva resolve múltiplos problemas ao mesmo tempo, ela dificilmente será reaproveitada e perderá todo sentido de existir (que é justamente o reuso).<br>
O exemplo abaixo mostra uma Diretiva que dá foco a um <em>input</em>:</p>
<pre id="2cd8"><strong>function NgFocus($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $timeout(function() {
                element[0].focus();
            }, 0);
        }
    };
}</strong></pre>
<p id="6be8">Nota-se que a Diretiva em questão tem apenas um objetivo. Se ela além de dar foco ao <em>input</em>, tivesse que adicionar a cor verde no <em>background</em> do mesmo, ela certamente perderia o reuso na maioria dos casos.<br>
Um bom post sobre Diretivas é <a href="http://toddmotto.com/killing-it-with-angular-directives-structure-and-mvvm/" target="_blank" rel="nofollow noopener" data-href="//toddmotto.com/killing-it-with-angular-directives-structure-and-mvvm/">esse aqui</a> do Todd Motto.</p>
<p><strong style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.60181rem;">Continuous Delivery</strong></p>
<p><span style="font-size: 1rem;">É comum investirmos alguns </span><em style="font-size: 1rem;">sprints</em><span style="font-size: 1rem;"> no início dos projetos para arquitetar a infraestrutura que dará suporte aos desenvolvedores da primeira linha de código até a última. Isso significa montar e estruturar a </span><a style="background-color: white; font-size: 1rem;" href="http://blog.concretesolutions.com.br/2014/02/integracao-e-deployment-continuos-como-motor-de-metodos-ageis/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/2014/02/integracao-e-deployment-continuos-como-motor-de-metodos-ageis/">integração contínua</a><span style="font-size: 1rem;">, o </span><a style="background-color: white; font-size: 1rem;" href="http://blog.concretesolutions.com.br/2014/02/integracao-e-deployment-continuos-como-motor-de-metodos-ageis/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/2014/02/integracao-e-deployment-continuos-como-motor-de-metodos-ageis/">deployment contínuo</a><span style="font-size: 1rem;"> e automatizar os processos de desenvolvimento e suporte. As principais vantagens do </span><em style="font-size: 1rem;">Continuous Delivery</em><span style="font-size: 1rem;"> são:</span></p>
</div>
</div>
</section><section>
<div>
<div>
<ul>
<li id="03a2">Aumento da transparência</li>
<li id="0579">Aumento do <em>feedback</em>
</li>
<li id="093e">Releases frequentes</li>
<li id="c66f">Maior confiança em cada entrega.</li>
<li id="fa0b">Desenvolvedores podem focar mais na qualidade do código e menos em <em>builds</em> e <em>deploys</em>.</li>
</ul>
<p id="c201">Para automatizar nosso processo de <a href="http://blog.concretesolutions.com.br/tag/integracao-continua/" target="_blank" rel="nofollow noopener" data-href="//blog.concretesolutions.com.br/tag/integracao-continua/">CI</a>, escolhemos o <a href="http://jenkins-ci.org/" target="_blank" rel="nofollow noopener" data-href="//jenkins-ci.org/"><em>Jenkins</em></a> como ferramenta. Primeiro deve-se decidir o que o <em>Jenkins</em> deve fazer no processo de <em>deployment</em>, que podem ser resumidos em 6 comandos<em>:</em></p>
<pre id="abed">$ npm install grunt -g
$ npm install bower -g
$ npm install
$ bower install
$ npm test
$ grunt dev</pre>
<ol>
<li id="0bef">Instalar o <em>Grunt</em>
</li>
<li id="fc19">Instalar o <em>Bower</em>
</li>
<li id="f713">Instalar todos os <em>packages</em> do NPM</li>
<li id="430e">Instalar todos os <em>packages</em> do <em>Bower</em>
</li>
<li id="730f">Rodar os testes usando o <em>Karma</em>
</li>
<li id="5dd5">Gerar o <em>Build</em> usando o <em>Grunt</em>
</li>
</ol>
<p id="177c">Após esse procedimento, o <em>Jenkins</em> gera um relatório de cobertura de testes (que pode ser configurado pelo <em>Karma</em> <a href="https://github.com/karma-runner/karma-coverage" target="_blank" rel="nofollow noopener" data-href="//github.com/karma-runner/karma-coverage">dessa forma</a>):</p>
<pre><img style="font-size: 1rem;" src="https://cdn-images-1.medium.com/max/800/1*s3uuZO8FLvSyntounxAjSg.png" data-src="//cdn-images-1.medium.com/max/800/1*s3uuZO8FLvSyntounxAjSg.png">
                     Cobertura de testes gerado pelo Jenkins</pre>
<p id="685c">Esse relatório tem grande utilidade para os <em>Tech Leads</em> para verificar a qualidade do código durante todo o andamento do projeto.</p>
<p><strong style="font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.60181rem;">Conclusão</strong></p>
<p><span style="font-size: 1rem;">Para quem ainda possuir mais dúvidas de como trabalhar com AngularJS, uma boa dica é a minha série sobre AngularJS no YouTube, que vai dos primeiros passos até a construção de diretivas avançadas: </span></p>
</div>
</div>
</section><section>
<div>
<div>
<p><iframe width="1075" height="806" src="https://www.youtube.com/embed/iiMM6q1JZ50?feature=oembed&amp;enablejsapi=1&amp;origin=https://www.eusoudev.com.br" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
</div>
</div>
</section>

The post [Como trabalhar com AngularJS — O Guia Absolutamente Completo](//eusoudev.com.br/trabalhar-com-angularjs/) appeared first on [Eu Sou Dev](//eusoudev.com.br).