{"id":21046248,"url":"https://github.com/alfredo1995/spa","last_synced_at":"2025-07-13T23:07:17.476Z","repository":{"id":186714700,"uuid":"649833229","full_name":"alfredo1995/SPA","owner":"alfredo1995","description":"Angular 7 being efficiently consumed by the REST API created with ASP.NET Core WebAPI, enabling powerful interactions with data.","archived":false,"fork":false,"pushed_at":"2025-01-14T16:51:12.000Z","size":231,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-15T18:43:47.609Z","etag":null,"topics":["angular","javascript","microservice","spa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfredo1995.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-06-05T18:32:30.000Z","updated_at":"2025-01-14T16:51:15.000Z","dependencies_parsed_at":"2025-05-15T18:38:39.087Z","dependency_job_id":"1d36555f-469e-47c6-bf88-ceb656257084","html_url":"https://github.com/alfredo1995/SPA","commit_stats":null,"previous_names":["alfredo1995/spa"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alfredo1995/SPA","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredo1995%2FSPA","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredo1995%2FSPA/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredo1995%2FSPA/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredo1995%2FSPA/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfredo1995","download_url":"https://codeload.github.com/alfredo1995/SPA/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredo1995%2FSPA/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265218709,"owners_count":23729526,"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","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","javascript","microservice","spa"],"created_at":"2024-11-19T14:28:41.147Z","updated_at":"2025-07-13T23:07:17.444Z","avatar_url":"https://github.com/alfredo1995.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"inicialização front end ( abrindo aplicação)\n   \n    npm install\n    npm update \n    npm start  \n    npm s \n   \ninicialização back end (abrindo swagger)\n\n    ctrl + shift + b \n    inicializar na DevIO.Api \n     \nsoluções para possiveis erro na depedencia do front  \n\n    npm cache clean --force  \n    npm pkill node\n    npm install\n  \n\napi em: https://github.com/alfredo1995/REST.git\n\n\u003cbr\u003e\n  \nPronto! kkk Agora vamos ao passo a passo do desenvolvimento de SPA em Angular ;)   \n\n    ng new --minimal -g MeuProjeto\n\nDando uma cara para aplicação \n\n    MeuProjeto \u003e index.html\n\ncostumizar a paginia inicial index.html\n\n    \u003c!doctype html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n \n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrik-to-fit=no\"\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" crossorigin=\"anonymous\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/font-awesome/4.3.1/css/font-awesome.min.cs\" crossorigin=\"anonymous\"\u003e\n\n    \u003ctitle\u003eMinnha Aplicação Angular\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \u003capp-root\u003e\u003c/app-root\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n\nCriar templateUrl em MeuProjeto \u003e app \u003e app.component.ts\n\n    import { Component, inject, Injectable } from '@angular/core';\n\n    @Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    })\n    export class AppComponent {\n    title = 'MeuProjeto';\n    }\n\ncriar o app.component.html\n\n    MeuProjeto \u003e app \u003e app.component.html\n\ncriar html de navegação e o corpo da pagina app.component.html\n\n    \u003c!--Navigation--\u003e\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"#\"\u003eMinha Aplicacao\u003c/a\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\"\u003e\n                \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarRensponsive\"\u003e\n                \u003cul class=\"navbar-nav ml-auto\"\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eProdutos\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eSobre\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eContato\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eFeature\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n\n    \u003c!--FIM do Navigation--\u003e\n\n    \u003c!--Page Content--\u003e\n    \u003cheader class=\"bg-primary py-5 mb-5\"\u003e\n        \u003cdiv class=\"container h-100\"\u003e\n            \u003cdiv class=\"row h-100 align-items-center\"\u003e\n                \u003cdiv class=\"col-lg-2\"\u003e\n                    \u003cimg src=\"https://angular.io/assets/images/logos/angular/angular.svg\"/\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"col-lg-10\"\u003e\n                    \u003ch1 class=\"display-4 text-white mt-5 mb-2\"\u003eDesenvolivimento SPA com Angular\u003c/h1\u003e\n                    \u003cp class=\"lead mb-5 text-white\"\u003eAplicação está rodando com sucesso guy\u003c/p\u003e \n                \u003c/div\u003e\n            \u003c/div\u003e    \n        \u003c/div\u003e\n    \u003c/header\u003e\n\n    \u003cdiv class=\"container main-container\"\u003e\n        \u003cdiv class=\"row text-center\"\u003e\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\" src=\"/assets/crossplat.jpg\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eMultiplataforma\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem ipsum dolor\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"/assets/performance.jpg\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eperformance\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem ipsum dolor\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"/assets/produtividade.jpg\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eProdutividade\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem ipsum dolor\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"/assets/full_dev.jpg\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eFuncionalidade\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem ipsum dolor\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!--FIM Page Content--\u003e\n\n    \u003c!-- Footer --\u003e\n    \u003cfooter class=\"bg-dark fixed-bottom footer\"\u003e\n        \u003cdiv\u003e\n            \u003cp style=\"padding-top: 1px;\" class=\"text-center text-white\"\u003ealfredogomes1995@gmail.com\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/footer\u003e\n\n\n\nDefinindo os componentes de navegação\n\n    criar component para cada parte da aplicação ( menu , corpo e rodape )\n\nterminal git bash\n\n    ng g c navegacao/menu\n\nMeuProjeto \u003e navegacao\u003e menu \u003e menu.component.ts\n\n    import { Component } from '@angular/core';\n\n    @Component({\n    selector: 'app-menu',\n    templateUrl: './menu.component.html'\n    })\n    export class MenuComponent { }\n\nterminal git bash\n\n    ng g c navegacao/home\n\nMeuProjeto \u003e navegacao\u003e home \u003e home.component.ts\n\n    import { Component } from '@angular/core';\n\n    @Component({\n    selector: 'app-home',\n    templateUrl: './home.component.html'\n    })\n    export class HomeComponent { }\n\n\nterminal git bash\n\n    ng g c navegacao/footer\n\nMeuProjeto \u003e navegacao\u003e footer \u003e footer.component.ts\n\n    import { Component } from '@angular/core';\n\n    @Component({\n    selector: 'app-footer',\n    templateUrl: './footer.component.html'\n    })\n    export class FooterComponent { }\n\nextrair a parte de navegação do app.component.html \n\n    \u003c!--Navigation--\u003e\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"#\"\u003eMinha Aplicacao\u003c/a\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\"\u003e\n                \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarRensponsive\"\u003e\n                \u003cul class=\"navbar-nav ml-auto\"\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eProdutos\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eSobre\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eContato\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eFeature\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n\ncriar dentro da pasta menu \u003e menu.component.html \u003e jogar o arquivo nav extraido\n\n    \u003c!--Navigation--\u003e\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"#\"\u003eMinha Aplicacao\u003c/a\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\"\u003e\n                \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarRensponsive\"\u003e\n                \u003cul class=\"navbar-nav ml-auto\"\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eProdutos\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eSobre\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eContato\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" href=\"#\"\u003eFeature\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n    \n    \u003c!--FIM do Navigation--\u003e\n\nextrair a parte de \u003c!--Page Content--\u003e do app.component.html \n\n    \u003c!--Page Content--\u003e\n    \u003cheader class=\"bg-primary py-4 mb-4\"\u003e\n        \u003cdiv class=\"container h-100\"\u003e\n            \u003cdiv class=\"row h-100 align-items-center\"\u003e\n                \u003cdiv class=\"col-lg-2\"\u003e\n                    \u003cimg src=\"https://angular.io/assets/images/logos/angular/angular.svg\"/\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"col-lg-10\"\u003e\n                    \u003ch1 class=\"display-4 text-white mt-5 mb-2\"\u003eDesenvolivimento SPA com Angular\u003c/h1\u003e\n                    \u003cp class=\"lead mb-5 text-white\"\u003eAplicação está rodando com sucesso\u003c/p\u003e \n                \u003c/div\u003e\n            \u003c/div\u003e    \n        \u003c/div\u003e\n    \u003c/header\u003e\n\n    \u003cdiv class=\"container main-container\"\u003e\n        \u003cdiv class=\"row text-center\"\u003e\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\" src=\"https://hml.vertigo.com.br/wp-content/uploads/2018/04/mobile-apps-768x577-1.jpg\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eMultiplataforma\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"https://vooozer.com/wp-content/uploads/2018/05/Teste-de-performance-de-site-1280x720.png\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eperformance\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"https://files.caetreinamentos.com.br/blog/wp-content/uploads/2019/09/27215227/produtividade-banner.png\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eProdutividade\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                \u003cimg class=\"card-img-top\" src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxR3U-sPuYc8YbUTshKfsRUcWqeRbzRXBArxneL4YU7DRHRgdCHb640rKF3nERR9Q4mbg\u0026usqp=CAU\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003ch4 class=\"card-title\"\u003eFuncionalidade\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo utilizado desde o século XVI\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!--FIM Page Content--\u003e\n\ncriar dentro da pasta home \u003e home.component.html \u003e jogar o arquivo nav extraido\n\n    \u003c!--Page Content--\u003e\n    \u003cheader class=\"bg-primary py-4 mb-4\"\u003e\n        \u003cdiv class=\"container h-100\"\u003e\n            \u003cdiv class=\"row h-100 align-items-center\"\u003e\n                \u003cdiv class=\"col-lg-2\"\u003e\n                    \u003cimg src=\"https://angular.io/assets/images/logos/angular/angular.svg\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"col-lg-10\"\u003e\n                    \u003ch1 class=\"display-4 text-white mt-5 mb-2\"\u003eDesenvolivimento SPA com Angular\u003c/h1\u003e\n                    \u003cp class=\"lead mb-5 text-white\"\u003eAplicação está rodando com sucesso\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/header\u003e\n\n    \u003cdiv class=\"container main-container\"\u003e\n        \u003cdiv class=\"row text-center\"\u003e\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\"\n                        src=\"https://hml.vertigo.com.br/wp-content/uploads/2018/04/mobile-apps-768x577-1.jpg\" height=\"164px\"\n                        width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eMultiplataforma\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo\n                            utilizado desde o século XVI\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\"\n                        src=\"https://vooozer.com/wp-content/uploads/2018/05/Teste-de-performance-de-site-1280x720.png\"\n                        height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eperformance\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo\n                            utilizado desde o século XVI\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\"\n                        src=\"https://files.caetreinamentos.com.br/blog/wp-content/uploads/2019/09/27215227/produtividade-banner.png\"\n                        height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eProdutividade\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo\n                            utilizado desde o século XVI\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"col-lg-3 col-md-6 mb-4\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003cimg class=\"card-img-top\"\n                        src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxR3U-sPuYc8YbUTshKfsRUcWqeRbzRXBArxneL4YU7DRHRgdCHb640rKF3nERR9Q4mbg\u0026usqp=CAU\"\n                        height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch4 class=\"card-title\"\u003eFuncionalidade\u003c/h4\u003e\n                        \u003cp class=\"card-text\"\u003eLorem Ipsum é uma simulação de texto da indústria tipográfica e vem sendo\n                            utilizado desde o século XVI\u003c/p\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eSaiba Mais\u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003c!--FIM Page Content--\u003e\n\nextrair a parte de \u003c!-- Footer --\u003e  do app.component.html \n\n    \u003c!-- Footer --\u003e\n    \u003cfooter class=\"bg-dark fixed-bottom footer\"\u003e\n        \u003cdiv\u003e\n            \u003cp style=\"padding-top: 1px;\" class=\"text-center text-white\"\u003ealfredogomes1995@gmail.com\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/footer\u003e\n\ncriar dentro da pasta home \u003e home.component.html \u003e jogar o arquivo nav extraido\n\n    \u003c!-- Footer --\u003e\n    \u003cfooter class=\"bg-dark fixed-bottom footer\"\u003e\n        \u003cdiv\u003e\n            \u003cp style=\"padding-top: 1px;\" class=\"text-center text-white\"\u003ealfredogomes1995@gmail.com\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/footer\u003e\n\nchamando os component em app.component.html\n\n    \u003capp-menu\u003e\u003c/app-menu\u003e\n    \u003capp-home\u003e\u003c/app-home\u003e\n    \u003capp-footer\u003e\u003c/app-footer\u003e\n\n\ndefinindo roteamento e configurações\n\n    abrir git bash na pasta da aplicação\n\ncriar component\n\n    ng g c institucional/sobre\n\ngit bash \n\n    ng g c institucional/contato\n\n\ncriar arquivo de configuração de rotas em app \u003e app.routes.ts\n\n    import { RouteConfigLoadStart, Routes } from \"@angular/router\";\n    import { ContatoComponent } from \"./institucional/contato/contato.component\";\n    import { SobreComponent } from \"./institucional/sobre/sobre.component\";\n    import { HomeComponent } from \"./navegacao/home/home.component\";\n\n    export const rootRouterConfig: Routes = \n    [\n        {path: '', redirectTo: '/home', pathMatch: 'full'},\n        {path: 'home', component: HomeComponent},\n        {path: 'contato', component: ContatoComponent},\n        {path: 'sobre', component: SobreComponent}\n    ];\n\n\nconfigurar a rota criada no model\n\n    MeuProjeto \u003e app \u003e app.modules.ts\n\nimporta o caminho da rota e fixar os provides em app.modules.ts\n\n    import { RouterModule } from '@angular/router';\n    import { APP_BASE_HREF } from '@angular/common';\n\n    imports: [\n    BrowserModule,\n    [RouterModule.forRoot(rootRouterConfig, { useHash: false})]\n    ],\n\n    @NgModule({\n    imports: [\n        BrowserModule,\n        [RouterModule.forRoot(rootRouterConfig, { useHash: false})]\n    ],\n    providers: [\n        {provide: APP_BASE_HREF, useValue: '/'}\n    ],    \n\nsubstuir a \u003capp-home\u003e pela diretiva de navegação\n\n    app.component.html = \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\ncriar views do sobre e contato \n\n    app \u003e sobre \u003e sobre.component.html\n    app \u003e contato \u003e contato.component.html\n\ncostumizar view do component contato.component.html\n\n        \u003c!-- Page Content --\u003e\n        \u003cdiv class=\"container main-container\"\u003e\n\n            \u003c!-- Jumbotron Header --\u003e\n            \u003cheader class=\"jumbotron my-4\"\u003e\n                \u003ch1 class=\"display-3\"\u003eContato!\u003c/h1\u003e\n                \u003cp class=\"lead\"\u003eAqui você pode colocar um mapa para informar seu local de trabalho.\u003c/p\u003e\n            \u003c/header\u003e\n\n            \u003cform class=\"mbr-form\"\u003e\n                \u003cdiv class=\"row row-sm-offset\"\u003e\n                    \u003cdiv class=\"col-md-4 multi-horizontal\" data-for=\"name\"\u003e\n                        \u003cdiv class=\"form-group\"\u003e\n                            \u003clabel class=\"form-control-label mbr-fonts-style display-7\" for=\"name-form1-2w\"\u003eNome\u003c/label\u003e\n                            \u003cinput type=\"text\" class=\"form-control\" name=\"name\" data-form-field=\"Name\" required=\"\"\n                                id=\"name-form1-2w\"\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"col-md-4 multi-horizontal\" data-for=\"email\"\u003e\n                        \u003cdiv class=\"form-group\"\u003e\n                            \u003clabel class=\"form-control-label mbr-fonts-style display-7\" for=\"email-form1-2w\"\u003eE-mail\u003c/label\u003e\n                            \u003cinput type=\"email\" class=\"form-control\" name=\"email\" data-form-field=\"Email\" required=\"\"\n                                id=\"email-form1-2w\"\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"col-md-4 multi-horizontal\" data-for=\"phone\"\u003e\n                        \u003cdiv class=\"form-group\"\u003e\n                            \u003clabel class=\"form-control-label mbr-fonts-style display-7\" for=\"phone-form1-2w\"\u003eTelefone\u003c/label\u003e\n                            \u003cinput type=\"tel\" class=\"form-control\" name=\"phone\" data-form-field=\"Phone\" id=\"phone-form1-2w\"\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"form-group\" data-for=\"message\"\u003e\n                    \u003clabel class=\"form-control-label mbr-fonts-style display-7\" for=\"message-form1-2w\"\u003eMensagem\u003c/label\u003e\n                    \u003ctextarea type=\"text\" class=\"form-control\" name=\"message\" rows=\"7\" data-form-field=\"Message\"\n                        id=\"message-form1-2w\"\u003e\u003c/textarea\u003e\n                \u003c/div\u003e\n\n                \u003cspan class=\"input-group-btn\"\u003e\n                    \u003cbutton href=\"\" type=\"submit\" class=\"btn btn-primary btn-form display-4\"\u003eEnviar\u003c/button\u003e\n                \u003c/span\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n        \u003cbr\u003e\n\n    costumizar view do component sobre.component.html\n\n    \u003cdiv class=\"bg-light\"\u003e\n        \u003cdiv class=\"container py-5\"\u003e\n            \u003cdiv class=\"row h-100 align-items-center py-5\"\u003e\n                \u003cdiv class=\"col-lg-6\"\u003e\n                    \u003ch1 class=\"display-4\"\u003eQuem somos\u003c/h1\u003e\n                    \u003cp class=\"lead text-muted mb-0\"\u003eUtilize a criatividade aqui!\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"col-lg-6 d-none d-lg-block\"\u003e\u003cimg\n                        src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834136/illus_kftyh4.png\" alt=\"\"\n                        class=\"img-fluid\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bg-white py-5\"\u003e\n        \u003cdiv class=\"container py-5\"\u003e\n            \u003cdiv class=\"row align-items-center mb-5\"\u003e\n                \u003cdiv class=\"col-lg-6 order-2 order-lg-1\"\u003e\u003ci class=\"fa fa-bar-chart fa-2x mb-3 text-primary\"\u003e\u003c/i\u003e\n                    \u003ch2 class=\"font-weight-light\"\u003eLorem ipsum dolor sit amet\u003c/h2\u003e\n                    \u003cp class=\"font-italic text-muted mb-4\"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n                        eiusmod tempor incididunt ut labore et dolore magna aliqua.\u003c/p\u003e\u003ca href=\"#\"\n                        class=\"btn btn-light px-5 rounded-pill shadow-sm\"\u003eLearn More\u003c/a\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"col-lg-5 px-5 mx-auto order-1 order-lg-2\"\u003e\u003cimg\n                        src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834139/img-1_e25nvh.jpg\" alt=\"\"\n                        class=\"img-fluid mb-4 mb-lg-0\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"row align-items-center\"\u003e\n                \u003cdiv class=\"col-lg-5 px-5 mx-auto\"\u003e\u003cimg\n                        src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834136/img-2_vdgqgn.jpg\" alt=\"\"\n                        class=\"img-fluid mb-4 mb-lg-0\"\u003e\u003c/div\u003e\n                \u003cdiv class=\"col-lg-6\"\u003e\u003ci class=\"fa fa-leaf fa-2x mb-3 text-primary\"\u003e\u003c/i\u003e\n                    \u003ch2 class=\"font-weight-light\"\u003eLorem ipsum dolor sit amet\u003c/h2\u003e\n                    \u003cp class=\"font-italic text-muted mb-4\"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n                        eiusmod tempor incididunt ut labore et dolore magna aliqua.\u003c/p\u003e\u003ca href=\"#\"\n                        class=\"btn btn-light px-5 rounded-pill shadow-sm\"\u003eLearn More\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bg-light py-5\"\u003e\n        \u003cdiv class=\"container py-5\"\u003e\n            \u003cdiv class=\"row mb-4\"\u003e\n                \u003cdiv class=\"col-lg-5\"\u003e\n                    \u003ch2 class=\"display-4 font-weight-light\"\u003eOur team\u003c/h2\u003e\n                    \u003cp class=\"font-italic text-muted\"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"row text-center\"\u003e\n                \u003c!-- Team item--\u003e\n                \u003cdiv class=\"col-xl-3 col-sm-6 mb-5\"\u003e\n                    \u003cdiv class=\"bg-white rounded shadow-sm py-5 px-4\"\u003e\u003cimg\n                            src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png\" alt=\"\"\n                            width=\"100\" class=\"img-fluid rounded-circle mb-3 img-thumbnail shadow-sm\"\u003e\n                        \u003ch5 class=\"mb-0\"\u003eManuella Nevoresky\u003c/h5\u003e\u003cspan class=\"small text-uppercase text-muted\"\u003eCEO -\n                            Founder\u003c/span\u003e\n                        \u003cul class=\"social mb-0 list-inline mt-3\"\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci\n                                        class=\"fa fa-facebook-f\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-twitter\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-instagram\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-linkedin\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                        \u003c/ul\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003c!-- End--\u003e\n\n                \u003c!-- Team item--\u003e\n                \u003cdiv class=\"col-xl-3 col-sm-6 mb-5\"\u003e\n                    \u003cdiv class=\"bg-white rounded shadow-sm py-5 px-4\"\u003e\u003cimg\n                            src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834130/avatar-3_hzlize.png\" alt=\"\"\n                            width=\"100\" class=\"img-fluid rounded-circle mb-3 img-thumbnail shadow-sm\"\u003e\n                        \u003ch5 class=\"mb-0\"\u003eSamuel Hardy\u003c/h5\u003e\u003cspan class=\"small text-uppercase text-muted\"\u003eCEO - Founder\u003c/span\u003e\n                        \u003cul class=\"social mb-0 list-inline mt-3\"\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci\n                                        class=\"fa fa-facebook-f\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-twitter\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-instagram\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-linkedin\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                        \u003c/ul\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003c!-- End--\u003e\n\n                \u003c!-- Team item--\u003e\n                \u003cdiv class=\"col-xl-3 col-sm-6 mb-5\"\u003e\n                    \u003cdiv class=\"bg-white rounded shadow-sm py-5 px-4\"\u003e\u003cimg\n                            src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834133/avatar-2_f8dowd.png\" alt=\"\"\n                            width=\"100\" class=\"img-fluid rounded-circle mb-3 img-thumbnail shadow-sm\"\u003e\n                        \u003ch5 class=\"mb-0\"\u003eTom Sunderland\u003c/h5\u003e\u003cspan class=\"small text-uppercase text-muted\"\u003eCEO -\n                            Founder\u003c/span\u003e\n                        \u003cul class=\"social mb-0 list-inline mt-3\"\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci\n                                        class=\"fa fa-facebook-f\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-twitter\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-instagram\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-linkedin\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                        \u003c/ul\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003c!-- End--\u003e\n\n                \u003c!-- Team item--\u003e\n                \u003cdiv class=\"col-xl-3 col-sm-6 mb-5\"\u003e\n                    \u003cdiv class=\"bg-white rounded shadow-sm py-5 px-4\"\u003e\u003cimg\n                            src=\"https://res.cloudinary.com/mhmd/image/upload/v1556834133/avatar-1_s02nlg.png\" alt=\"\"\n                            width=\"100\" class=\"img-fluid rounded-circle mb-3 img-thumbnail shadow-sm\"\u003e\n                        \u003ch5 class=\"mb-0\"\u003eJohn Tarly\u003c/h5\u003e\u003cspan class=\"small text-uppercase text-muted\"\u003eCEO - Founder\u003c/span\u003e\n                        \u003cul class=\"social mb-0 list-inline mt-3\"\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci\n                                        class=\"fa fa-facebook-f\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-twitter\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-instagram\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                            \u003cli class=\"list-inline-item\"\u003e\u003ca href=\"#\" class=\"social-link\"\u003e\u003ci class=\"fa fa-linkedin\"\u003e\u003c/i\u003e\u003c/a\u003e\n                            \u003c/li\u003e\n                        \u003c/ul\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003c!-- End--\u003e\n\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\nlinkar as view nos menus de navegações \n\n    menu.component.html\n\n    link diretivar trocando os href pelos [routerLink]=\"['/']\" em menu.component.html\n\n        \u003ca class=\"navbar-brand\" [routerLink]=\"['/home']\" routerLinkActive=\"router-link-active\" ]\u003eMinha Aplicacao\u003c/a\u003e\n\n        \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" [routerLink]=\"['/sobre']\"\u003eSobre\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" [routerLink]=\"['/contato']\"\u003eContato\u003c/a\u003e\n        \u003c/li\u003e   \n        \nmenu.component.html\n\n    \u003c!-- Navigation --\u003e\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top \"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003ca class=\"navbar-brand\" [routerLink]=\"['/home']\" routerLinkActive=\"router-link-active\" \u003eMinha App Angular\u003c/a\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\"\u003e\n                \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarResponsive\"\u003e\n                \u003cul class=\"navbar-nav\"\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" [routerLink]=\"['/produtos']\" routerLinkActive=\"router-link-active\" \u003eProdutos\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" [routerLink]=\"['/sobre']\" routerLinkActive=\"router-link-active\" \u003eSobre\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" [routerLink]=\"['/contato']\" routerLinkActive=\"router-link-active\" \u003eContato\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"nav-item\"\u003e\n                        \u003ca class=\"nav-link\" [routerLink]=\"['/feature-data-binding']\" \u003eFeatures\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n    \u003c!-- FIM Navigation --\u003e\n\ndataBind\n\n    ng g c demos/DataBinding\n\napp.routes.ts\n    \n    {path: 'feature-data-binding', component: DataBindingComponent}\n\ncriar interporlação app \u003e demos \u003e data-binding.component.ts\n\n    import { Component, OnInit } from '@angular/core';\n    @Component({\n    selector: 'app-data-binding',\n    templateUrl: './data-binding.component.html',\n    styles: [\n    ]\n    })\n    export class DataBindingComponent {\n    \n    public contadorClique: number = 0;\n\n    }\n\ninterpolar app \u003e demos \u003e data-binding.component.html\n\n    \u003cdiv class=\"\"\u003e\n        \u003ch3\u003einterpolação\u003c/h3\u003e\n\n        \u003cp\u003eo numero de cliques é: {{contadorClique}} \u003c/p\u003e\n    \u003c/div\u003e\n\n\nexibição  data-binding.component.html\n\n    \u003cdiv class=\"\"\u003e\n        \u003ch3\u003einterpolação\u003c/h3\u003e\n\n        \u003cp\u003eo numero de cliques é: {{contadorClique}} \u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"\"\u003e\n        \u003ch3\u003eProperty Binding\u003c/h3\u003e\n\n        \u003cbutton class=\"btn btn-info\" disabled\u003e\u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"\"\u003e\n        \u003ch3\u003eEvent Binding\u003c/h3\u003e\n\n        \u003cbutton class=\"btn btn-warning\" (click)=\"adicionarClique()\"\u003eClique em Mim!\u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"\"\u003e\n        \u003ch3\u003eTwo-way Binding\u003c/h3\u003e\n\n        \u003c!-- \u003cinput type=\"text\" (keyUp)='keyUp($event)' placeholder=\"Digite seu nome\"\u003e\n            \u003clabel\u003eseu nome é: {{nome}} \u003c/label\u003e --\u003e\n\n        \u003cinput type=\"text\" [(ngModel)]=\"nome\" (ngModelChange)='nome = $event' placeholder=\"Digite seu nome\"\u003e\n        \u003clabel\u003eseu nome é: {{nome}} \u003c/label\u003e\n    \u003c/div\u003e\n\n\nexibição  data-binding.component.ts\n\n    import { Component, OnInit } from '@angular/core';\n\n    @Component({\n    selector: 'app-data-binding',\n    templateUrl: './data-binding.component.html',\n    styles: [\n    ]\n    })\n    export class DataBindingComponent {\n    \n    public contadorClique: number = 0;\n    public nome: string = \"\";\n\n    adicionarClique(){\n        this.contadorClique++;\n    }\n\n    keyUp(event: any){\n        this.nome = event.target.value;\n    }\n    }\n\nimportando o FormsModule no app.modules.ts\n\n    import { FormsModule } from '@angular/forms';\n    import { Server } from 'http'\nimport { endianness } from 'os'\nimport { ProdutoService } from 'src/app/produtos/produtos.service'\n        \n    imports: [\n        BrowserModule,\n        FormsModule,\n    \n\n \nconsumindo dados do fake back end\n\n    npm install -g json-server\n\nRodando o npm json server\n        \n    Set-ExecutionPolicy Unrestricted -Scope CurrentUser\n\nSe necessario abra o PowerShell em modo ADM\n    \n    aperta Windows + X\n\n    Set-ExecutionPolicy Unrestricted -Scope CurrentUser\n\nexecute os comando json novamente\n\n    npm install -g json-server\n    Set-ExecutionPolicy Unrestricted -Scope CurrentUser\n\ncriar o serviço responsalve por acessar o fake back endianness\n\n    criar pasta \u003e produtos \u003e ProdutoService.cs\n    \ndeclarar a class ProdutoService.cs\n\n    import { Injectable } from '@angular/core';\n\nimport { ListaProdutoComponent } from 'src/app/produtos/lista-produto/lista-produto.component'\n    @Injectable()\n    export class ProdutoService{}   \n\nfixar a url do end point (service)\n    @Injectable()\n    export class ProdutoService {\n\n        protected UrlServiceV1: string = \"http://localhost:3000/\";\n\n        }\n    }\n\ncriar metodo para retornar uma ListaProdutoComponent\n    @Injectable()\n    export class ProdutoService {\n\n        protected UrlServiceV1: string = \"http://localhost:3000/\";\n\n        obterProdutos() : Observable\u003cProduto[]\u003e {\n            return this.http\n            .get\u003cProduto[]\u003e(this.UrlServiceV1 + \"produtos\");\n        }}\n    \nacesando end point externo usando a class HttpClient ( injectar no construtor)\n    @Injectable()\n    export class ProdutoService {\n\n    constructor(private http: HttpClient) { }\n\n        protected UrlServiceV1: string = \"http://localhost:3000/\";\n\n        obterProdutos() : Observable\u003cProduto[]\u003e {\n            return this.http\n            .get\u003cProduto[]\u003e(this.UrlServiceV1 + \"produtos\");\n        }\n    }\n\nClass ProdutoService.service.ts\n\n    import { Injectable } from '@angular/core';\n    import { HttpClient } from \"@angular/common/http\";\n    import { Produto } from './produto';\n    import { Observable } from 'rxjs';\n    @Injectable()\n    export class ProdutoService {\n\n    constructor(private http: HttpClient) { }\n\n        protected UrlServiceV1: string = \"http://localhost:3000/\";\n\n        obterProdutos() : Observable\u003cProduto[]\u003e {   \n            return this.http\n            .get\u003cProduto[]\u003e(this.UrlServiceV1 + \"produtos\");\n        }\n    }\n\nconsumindo o serviço atraves do componente \n\n    app.routes.ts\n    \nadiciona nas rotas o caminho do produto \n\n    { path: 'produtos', component: ListaProdutoComponent },\n    { path: 'produto-detalhe/:id', component: ListaProdutoComponent }\n\n    app.routes.ts \n\n    import { Routes } from '@angular/router';\n    import { HomeComponent } from './navegacao/home/home.component';\n    import { ContatoComponent } from './institucional/contato/contato.component';\n    import { SobreComponent } from './institucional/sobre/sobre.component';\n    import { DataBindingComponent } from './demos/data-binding/data-binding.component';\n    import { ListaProdutoComponent } from './produtos/lista-produto/lista-produto.component';\n\n    export const rootRouterConfig: Routes = [\n        { path: '', redirectTo: '/home', pathMatch: 'full'},\n        { path: 'home', component: HomeComponent},\n        { path: 'contato', component: ContatoComponent },\n        { path: 'sobre', component: SobreComponent },\n        { path: 'feature-data-binding', component: DataBindingComponent },\n        { path: 'produtos', component: ListaProdutoComponent },\n        { path: 'produto-detalhe/:id', component: ListaProdutoComponent }\n    ];\n\ncriar view de produto lista-produto.component.html\n\n    \u003cdiv class=\"container main-container\"\u003e\n\n        \u003cdiv class=\"row text-center\"\u003e\n            \n            \u003cdiv *ngFor=\"let produto of produtos\" class=\"col-md-4\" style=\"padding-bottom: 30px;\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003ca class=\"text-decoration-none\" [routerLink]=\"['/produto-detalhe', produto.id]\"\u003e\n                        \u003cdiv style=\"align-content:center;\"\u003e\n                            \u003cimg src=\"/assets/{{ produto.imagem }}\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                        \u003c/div\u003e\n                    \u003c/a\u003e\n                    \u003ch4 class=\"card-title\"\u003e{{ produto.nome | titlecase }}\u003c/h4\u003e\n\n                    \u003cdiv [ngSwitch]=\"produto.promocao\"\u003e\n                        \u003cp *ngSwitchCase=\"true\"\u003ePromoção!\u003c/p\u003e\n                        \u003cp *ngSwitchCase=\"false\"\u003ePor apenas:\u003c/p\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv *ngIf=\"produto.promocao\" class=\"card-body\"\u003e\n                        \u003cdiv\u003e\u003ch4 class=\"card-text\"\u003eDe:\n                            \u003csmall\u003e\u003cdel\u003e{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}\u003c/del\u003e\u003c/small\u003e\n                            Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}\n                        \u003c/h4\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv *ngIf=\"!produto.promocao\" class=\"card-body\"\u003e\n                        \u003cdiv\u003e\u003ch4\u003e{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}\u003c/h4\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca class=\"btn btn-primary\" [routerLink]=\"['/carrinho',produto.id]\"\u003e\n                            \u003cspan class=\"fa fa-shopping-cart\"\u003e\u003c/span\u003e Comprar\n                        \u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\nreceber os dados e gerar uma Lista em ListaProdutoComponent.ts\n\n    import { Component, OnInit } from '@angular/core';\n\n    import { Produto } from '../produto';\n    import { ProdutoService } from '../produtos.service';\n\n    @Component({\n    selector: 'app-lista-produto',\n    templateUrl: './lista-produto.component.html'\n    })\n    export class ListaProdutoComponent implements OnInit {\n\n    constructor(private produtoService: ProdutoService) { }\n\n    public produtos: Produto[];\n\n    ngOnInit() {\n        this.produtoService.obterProdutos()\n        .subscribe(\n            produtos =\u003e {\n            this.produtos = produtos;\n            console.log(produtos);\n            },\n            error =\u003e console.log(error)\n        );\n    }\n    }\n\n\nadicionar o suporte HttpClient no modulo app.module.ts\n\n    import { HttpClientModule } from '@angular/common/http';\n\n    imports: [\n        BrowserModule,\n        FormsModule,\n        HttpClientModule,\n        [RouterModule.forRoot(rootRouterConfig, { useHash: false})]\n      ],\n\nclass app.module.ts\n\n    import { BrowserModule } from '@angular/platform-browser';\n    import { NgModule } from '@angular/core';\n    import { RouterModule } from '@angular/router';\n    import { APP_BASE_HREF } from '@angular/common';\n    import { FormsModule }   from '@angular/forms';\n    import { HttpClientModule } from '@angular/common/http';\n\n    import { registerLocaleData } from '@angular/common';\n    import localePt from '@angular/common/locales/pt';\n    registerLocaleData(localePt);\n\n    import { AppComponent } from './app.component';\n    import { MenuComponent } from './navegacao/menu/menu.component';\n    import { HomeComponent } from './navegacao/home/home.component';\n    import { FooterComponent } from './navegacao/footer/footer.component';\n    import { SobreComponent } from './institucional/sobre/sobre.component';\n    import { ContatoComponent } from './institucional/contato/contato.component';\n    import { rootRouterConfig } from './app.routes';\n    import { DataBindingComponent } from './demos/data-binding/data-binding.component';\n    import { ProdutoService } from './produtos/produtos.service';\n    import { ListaProdutoComponent } from './produtos/lista-produto/lista-produto.component';\n\n    @NgModule({\n    declarations: [\n        AppComponent,\n        MenuComponent,\n        HomeComponent,\n        FooterComponent,\n        SobreComponent,\n        ContatoComponent,\n        DataBindingComponent,\n        ListaProdutoComponent\n    ],\n    imports: [\n        BrowserModule,\n        FormsModule,\n        HttpClientModule,\n        [RouterModule.forRoot(rootRouterConfig, { useHash: false})]\n    ],\n    providers: [\n        ProdutoService,\n        {provide: APP_BASE_HREF, useValue: '/'}\n    ],\n    bootstrap: [AppComponent]\n    })\n    export class AppModule { }\n\ninformar os dados de cada Produto usando interpoletion\n\n    \u003ch4 class=\"card-title\"\u003e{{ produto.nome | titlecase }}\u003c/h4\u003e\n\n    \u003cdiv [ngSwitch]=\"produto.promocao\"\u003e\n        \u003cp *ngSwitchCase=\"true\"\u003ePromoção!\u003c/p\u003e\n        \u003cp *ngSwitchCase=\"false\"\u003ePor apenas:\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv *ngIf=\"produto.promocao\" class=\"card-body\"\u003e\n        \u003cdiv\u003e\u003ch4 class=\"card-text\"\u003eDe:\n            \u003csmall\u003e\u003cdel\u003e{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}\u003c/del\u003e\u003c/small\u003e\n            Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}\n        \u003c/h4\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\nlista-Produto.component.Html \n\n    \u003cdiv class=\"container main-container\"\u003e\n\n        \u003cdiv class=\"row text-center\"\u003e\n            \n            \u003cdiv *ngFor=\"let produto of produtos\" class=\"col-md-4\" style=\"padding-bottom: 30px;\"\u003e\n                \u003cdiv class=\"card h-100\"\u003e\n                    \u003ca class=\"text-decoration-none\" [routerLink]=\"['/produto-detalhe', produto.id]\"\u003e\n                        \u003cdiv style=\"align-content:center;\"\u003e\n                            \u003cimg src=\"/assets/{{ produto.imagem }}\" height=\"164px\" width=\"253px\" alt=\"\"\u003e\n                        \u003c/div\u003e\n                    \u003c/a\u003e\n                    \u003ch4 class=\"card-title\"\u003e{{ produto.nome | titlecase }}\u003c/h4\u003e\n\n                    \u003cdiv [ngSwitch]=\"produto.promocao\"\u003e\n                        \u003cp *ngSwitchCase=\"true\"\u003ePromoção!\u003c/p\u003e\n                        \u003cp *ngSwitchCase=\"false\"\u003ePor apenas:\u003c/p\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv *ngIf=\"produto.promocao\" class=\"card-body\"\u003e\n                        \u003cdiv\u003e\u003ch4 class=\"card-text\"\u003eDe:\n                            \u003csmall\u003e\u003cdel\u003e{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}\u003c/del\u003e\u003c/small\u003e\n                            Por: {{ produto.valorPromo | currency:'BRL':true:'1.2-2':'pt' }}\n                        \u003c/h4\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv *ngIf=\"!produto.promocao\" class=\"card-body\"\u003e\n                        \u003cdiv\u003e\u003ch4\u003e{{ produto.valor | currency:'BRL':true:'1.2-2':'pt' }}\u003c/h4\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"card-footer\"\u003e\n                        \u003ca class=\"btn btn-primary\" [routerLink]=\"['/carrinho',produto.id]\"\u003e\n                            \u003cspan class=\"fa fa-shopping-cart\"\u003e\u003c/span\u003e Comprar\n                        \u003c/a\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredo1995%2Fspa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfredo1995%2Fspa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredo1995%2Fspa/lists"}