Assunto 03 - Framework Angular - UA03 - Angular - Conceitos

Prévia do material em texto

<p>Framework Angular - UA03 - Angular</p><p>- Conceitos</p><p>Apresentação</p><p>Angular é uma estrutura de design de aplicativo e plataforma de desenvolvimento para a criação de</p><p>aplicativos de página única eficientes e sofisticados.</p><p>Angular é uma plataforma de desenvolvimento, construída em TypeScript. O Angular inclui:</p><p>Uma estrutura baseada em componentes para construir aplicativos web escalonáveis•</p><p>Bibliotecas integradas que cobrem uma ampla variedade de recursos, incluindo roteamento,</p><p>gerenciamento de formulários, comunicação cliente-servidor entre outros</p><p>•</p><p>Ferramentas para ajudá-lo a desenvolver, construir, testar e atualizar seu código•</p><p>Bons estudos.</p><p>Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:</p><p>Compreender o funcionamento do Framework Angular.•</p><p>Conhecer as maneiras de utilizar o Angular.•</p><p>Conhecer o CLI Angular.•</p><p>Infográfico</p><p>Conteúdo do livro</p><p>Realize a leitura do material abaixo para aprender sobre os assuntos discutidos nesta aula.</p><p>Boa leitura!</p><p>Angular - Conceitos</p><p>Angular é uma estrutura de design de aplicativo e plataforma de desenvolvimento</p><p>para a criação de aplicativos de página única eficientes e sofisticados.</p><p>Angular é uma plataforma de desenvolvimento, construída em TypeScript. O</p><p>Angular inclui:</p><p>● Uma estrutura baseada em componentes para construir aplicativos web</p><p>escalonáveis</p><p>● Bibliotecas integradas que cobrem uma ampla variedade de recursos,</p><p>incluindo roteamento, gerenciamento de formulários, comunicação</p><p>cliente-servidor entre outros</p><p>● Ferramentas para ajudá-lo a desenvolver, construir, testar e atualizar seu</p><p>código</p><p>O Angular foi projetado para tornar a atualização mais fácil possível, para que</p><p>possamos aproveitar as vantagens do desenvolvimentos com um mínimo de</p><p>esforço.</p><p>Conceito</p><p>Compreender os conceitos vai ajudá-lo a planejar e construir aplicativos de forma</p><p>mais eficiente.</p><p>1. Components</p><p>Os componentes são os blocos de construção que compõem um aplicativo. Um</p><p>componente inclui uma classe TypeScript com um decorador @Component(), um</p><p>modelo HTML e estilos. O decorador @Component() especifica as seguintes</p><p>informações do Angular:</p><p>● Um seletor CSS que define como o componente é usado em um modelo. Os</p><p>elementos HTML em seu modelo que correspondem a este seletor</p><p>tornam-se instâncias do componente.</p><p>● Um modelo HTML que informa para o Angular sobre como renderizar o</p><p>componente.</p><p>● Um conjunto opcional de estilos CSS que definem a aparência dos</p><p>elementos HTML do modelo.</p><p>O código a seguir é um componente angular mínimo.</p><p>import { Component } from '@angular/core';</p><p>@Component({</p><p>selector: 'hello-world',</p><p>template: '<h2>Olá mundo</h2></p><p><p>Este é meu primeiro componente!</p>',</p><p>})</p><p>export class HelloWorldComponent {</p><p>// códigos para o comportamento do componente</p><p>}</p><p>Para usar este componente, você escreve o seguinte em um modelo:</p><p><hello-world></hello-world></p><p>Quando o Angular renderiza esse componente, o seguinte do DOM é gerado:</p><p><hello-world></p><p><h2>Olá mundo</h2></p><p><p>Este é meu primeiro componente!</p></p><p></hello-world></p><p>2. Templates</p><p>Cada componente possui um template (modelo) HTML que declara como aquele</p><p>componente é renderizado. Podemos definir o modelo embutido ou por um</p><p>caminho de arquivo.</p><p>Com uma sintaxe adicional do Angular é possível inserir valores dinâmicos nos</p><p>componentes. O Angular atualiza automaticamente o DOM renderizado quando o</p><p>estado do seu componente muda.</p><p>O exemplo a seguir mostra uma aplicação com texto dinâmico.</p><p><p>{{ message }}</p></p><p>O valor da mensagem vem da classe do componente:</p><p>import { Component } from '@angular/core';</p><p>@Component ({</p><p>selector: 'hello-world-interpolation',</p><p>templateUrl: './hello-world-interpolation.component.html'</p><p>})</p><p>export class HelloWorldInterpolationComponent {</p><p>message = 'Olá!';</p><p>}</p><p>Quando o aplicativo carrega o componente e seu modelo, o usuário vê o seguinte:</p><p><p>Olá!</p></p><p>Observe o uso das chaves duplas - elas orientam o Angular a interpolar o conteúdo</p><p>dentro delas.</p><p>3. Dependency injection</p><p>A injeção de dependência permite declarar as dependências das classes</p><p>TypeScript sem se preocupar com a instanciação, uma vez que o Angular trata da</p><p>instanciação. Este padrão de design permite que se escreva um código mais</p><p>testável e flexível.</p><p>Para ilustrar como a injeção de dependência funciona, considere o exemplo a</p><p>seguir.</p><p>O primeiro arquivo logger.service.ts, define a classe Logger. Esta classe contém</p><p>uma função writeCount que registra um número no console.</p><p>import { Injectable } from '@angular/core';</p><p>@Injectable({providedIn: 'root'})</p><p>export class Logger {</p><p>writeCount(count: number) {</p><p>console.warn(count);</p><p>}</p><p>}</p><p>Em seguida, o arquivo hello-world-di.component.ts define um componente angular</p><p>contendo um botão que usa a função writeCount da classe Logger.</p><p>Para acessar essa função, o serviço Logger é injetado na classe HelloWorldDI</p><p>adicionando private logger: Logger no construtor.</p><p>import { Component } from '@angular/core';</p><p>import { Logger } from '../logger.service';</p><p>@Component({</p><p>selector: 'hello-world-di',</p><p>templateUrl: './hello-world-di.component.html'</p><p>})</p><p>export class HelloWorldDependencyInjectionComponent {</p><p>count = 0;</p><p>constructor(private logger: Logger) {</p><p>}</p><p>onLogMe() {</p><p>this.logger.writeCount(this.count);</p><p>this.count++;</p><p>}</p><p>}</p><p>CLI Angular</p><p>O Angular CLI é a maneira mais rápida e fácil de desenvolver aplicativos Angular</p><p>facilitando várias tarefas, veja alguns exemplos:</p><p>ng build Compila um aplicativo Angular em uma pasta de saída.</p><p>ng serve Constrói e atende ao seu aplicativo, reconstruindo as alterações</p><p>do arquivo.</p><p>ng generate Gera ou modifica arquivos com base em um esquema.</p><p>ng test Executa testes de unidade em um determinado projeto.</p><p>ng e2e Constrói e fornece um aplicativo Angular e, em seguida, executa</p><p>testes de ponta a ponta</p><p>Bibliotecas</p><p>Muitos benefícios do Angular realmente se tornam aparentes à medida que o</p><p>aplicativo cresce e temos a necessidade de adicionar funções, como navegação no</p><p>site ou entrada do usuário. É quando podemos aproveitar a plataforma Angular</p><p>para incorporar uma das muitas bibliotecas primárias que o Angular oferece.</p><p>Algumas das bibliotecas disponíveis:</p><p>Angular</p><p>Router</p><p>Navegação avançada do lado do cliente e roteamento com base</p><p>em componentes angulares. Suporta carregamento lento, rotas</p><p>aninhadas, correspondência de caminho personalizado e muito</p><p>mais.</p><p>Angular</p><p>Forms</p><p>Sistema uniforme de participação e validação de formulários.</p><p>Angular</p><p>HttpClient</p><p>Cliente HTTP robusto que pode impulsionar a comunicação</p><p>cliente-servidor mais avançada.</p><p>Angular</p><p>Animations</p><p>Sistema rico para conduzir animações com base no estado do</p><p>aplicativo.</p><p>Angular PWA Ferramentas para a construção de Progressive Web Applications</p><p>(PWAs), incluindo um service worker e manifesto do Web app.</p><p>Angular</p><p>Schematics</p><p>Ferramentas automatizadas de scaffolding, refatoração e</p><p>atualização que simplificam o desenvolvimento em grande</p><p>escala.</p><p>Essas bibliotecas expandem a funcionalidade do aplicativo e, ao mesmo tempo,</p><p>permitem que se concentre mais nos recursos que tornam seu aplicativo único.</p><p>Elas foram projetadas para se integrar perfeitamente e atualizar simultaneamente</p><p>com a estrutura Angular.</p><p>Exercícios</p><p>1)</p><p>Sobre o Angular CLI</p><p>A) é a maneira mais rápida e fácil de desenvolver pois facilita várias tarefas</p><p>B) é uma estrutura baseada em componentes para construir aplicativos web escalonáveis</p><p>C) são os blocos de construção que compõem um aplicativo</p><p>D) permite declarar as dependências das classes TypeScript sem se preocupar com a</p><p>instanciação</p><p>E) Sistema uniforme de participação e validação de formulários</p><p>2)</p><p>Assinale a alternativa Incorreta:</p><p>A) Angular é um framework para desenvolvimento de aplicativos web criado por uma equipe do</p><p>Google e utiliza a linguagem TypeScript da Microsoft.</p><p>B) Os componentes são blocos de construção que compõem um aplicativo, eles incluem uma</p><p>classe TypeScript com um decorador @Component(), um modelo HTML e os estilos CSS não</p><p>são suportados nos componentes.</p><p>C) O template HTML declara como aquele componente é renderizado e pode ser definido</p><p>no</p><p>modelo embutido ou por um caminho de arquivo.</p><p>D) A injeção de dependência permite declarar as dependências das classes TypeScript sem se</p><p>preocupar com a instanciação, uma vez que o Angular trata da instanciação.</p><p>E) O decorador @Component() especifica informações de um componente.</p><p>3)</p><p>O Angular possui um sistema de navegação avançada do lado do cliente e roteamento com</p><p>base em componentes angulares. Suporta carregamento lento, rotas aninhadas,</p><p>correspondência de caminho personalizado e muito mais. Para trabalhar com esse sistema</p><p>utilizamos a seguinte biblioteca.</p><p>A) Angular Forms</p><p>B) Angular HttpClient</p><p>C) Angular PWA</p><p>D) Angular Router</p><p>E) Angular Animations</p><p>4)</p><p>Qual o item abaixo é necessário instalar para o desenvolvimento de aplicações Web</p><p>utilizando o Angular?</p><p>A) Node.js, Angular CLI e Javascript</p><p>B) Node.js, Angular CLI e TypeScript</p><p>C) Node.js e Angular CLI</p><p>D) Angular CLI e React</p><p>E) Angular CLI e Vue.js</p><p>5)</p><p>O Angular CLI é a maneira mais rápida e fácil de desenvolver aplicativos Angular pois facilita</p><p>várias tarefas. Qual é o comando do Angular CLI que gera ou modifica arquivos com base em</p><p>um esquema?</p><p>A) ng build</p><p>B) ng e2e</p><p>C) ng test</p><p>D) ng serve</p><p>E) ng generate</p>