{"id":28,"date":"2021-02-07T22:46:45","date_gmt":"2021-02-07T21:46:45","guid":{"rendered":"http:\/\/dziewczynanafroncie.pl\/?p=28"},"modified":"2021-02-13T19:58:46","modified_gmt":"2021-02-13T18:58:46","slug":"angular-tworzenie-pierwszego-projektu","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/angular-tworzenie-pierwszego-projektu\/","title":{"rendered":"Angular – tworzenie pierwszego projektu"},"content":{"rendered":"\n

“Nadeszla wiekopomna chwila” – jak m\u00f3wi\u0142 Pawlak na pogrzebie swego brata. A wi\u0119c nadeszla wiekopomna chwila, aby utworzy\u0107 pierwszy (\u017ceby nie powiedzie\u0107 dziewiczy) projekt Angulara<\/strong>, kt\u00f3rego utworzenie wymaga\u0107 b\u0119dzie u\u017cycia polecenia:<\/p>\n\n\n\n\n\n\n\n

ng new my-first-angular-project-ever<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Oczywi\u015bcie powy\u017csze polecenie najlepiej wpisa\u0107 w konsoli\u00a0Visual Studio Code<\/strong>, co spowoduje utworzenie folderu\u00a0myFirstAngularProjectEver<\/strong>. Do tego\u017c folderu nale\u017cy wej\u015b\u0107 i z jego poziomu wpisa\u0107 polecenie:<\/p>\n\n\n\n
ng serve<\/code><\/pre>\n\n\n\n
Co spowoduje, \u017ce projekt zostanie skompilowany do javascipt-u<\/strong> i uruchomiony pod adresem localhost:4200<\/strong>. Tak wi\u0119c koniec ko\u0144c\u00f3w wpisuj\u0105c ten adres w przegl\u0105darce powinien pojawi\u0107 si\u0119 widok nowo utworzonego projektu.<\/p>\n\n\n\n
Najwa\u017cniejsze pliki nowo utworzonej aplikacji znajduj\u0105 si\u0119 w podfolderze src\/app<\/strong>, gdzie znajduj\u0105 si\u0119 pliki:<\/p>\n\n\n\n
  • app.module<\/strong>\u00a0– gdzie mo\u017cliwe jest podpi\u0119cie komponent\u00f3w, serwis\u00f3w a tak\u017ce import modu\u0142\u00f3w:<\/li><\/ul>\n\n\n\n
    @NgModule({\n declarations: [\n     \/\/ komponenty, dyrektywy i pipe\n ],\n imports: [\n     \/\/ modu\u0142y\n ],\n providers: [\n     \/\/ serwisy i wszystkie obiekty wstrzykiwane\n ],\n exports: [\n     \/\/ czasami trzeba wyeksportowa\u0107 komponent, dyrektyw\u0119 lub pipe-a aby by\u0142 dost\u0119pny globalnie\n ],\n entryComponents: [\n     \/\/ zbi\u00f3r komponent\u00f3w do kompilacji przy definiowaniu tego modu\u0142u tak aby m\u00f3g\u0142 on by\u0107 dynamicznie za\u0142adowany w widoku\n ],\n bootstrap: [\n     \/\/ zbi\u00f3r komponent\u00f3w, kt\u00f3re wykorzystuj\u0105 bibliotek\u0119 bootstrap\n ]\n })<\/code><\/pre>\n\n\n\n
    app-routing.module.ts<\/strong>\u00a0(je\u017celi podczas tworzenia projektu wybrana zosta\u0142a opcja z routingiem) tutaj mo\u017cna tworzy\u0107 scie\u017cki routingu. Oto przyk\u0142adowy kod:<\/p>\n\n\n\n
    import { NgModule } from '@angular\/core';\n import { Routes, RouterModule } from '@angular\/router';\n import { FirstComponentComponent } from '.\/firstModule\/first-module\/first-component\/first-component.component';\n const routes: Routes = [\n   { path: 'first', component: FirstComponentComponent }\n ];\n @NgModule({\n   imports: [RouterModule.forRoot(routes)],\n   exports: [RouterModule]\n })\n export class AppRoutingModule { }<\/code><\/pre>\n\n\n\n
    app.component.ts<\/strong>\u00a0– plik zawieraj\u0105cy deklaracj\u0119 klasy komponentu g\u00f3\u0142wnego<\/p>\n\n\n\n
    import { Component } from '@angular\/core';\n @Component({\n   selector: 'app-root',\n   templateUrl: '.\/app.component.html',\n   styleUrls: ['.\/app.component.css']\n })\n export class AppComponent {\n   title = 'myFirstProjectEver';\n }<\/code><\/pre>\n\n\n\n
    app.component.html<\/strong>\u00a0– zawieraj\u0105cy kod\u00a0HTML<\/strong>\u00a0komponentu<\/p>\n\n\n\n
    <div\u00a0style=\"text-align:center\">\n\u00a0\u00a0\u00a0\u00a0<h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome\u00a0to\u00a0{{\u00a0title\u00a0}}!\n\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0<img\u00a0width=\"300\"\u00a0alt=\"Angular\u00a0Logo\"\u00a0src=\"\">\n\u00a0\u00a0<\/div>\n\u00a0\u00a0<h2>Here\u00a0are\u00a0some\u00a0links\u00a0to\u00a0help\u00a0you\u00a0start:\u00a0<\/h2>\n\u00a0\u00a0<ul>\n\u00a0\u00a0\u00a0\u00a0<li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><a\u00a0target=\"_blank\"\u00a0rel=\"noopener\"\u00a0href=\"https:\/\/angular.io\/tutorial\">Tour\u00a0of\u00a0Heroes<\/a><\/h2>\n\u00a0\u00a0\u00a0\u00a0<\/li>\n\u00a0\u00a0\u00a0\u00a0<li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><a\u00a0target=\"_blank\"\u00a0rel=\"noopener\"\u00a0href=\"https:\/\/angular.io\/cli\">CLI\u00a0Documentation<\/a><\/h2>\n\u00a0\u00a0\u00a0\u00a0<\/li>\n\u00a0\u00a0\u00a0\u00a0<li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><a\u00a0target=\"_blank\"\u00a0rel=\"noopener\"\u00a0href=\"https:\/\/blog.angular.io\/\">Angular\u00a0blog<\/a><\/h2>\n\u00a0\u00a0\u00a0\u00a0<\/li>\n\u00a0\u00a0<\/ul>\n\u00a0\u00a0\n\u00a0\u00a0<router-outlet><\/router-outlet><\/code><\/pre>\n\n\n\n
    W katalogu g\u0142\u00f3wnym projektu\u00a0Angulara<\/strong>\u00a0mo\u017cna znale\u017a\u0107 r\u00f3wnie\u017c ciekawy plik konfiguracyjny\u00a0angular.json<\/strong>\u00a0gdzie znajduj\u0105 si\u0119 opcje zwi\u0105zane z kompilacj\u0105 oraz testowaniem a tak\u017ce mo\u017cna podpi\u0105\u0107 w\u0142asne pliki styl\u00f3w. Tutaj r\u00f3wnie\u017c mo\u017cna znale\u017a\u0107 plik\u00a0package.json<\/strong>, kt\u00f3ry to zawiera informacje o zainstalowanych dodatkach do\u00a0Angulara<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    “Nadeszla wiekopomna chwila” – jak m\u00f3wi\u0142 Pawlak na pogrzebie swego brata. A wi\u0119c nadeszla wiekopomna chwila, aby utworzy\u0107 pierwszy (\u017ceby nie powiedzie\u0107 dziewiczy) projekt Angulara, kt\u00f3rego utworzenie wymaga\u0107 b\u0119dzie u\u017cycia polecenia:<\/p>\n","protected":false},"author":1,"featured_media":43,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-28","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=28"}],"version-history":[{"count":8,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/28\/revisions\/112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}