GitHub - daniel-oliv3/Angular-js-basic: AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. A biblioteca lê o HTML que contém atributos especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis JavaScript podem ser setadas manualmente, ou via um recurso JSON estático ou dinâmico.

daniel-oliv3 / Angular-js-basic Public

Notifications You must be signed in to change notification settings
Fork 0
Star 2

AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativo…

2 stars 0 forks Branches Tags Activity

Notifications

Name	Name	Last commit message	Last commit date
Latest commit History 118 Commits
primeiro_projeto	primeiro_projeto
webapp-002	webapp-002
webapp-003	webapp-003
webapp-004	webapp-004
webapp-005	webapp-005
webapp-006	webapp-006
webapp-007	webapp-007
webapp-008	webapp-008
webapp-009	webapp-009
webapp-010	webapp-010
webapp-011	webapp-011
webapp-012	webapp-012
webapp-013	webapp-013
webapp-014	webapp-014
webapp-015	webapp-015
webapp-016	webapp-016
webapp-017	webapp-017
webapp-018	webapp-018
webapp-019	webapp-019
webapp-020	webapp-020
webapp-021	webapp-021
webapp-022	webapp-022
webapp-023	webapp-023
webapp-024	webapp-024
webapp-025	webapp-025
webapp-026	webapp-026
webapp-027	webapp-027
webapp-028	webapp-028
webapp-029	webapp-029
webapp-030	webapp-030
webapp-031	webapp-031
webapp-032	webapp-032
webapp-033	webapp-033
webapp-034	webapp-034
README.md	README.md

Repository files navigation

Requisitos necessários:

Conhecimentos sólidos de HTML5 e CSS3.
Bons conhecimentos de JavaScript/TypeScript.
NodeJs (NPM) e Angular CLI.
Editor de código: Visual Studio Code.
Browser: Google Chrome.

Breve resumo histórico.

AngularJs != Angular2 & Angular4.
AngularJs (AngularJs 1.x) surge em outubro de 2010.
Angular 2 anunciado em setembro de 2014. Versão final em setembro de 2016.
Angular 4, Versão final, em março de 2017.
Está prevista a versão 5 para final de outubro de 2017.
etc.. atualmente na versão 12, O angular 12, foi lançado em 12 de maio de 2021.
link com as versões completa - https://pt.wikipedia.org/wiki/Angular_(framework)
link2 - https://pt.wikipedia.org/wiki/AngularJS

O que é o Angular?

É um framework para criação de aplicações web, mobile e desktop.
É desenvolvida pela Google e é multiplataforma.
Recorre ao uso de HTML e JavaScript/TypeScript.
Está intimamente relacionada com a criação de SPAs, PWAs, ...
Permite criar aplicações mobile (Ionic, NativeScript, React Native, ...)...
Permite criar aplicações desktop multiplataforma.
Geração automática de código (CLI - command line interface).
Forte solução de visualização para aplicações com lógica no servidor.
É uma framework direcionada para a vertente do cliente.

O que vamos fazer?

Instalar o editor de código - Visual Studio Code.
Instalar o NodeJs para ter acesso ao NPM.
Instalar o Angular CLI.
Instalar globalmente a framework.
Criar o nosso primeiro projeto.

Instalações Essências.

Visual Studio Code - https://code.visualstudio.com/
NodeJs - https://nodejs.org/en/
AngularJs - https://angular.io/cli

Comandos para a criação do projeto.

npm install -g @angular/cli

3 - Criação do primeiro projeto de Angular.

cd Angular-js-basic
ng new primeiro_projeto

Rodar o projeto.

ng serve

4 - Breve análise sobre a forma como o Angular funciona.

Extensões no vs-code
vscode-icons

5 - Criando o nosso primeiro Component.

Ex webapp-002

6 - Exercício prático de criação de Components.

1. Remover o componente do exercício anterior.
1. Adicionar dois novos componentes (area1 e area2).
1. Colocar esses dois componentes visíveis na aplicação.
Bónus. No componente area2, criar ficheiro de CSS com formatação
de um Div com cor amarela de background e padding de 20px.
Ex webapp-002

