{"id":14973216,"url":"https://github.com/edijunior88/angular2_na_pratica","last_synced_at":"2026-02-08T15:32:58.292Z","repository":{"id":103760850,"uuid":"498328731","full_name":"EdiJunior88/Angular2_Na_Pratica","owner":"EdiJunior88","description":"Esta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita.","archived":false,"fork":false,"pushed_at":"2024-05-02T17:05:52.000Z","size":437,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-28T12:45:06.285Z","etag":null,"topics":["angular-cli","angular-material","angular2","angular4","angular5","angular6","angular7","angular8","css3","html5","livro","livros-desenvolvedor","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EdiJunior88.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-31T12:34:50.000Z","updated_at":"2025-03-31T22:16:41.000Z","dependencies_parsed_at":"2024-05-02T16:43:27.951Z","dependency_job_id":"fe2efd34-4661-4790-81cd-fed42746cc0f","html_url":"https://github.com/EdiJunior88/Angular2_Na_Pratica","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":"0.33333333333333337","last_synced_commit":"5e7fa8c5a9216488dbc3a76f31219a693d3b3dd1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EdiJunior88/Angular2_Na_Pratica","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdiJunior88%2FAngular2_Na_Pratica","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdiJunior88%2FAngular2_Na_Pratica/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdiJunior88%2FAngular2_Na_Pratica/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdiJunior88%2FAngular2_Na_Pratica/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EdiJunior88","download_url":"https://codeload.github.com/EdiJunior88/Angular2_Na_Pratica/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdiJunior88%2FAngular2_Na_Pratica/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267110005,"owners_count":24037632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-cli","angular-material","angular2","angular4","angular5","angular6","angular7","angular8","css3","html5","livro","livros-desenvolvedor","nodejs","typescript"],"created_at":"2024-09-24T13:48:23.760Z","updated_at":"2026-02-08T15:32:58.240Z","avatar_url":"https://github.com/EdiJunior88.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eAngular2\u003c/h1\u003e\n\u003ch2\u003eCom Node/npm, Typescript, SystemJS e Visual Studio Code\u003c/h2\u003e\n\n\u003cp\u003eEsta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita. Quase todos os conceitos da versão 1 ficaram obsuletos e novas técnicas estão sendo utilizadas no Angular 2, com o objetivo de prover um framework mais dinâmico e moderno.\u003c/p\u003e\n\n\u003cp\u003eAntes de abordarmos o Angular 2 é necessário rever algumas tecnulogias que são vitais para o desenvulvimento de qualquer biblioteca utilizando HTML/Javascript. Primeiro, usaremos extensivamente o Node, que é uma forma de executar Javascript no servidor. O uso do Node será vital para que possamos manipular bibliotecas em nosso projeto, que serão instaladas através do gerenciador de pacotes do Node chamado npm.\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"imagem-capa-livro.png\" width=\"50%\"\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003ch3\u003eTecnologias Utilizadas\u003c/h3\u003e\n\n- \u003cimg width='25' height='25' src='https://img.stackshare.io/service/1612/bynNY5dJ.jpg' alt='TypeScript'/\u003e [TypeScript](http://www.typescriptlang.org) – Languages\n\nPara ver todas as tecnologias [clique aqui](/techstack.md)\n\n\u003chr\u003e\n\n\u003cstrong\u003e1 - Introdução\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003ePré requisitos\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eNode\u003c/li\u003e\n    \u003cli\u003eServidor web\u003c/li\u003e\n    \u003cli\u003eArquivo package.json\u003c/li\u003e\n    \u003cli\u003eErros ao instalar o Angular 2\u003c/li\u003e\n    \u003cli\u003eArquivo package.json\u003c/li\u003e\n    \u003cli\u003eEditores de texto e IDEs\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eAlém do Javascript\u003c/li\u003e\n  \u003cli\u003eTypeScript\u003c/li\u003e\n  \u003cli\u003eCódigo fonte\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e2 - TypeScript1\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eInstalando TypeScript\u003c/li\u003e\n  \u003cli\u003eUso do Visual Studio Code\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eDetectando alterações\u003c/li\u003e\n    \u003cli\u003eDebug no Visual Studio Code\u003c/li\u003e\n    \u003cli\u003eDebug no navegador\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eTipos\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eTipos Básicos\u003c/li\u003e\n    \u003cli\u003eArrays\u003c/li\u003e\n    \u003cli\u003eEnum\u003c/li\u003e\n    \u003cli\u003eAny\u003c/li\u003e\n    \u003cli\u003eVoid\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eClasses\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eConstrutor\u003c/li\u003e\n    \u003cli\u003eVisibilidade de métodos e propriedades\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eHerança\u003c/li\u003e\n  \u003cli\u003eAccessors (get/set)\u003c/li\u003e\n  \u003cli\u003eMétodos Estáticos\u003c/li\u003e\n  \u003cli\u003eInterfaces\u003c/li\u003e\n  \u003cli\u003eFunções\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eValor padrão\u003c/li\u003e\n    \u003cli\u003eValor opcional\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eParâmetros Rest\u003c/li\u003e\n  \u003cli\u003eParâmetros no formato JSON\u003c/li\u003e\n  \u003cli\u003eMódulos\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eExemplo com Systemjs\u003c/li\u003e\n    \u003cli\u003eOmitindo arquivos js e map no VSCode\u003c/li\u003e\n    \u003cli\u003eUso do SystemJS\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eDecorators (ou annotation)\u003c/li\u003e\n  \u003cli\u003eConclusão\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e3 - Um pouco de prática \u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eProjeto AngularBase\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eConfigurando o projeto\u003c/li\u003e\n    \u003cli\u003eErros ao instalar o Angular 2\u003c/li\u003e\n    \u003cli\u003eConfigurando a compilação do TypeScript\u003c/li\u003e\n    \u003cli\u003eCriando o primeiro componente Angular 2\u003c/li\u003e\n    \u003cli\u003eCriando o bootstrap\u003c/li\u003e\n    \u003cli\u003eCriando o arquivo html\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eCriando uma pequena playlist\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eEstrutura inicial dos arquivos\u003c/li\u003e\n    \u003cli\u003eCriando um arquivo de configuração da aplicação\u003c/li\u003e\n    \u003cli\u003eAdicionando bootstrap\u003c/li\u003e\n    \u003cli\u003eCriando a classe Video\u003c/li\u003e\n    \u003cli\u003eCriando uma lista simples de vídeos\u003c/li\u003e\n    \u003cli\u003eCriando sub-componentes\u003c/li\u003e\n    \u003cli\u003eFormatando o template\u003c/li\u003e\n    \u003cli\u003eRepassando valores entre componentes\u003c/li\u003e\n    \u003cli\u003eSelecionando um vídeo\u003c/li\u003e\n    \u003cli\u003eEventos\u003c/li\u003e\n    \u003cli\u003ePropagando eventos\u003c/li\u003e\n    \u003cli\u003eExibindo os detalhes do vídeo\u003c/li\u003e\n    \u003cli\u003eEditando os dados do video selecionado\u003c/li\u003e\n    \u003cli\u003eEditando o título\u003c/li\u003e\n    \u003cli\u003eCriando um novo item\u003c/li\u003e\n    \u003cli\u003eAlgumas considerações\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eCriando Componentes\u003c/li\u003e\n  \u003cli\u003eComponentes Hierárquicos\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e4 - Um pouco de teoria\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eVisão Geral\u003c/li\u003e\n  \u003cli\u003eMódulo (module)\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eLibrary Module\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eComponente (component)\u003c/li\u003e\n  \u003cli\u003eTemplate\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eInterpulation (Uso de {{ }})\u003c/li\u003e\n    \u003cli\u003eTemplate Expressions\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eProperty Bind\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eLaços\u003c/li\u003e\n    \u003cli\u003ePipes (Operador |)\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eMetadata (annotation)\u003c/li\u003e\n  \u003cli\u003eServiço (Service)\u003c/li\u003e\n  \u003cli\u003eInjeção de dependência\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eUso do @Injectable()\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e5 - Formulários 8\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eCriando o projeto inicial\u003c/li\u003e\n  \u003cli\u003eUso do ngContrul\u003c/li\u003e\n  \u003cli\u003eExibindo uma mensagem de erro\u003c/li\u003e\n  \u003cli\u003eDesabilitando o botão de submit do formulário\u003c/li\u003e\n  \u003cli\u003eSubmit do formulário\u003c/li\u003e\n  \u003cli\u003eContrulando a visibilidade do formulário\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e6 - Conexão com o servidor\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eCriando o projeto\u003c/li\u003e\n  \u003cli\u003eUso da classe Http\u003c/li\u003e\n  \u003cli\u003eUtilizando services\u003c/li\u003e\n  \u003cli\u003eOrganização do projeto\u003c/li\u003e\n  \u003cli\u003eModel user\u003c/li\u003e\n  \u003cli\u003eService user\u003c/li\u003e\n  \u003cli\u003eAlterando o componente AppComponent\u003c/li\u003e\n  \u003cli\u003eEnviando dados\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e7 - Routes\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eAplicação AngularRoutes\u003c/li\u003e\n  \u003cli\u003eDividindo a aplicação em partes\u003c/li\u003e\n  \u003cli\u003eCriando a área onde os componentes serão carregados\u003c/li\u003e\n  \u003cli\u003eConfigurando o router\u003c/li\u003e\n  \u003cli\u003eCriando links para as rotas\u003c/li\u003e\n  \u003cli\u003eRepassando parâmetros\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e8 - Exemplo Final - Servidor\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eCriando o servidor RESTful\u003c/li\u003e\n  \u003cli\u003eO banco de dados MongoDB\u003c/li\u003e\n  \u003cli\u003eCriando o projeto\u003c/li\u003e\n  \u003cli\u003eEstrutura do projeto\u003c/li\u003e\n  \u003cli\u003eConfigurando os modelos do MondoDB\u003c/li\u003e\n  \u003cli\u003eConfigurando o servidor Express\u003c/li\u003e\n  \u003cli\u003eTestando o servidor\u003c/li\u003e\n  \u003cli\u003eTestando a api sem o Angular\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e9 - Exemplo Final - Cliente\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eArquivos iniciais\u003c/li\u003e\n  \u003cli\u003ePreparando o Template base da aplicação\u003c/li\u003e\n  \u003cli\u003eImplementando o roteamento (Router)\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eCriando componentes\u003c/li\u003e\n    \u003cli\u003eConfigurando o @RouteConfig\u003c/li\u003e\n    \u003cli\u003eConfigurando o menu\u003c/li\u003e\n    \u003cli\u003eConfigurando o router-outlet\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eExibindo Posts\u003c/li\u003e\n  \u003cli\u003eLogin\u003c/li\u003e\n  \u003cli\u003eServices\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003eLoginService\u003c/li\u003e\n    \u003cli\u003eUserService\u003c/li\u003e\n    \u003cli\u003eHeadersService\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eConectando no servidor\u003c/li\u003e\n  \u003cli\u003ePosts\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003ePostService\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eRefatorando a tela inicial\u003c/li\u003e\n  \u003cli\u003eConclusão\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e10 - Utilizando Sublime Text\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eInstalação\u003c/li\u003e\n  \u003cli\u003eAdicionando suporte a linguagem TypeScript\u003c/li\u003e\n  \u003cli\u003eAutomatizando a build TypeScript\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003cstrong\u003e11 - Publicando a aplicação em um servidor cloud\u003c/strong\u003e\n\n\u003cul\u003e\n  \u003cli\u003eCriando a conta na Digital Ocean\u003c/li\u003e\n  \u003cli\u003eCriando o droplet (servidor)\u003c/li\u003e\n  \u003cli\u003eConfigurando o acesso SSH\u003c/li\u003e\n  \u003cli\u003eCriando o usuário\u003c/li\u003e\n  \u003cli\u003eInstalando o git\u003c/li\u003e\n  \u003cli\u003eInstalando Node\u003c/li\u003e\n  \u003cli\u003eInstalando o nginx\u003c/li\u003e\n  \u003cli\u003eInstalando os módulos do node\u003c/li\u003e\n  \u003cli\u003eRecompilando os arquivos TypeScript\u003c/li\u003e\n  \u003cli\u003eTeste inicial\u003c/li\u003e\n  \u003cli\u003eIntegração entre nginx e node\u003c/li\u003e\n  \u003cli\u003eAlgumas considerações sobre node+nginx\u003c/li\u003e\n  \u003cli\u003eDomínio\u003c/li\u003e\n  \u003cli\u003eConclusão\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003ch4\u003e\u003cb\u003eAulas:\u003c/b\u003e 📚 11 capítulos\u003c/h4\u003e\n\u003ch4\u003e\u003cb\u003eStatus do Curso:\u003c/b\u003e :speech_balloon: Estudando\u003c/h4\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedijunior88%2Fangular2_na_pratica","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedijunior88%2Fangular2_na_pratica","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedijunior88%2Fangular2_na_pratica/lists"}