camila-github / projeto-angular-cli-nodejs Goto Github PK

Link de referencia: https://cli.angular.io/

Comando para instalar o angular: $npm install -g @angular/cli

Comando para verificar versao do angular apos instalacao: $ng version

Para criar novo projeto angular, execute o comando abaixo. Será criado a estrutura de pastas padrão do angular: $ng new 'nome-do-projeto'

Depois terá tres perguntas:

Pergunta1: Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/strict $A primeira escolhi 'y'

Pergunta2: Would you like to add Angular routing? $A segunda escolhi 'n' para nao criar a rota. No projeto a rota foi criada posteriormente.

Pergunta3: Which stylesheet format would you like to use? $A terceira escolhi 'CSS'

Para iniciar o projeto informe o comando abaixo. Detalhe: Enquanto estiver codificando o codigo, para visualizar as alterações no navegador, necessario que o servidor do angular esteja iniciado com o comando abaixo. $ng serve

Por padrão o angular utiliza a porta 4200, acesse o endereço abaixo para verificar a pagina inicial. Nessa pagina inicial é possivel acessar a documentação do angular. http://localhost:4200/

Criação de modulos e componentes.

Uso do 'Two-way Data Binding', no campo pesquisar. No codigo utiliza os colchetes e parenteses [()], para envio dos dados em mao dupla, ou seja, é quando quer exibir e alterar o valor da propriedade, de forma que irá se propagar todas as referencias dessa variavel.

Injeção De Dependência.

Utilização de Pipes para alterar os valores dos campos ( | ).

Criação de Rotas para navegar entre os componentes.

Criaçao de templates.

Utilização de Formularios, Variaveis de Templates (representado com simbolo #).

ngClass - para criação de classes dinamicas.

ng-model: vincula o valor dos controles html (input, select, textarea) aos dados do aplicativo, ou seja, com ng-model é possivel vincular o valor de um campo de entrada a uma variavel criada no Angular.

Construir um serviço.

Recuperar Requisições em HTTP com NodeJS + Express (BackEnd). Fora da pasta do projeto foi criado uma pasta de nome 'server', e dentro dessa pasta foi criado uma outra pasta com o nome 'course-manager-server'. O intuito de criar esse diretorio, foi para separar o servidor backend nodejs, do projeto principal. (' .\servers\course-manager-server ') . Dentro da pasta 'course-manager-server', foi criado o arquivo 'server.js' e dentro do arquivo, foi criado as rotas para fazer as requisições de back-end. E ainda dentro dessa mesma pasta 'course-manager-server' foi criado o arquivo 'package.json', e adicionado os comandos abaixo:

Dentro da pasta do backend, (' .\servers\course-manager-server '), execute o comando abaixo, para instalar as dependecias do backend. Detalhe: as dependencias serão instaladas de acordo com o que consta no arquivo 'package.json', que esta dentro do novo diretorio que foi criado ('.\servers\course-manager-server'). $npm install

Para iniciar o servidor backend do nodejs, utilize o comando abaixo. Deverá aparecer uma mensagem de 'Server Starded!' . Detalhe: Nao foi utilizado banco de dados, para testes, foi utilizado o nodejs, para simular as requisições http (put, post, get, delete). As requisições http apenas funcionará se o servidor BackEnd NodeJs estiver iniciado. Quando o servidor BackEnd for desativado, as alterações que foram realizadas no site serão descartadas. $node serve.js

Uso do RXJS Observable: O Observable é uma funcionalidade da biblioteca do rxjs, que é instalada quando se cria uma nova aplicação do angular. Com seu uso, é possivel lidar com transferencia de dados assincrona, algo que em muitas vezes é semelhante as Promisses do Javascript.

Segregrando Aplicação em Modulos: Utilizado o forChild: O forChild é utilizado em modulos filhos. Isso diferencia do modulo Pai, que no projeto, o arquivo pai, é o arquivo 'app.module.ts'

Criado Pasta Shared: Nessa pasta foi armazenada os componentes pequenos e genericos, que podem ser compartilhados com outros modulos.

Criado Pasta Core: Nessa pasta foi armazenado componentes relacionado a regra do negocio ou que tem amarração maior com outros componentes que não são tão genericos, ou componente que são mais dificieis de serem compartilhados devido ao seu contexto especifico.

Tratamento de Erros no Angular

https://getbootstrap.com/docs/versions/

https://www.typescriptlang.org/docs/

https://angular.io/docs

O projeto publicado é referente ao treinamento do Curso Bootcamp - Angular Developer da Digital Innovation One https://digitalinnovation.one.