7 - Criar Components com a CLI.

Ex webapp-003
ng generate component my_component

Outra forma

ng g c my_component

8 - Nesting Components e Component Templates.

Ex webapp-004 via cdn
ng generate component socio
ng generate component clube

9 - Utilizar o Bootstrap no Angular.

Ex webapp-005 - por CDN
Site do Bootstrap - https://getbootstrap.com/docs/5.1/getting-started/introduction/
Ex webapp-006 - Por Downloads
Downloads - https://getbootstrap.com/docs/5.1/getting-started/download/
Ex webapp-007 - Por CLI Bootstrap
npm install --save bootstrap
acrescentar trecho de codigo no arquivo angular.json abaixo de styles.
"../node_modules/bootstrap/dist/css/bootstrap.min.css",

10 - Utilização de CSS nos Components.

Ex webapp-008 + Bootstrap + css
Ex webapp-009 + Bootstrap + css

11 - Uma atenção especial ao elemento Selector.

Ex webapp-010
selector: 'app-root', -> Cria um elemento novo no HTML
selector: '[app-root]', -> Cria um novo no atributo para adicionar ao HTML
Ex webapp-011
selector: '.app-root', -> Cria um componente que funciona como uma classe

12 - Databinding String Interpolation.

Ex webapp-012

13 - Databinding Property binding.

Ex webapp-013

14 - Databinding Event binding.

Ex webapp-014

HTML Events List

Global Event Attributes
Site - https://www.w3schools.com/tags/ref_eventattributes.asp

15 - Exercício prático de Databinding.

Criar três botões, 1* ativa e inativa, 2* altera o texto dos botões para "..."
3* colocar o texto original nos botões.
Ex webapp-015

16 - Event binding e o $event.

Ex webapp-016

17 - Event binding e o $event - parte 2.

Ex webapp-017

18 - Databinding nos dois sentidos.

Ex webapp-018

19 - Introdução às Directives.

O que é uma Directive?

São instruções inseridas dentro da DOM.
Components são casos específicos de uma Directive.
Podemos usar Directives existentes ou construir as nossas.
Uma Directive é uma classe com decorator @Directive.

Existem outros dois tipos de Directives:

Structural Directives - Alteram o layout da DOM, adicionando, removendo ou substituindo elementos.
Attribute Directives - Alteram o aspecto e comportamento de elementos existente.
Ex webapp-019

20 - Directive ngIf com uma condição Else.

Ex webapp-020

21 - Attribute Directive ngStyle.

Ex webapp-021
Ex webapp-022

22 - Attribute Directive ngClass.

Ex webapp-023

23 - Structure Directive ngFor.

Ex webapp-024
Ex webapp-025
Ex webapp-026

24 - Exercício micro loja parte 1.

Criação do projeto.
ng new webapp-027
Roda o projeto.
ng serve
Instalando o Bootstrap no projeto.
npm install --save bootstrap
acrescentar trecho de codigo no arquivo angular.json abaixo de styles.
"../node_modules/bootstrap/dist/css/bootstrap.min.css",

25 - Exercício micro loja parte 2.

Ex webapp-027
Criação de um Components
ng g c loja
ng g c stock

27 - Exercício micro loja parte 4.

Ex webapp-027

28 - Exercício micro loja parte 5 (final).

Ex webapp-027 ...

29 - Exercício de adição de um Model.

Ex webapp-028 ...

30 - Dados de parent component para child component @Input.

Ex webapp-029 ...

31 - Usando um Alias no @Input.

Ex webapp-030

32 - Custom Events Binding.

Ex webapp-031
ng g c meu --spec false

33 - Custom Events Binding comunicando valores.

Ex webapp-032

34 - Jogo matemático com Angular - parte 1/2.

Ex webapp-033
ng g c jogo --spec false

35 - Jogo matemático com Angular - parte 2/2.

Ex webapp-034 - completo

About

AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativo…

Report repository

Releases

No releases published

Packages

No packages published

Languages