Tutorial Angular - Ferramentas de Desenvolvimento Web e Geolocalização

AULA PRÁTICA 6 Para iniciar o projeto ng new nome do projeto Na pasta nome do projeto src app No arquivo appcomponenthtml Digitar div classh2 bgsuccess textwhite h3 classmb4 ml1 styletext shadow 2px 2px 4px gray span classicon i classfas faglobe americasi FERRAMENTAS DE DESENVOLVIMENTO WEB span Localização h3 div div classml3 h1 Latitude latitude br Longitude longitude h1 div classbtn btnsuccess text secondary a classtextwhite hrefmapurl Onde estou Google Maps a div hr button classbtn btnsuccess text white datatogglecollapse data targetrastroRastreamentobutton div idrastro classcollapse h1 Latitude latitude2 br Longitude longitude2 h1 div div No arquivo indexhtml digitar doctype html html langen head meta charsetutf8 titleAppgeotitle base href meta nameviewport contentwidthdevicewidth initial scale1 link relicon typeimagexicon hreffaviconico BOOTSTRAP link relstylesheet hrefhttpscdnjsdelivrnetnpmbootstr ap453distcssbootstrapmincss integritysha384 TX8t27EcRE3eihU7zmQxVncDAy5uIKz4rEkgIXeMe d4M0jlfIDPvg6uqKI2xXr2 crossoriginanonymous script srchttpscodejquerycomjquery 351slimminjs integritysha384 DfXdz2htPH0lsSSs5nCTpujzy4COGpamoFVy38MV BnEIbbVYUewOrCXaRkfj crossoriginanonymousscript script srchttpscdnjsdelivrnetnpmbootstra p453distjsbootstrapbundleminjs integritysha384 hoj7jyWK8fNQeA12Hb8AhRq26LrZJpcUGGOnY7 RsweNrtNtE3MoK7ZeZDyx crossoriginanonymousscript link relstylesheet hrefhttpsusefontawesomecomreleases v570cssallcss crossoriginanonymous link relmanifest hrefmanifestwebmanifest meta namethemecolor content1976d2 head body approotapproot noscriptPlease enable JavaScript to continue using this applicationnoscript body html No arquivo appmodulets digitar import BrowserModule from angularplatformbrowser import NgModule from angularcore import AppComponent from appcomponent import ServiceWorkerModule from angularserviceworker import environment from environmentsenvironment NgModule declarations AppComponent imports BrowserModule ServiceWorkerModuleregisterngsw workerjs enabled environmentproduction Register the ServiceWorker as soon as the app is stable or after 30 seconds whichever comes first registrationStrategy registerWhenStable30000 providers bootstrap AppComponent export class AppModule No arquivo appcomponentts digitar import Component OnInit from angularcore Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent implements OnInit title appgeo mapurl latitude 0 longitude 0 teste0 latitude2 0 longitude2 0 ngOnInit thisverificalocal verificalocal if navigatorgeolocation navigatorgeolocationgetCurrentPosi tion pos thislatitude poscoordslatitude thislongitude poscoordslongitude thismapurl httpswwwgooglecommapssearchapi1 querythislatitudethislongitude alertSem localização timeout 15000 navigatorgeolocationwatchPosition pos thislatitude2 poscoordslatitude thislongitude2 poscoordslongitude alertSem rastreamento timeout 15000 else alertSem permissão Abrir o terminal na pasta do projeto executar o ng serve