Je\u017celi tworzysz aplikacje przy u\u017cyciu frameworka angular, tworz\u0105c interfejs graficzny nadchodzi chwila w kt\u00f3rej chcemy skorzysta\u0107 z biblioteki CSS. Przeszukuj\u0105c stron\u0119 npmjs w celu znalezienia odpowiedniej paczki natkniemy si\u0119 na jedn\u0105 z najpopularniejszych biblotek jak\u0105 jest bootstrap. Robi\u0105c to pierwszy raz mo\u017cemy by\u0107 nieco zdziwieni poniewa\u017c naszym ocz\u0105 uka\u017c\u0105 si\u0119 dwie paczki o podobnej nazwie bootstrap oraz ng-bootstrap. Jaka jest r\u00f3\u017cnica mi\u0119dzy nimi, po co zosta\u0142a stworzona ta druga i kiedy jej u\u017cywa\u0107 ? Na twoje pytania postaram si\u0119 odpowiedzie\u0107 w dalszej cz\u0119\u015bci tego wpisu.<\/p>\n\n\n\n\n\n\n\n
Pierwsza paczka dost\u0119pna jest po linkiem<\/p>\n\n\n\n
https:\/\/www.npmjs.com\/package\/bootstrap<\/code><\/pre>\n\n\n\nOpis drugiej paczki znajdziemy tutaj<\/p>\n\n\n\n
https:\/\/www.npmjs.com\/package\/@ng-bootstrap\/ng-bootstrap<\/code><\/pre>\n\n\n\nVanilla Bootstrap<\/h5>\n\n\n\n
Tyle wst\u0119pu tak wi\u0119c przejd\u017amy do tego co nas interesuje. Pierwsza z nich czyli wersja vanilla jest bibliotek\u0105 znajom\u0105 ci nie od wczoraj, je\u017celi tworzysz frontend na co dzie\u0144. Na pewno u\u017cywali\u015bcie jej dosy\u0107 cz\u0119sto tworz\u0105c proste strony lub bardziej rozbudowane aplikacje webowe. <\/p>\n\n\n\n
Pod adresem powy\u017cej znajdziemy j\u0105 jako paczka, kt\u00f3r\u0105 mo\u017cemy wgra\u0107 jako zale\u017cno\u015b\u0107 do naszego projektu. W celu korzystania z jej funkcjonalno\u015bci jako wymagane musimy zainstalowa\u0107 r\u00f3wnie\u017c dodatkow\u0105 bibliotek\u0119 z kt\u00f3rej korzysta jQuery. Je\u017celi w swojej aplikacji b\u0119dziemy chcieli korzysta\u0107 wy\u0142\u0105cznie z gotowych rozwi\u0105za\u0144 oferowanych przez bibliotek\u0119 typu stylizacja tekst\u00f3w, formularzy, wykres\u00f3w, nawigacji oraz innych element\u00f3w wy\u015bwietlanych na stronie nie wymagaj\u0105cych zaawansowanej manipulacji modelem danych. <\/p>\n\n\n\n
Z czasem jednak mo\u017ce nadej\u015b\u0107 chwila w kt\u00f3rej b\u0119dziemy chcieli odnie\u015b\u0107 si\u0119 do w\u0142a\u015bciwo\u015bci Bootstrap, kt\u00f3ra nie jest kontrolowana przez klas\u0119 CSS, przez co przy u\u017cyciu vanilla bootstrap b\u0119dziemy musieli wykona\u0107 operacj\u0119, kt\u00f3re nie s\u0105 zgodne z podej\u015bciem Angularowym lecz bardziej z odniesieniem si\u0119 do $(dom-id) poprzez u\u017cycie javascriptowej logiki z u\u017cyciem jquery na kt\u00f3rej opiera si\u0119 ta wersja biblioteki. Wtedy z pomoc\u0105 przychodzi nam … ng-boostrap.<\/p>\n\n\n\n
Ng-Bootstrap<\/h5>\n\n\n\n
Zosta\u0142 on stworzony specjalnie pod framework angular. Jest to zbi\u00f3r angularowych komponent\u00f3w oraz plik\u00f3w typescript zbudowanych na bazie styli Bootstrap 4 nie korzysta z biblioteki jquery oraz nie wymaga \u017cadnych dodatkowych zale\u017cno\u015bci javascript. W tym momencie gdziekolwiek odnosimy si\u0119, lub modyfikujemy w\u0142a\u015bciwo\u015bci elementu utworzonych z jego pomoc\u0105, mamy do nich odniesienie za pomoc\u0105 wi\u0105zania. Takie rozwi\u0105zanie pozwala nam na \u015bcis\u0142\u0105 kontrol\u0119 nad elementem zgodnie z podej\u015bciem angularowym.<\/p>\n\n\n\n
Lista dost\u0119pnych komponent\u00f3w:<\/h5>\n\n\n\n- Accordion<\/li>
- Alert<\/li>
- Buttons<\/li>
- Carousel<\/li>
- Collapse<\/li>
- Datapicker<\/li>
- Dropdown<\/li>
- Modal<\/li>
- Nav<\/li>
- Paginacja<\/li>
- Popover<\/li>
- Progressbar<\/li>
- Rating<\/li>
- Table<\/li>
- Timepicker<\/li>
- Toast<\/li>
- Tooltip<\/li>
- TypeHead<\/li><\/ul>\n\n\n\n
Por\u00f3wnanie element\u00f3w na przyk\u0142adzie componentu dropdown<\/h5>\n\n\n\nbootstrap.js<\/h6>\n\n\n\n
Poni\u017cej przyk\u0142ad kodu html<\/p>\n\n\n\n
<div class=\"dropdown\">\n <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" \n id=\"dropdownMenuButton\" data-toggle=\"dropdown\" \n aria-haspopup=\"true\" aria-expanded=\"false\">\n Dropdown button\n <\/button>\n <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\n <a class=\"dropdown-item\" href=\"#\">Action<\/a>\n <a class=\"dropdown-item\" href=\"#\">Another action<\/a>\n <a class=\"dropdown-item\" href=\"#\">Something else here<\/a>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\nAby zarz\u0105dza\u0107 componentem dropdown przez JavaScript musimy na elemencie o atrybucie dropdown-toggle wywo\u0142a\u0107 funkcj\u0119 dropdown()<\/p>\n\n\n\n
$('.dropdown-toggle').dropdown()<\/code><\/pre>\n\n\n\nW celu konfiguracji uzyskamy dost\u0119p do :
metod takich jak : toogle, show, hide , update, dispose
opcji: offset, flip, boundary, reference, display, popperConfig<\/p>\n\n\n\n
ng-bootstrap<\/h6>\n\n\n\n<div class=\"row\">\n <div class=\"col\">\n <div ngbDropdown class=\"d-inline-block\">\n <button class=\"btn btn-outline-primary\" id=\"dropdownBasic1\" \n ngbDropdownToggle>Toggle dropdown<\/button>\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\n <button ngbDropdownItem>Action - 1<\/button>\n <button ngbDropdownItem>Another Action<\/button>\n <button ngbDropdownItem>Something else is here<\/button>\n <\/div>\n <\/div>\n <\/div><\/code><\/pre>\n\n\n\nW tym przypadku do konfiguracji globalnej komponentu NgbDropdown pos\u0142u\u017cy nam serwis NgbDropdownConfig. Mo\u017cemy go wstrzykn\u0105\u0107 zazwyczaj w g\u0142\u00f3wnym komponencie po czym odpowiednio skonfigurowa\u0107 dla ca\u0142ej aplikacji. <\/p>\n\n\n\n
Je\u017celi natomiast chcemy skonfigurowa\u0107 go indywidualnie, musimy to zrobi\u0107 przez oznaczenie elementu zmienna lokaln\u0105 kt\u00f3ra b\u0119dzie naszym odniesieniem w komponencie kt\u00f3ry go zawiera.<\/p>\n\n\n\n
Zalety korzystania z ng-bootstrap<\/h5>\n\n\n\n- nie korzysta z jQuery<\/li>
- gotowo\u015b\u0107 do korzystania z modu\u0142\u00f3w es2015 oraz leniwe \u0142adowanie modu\u0142\u00f3w<\/li>
- u\u017cycie tree-shaking do zmniejszenia rozmiaru<\/li>
- mo\u017cliwo\u015b\u0107 u\u017cycia dowolnych element\u00f3w zawarto\u015bci paczki<\/li>
- prekompilacja szablon\u00f3w<\/li><\/ul>\n\n\n\n
Konkluzja<\/h5>\n\n\n\n
Podsumowuj\u0105c kt\u00f3ry lepiej wybra\u0107 ? Tutaj nie ma prostej odpowiedzi, wyb\u00f3r musi by\u0107 dostosowany do tego czego oczekujemy od naszej aplikacji i jakie mamy potrzeby. Je\u017celi piszemy prost\u0105 stron\u0119 typu SPA chcemy korzysta\u0107 w wi\u0119kszym stopniu element\u00f3w u\u0142atwiaj\u0105cych tworzenie naszego interfejsu graficznego dobrym wyborem b\u0119dzie korzystanie tylko z boostrap.js natomiast je\u017celi zale\u017cy nam z korzystaniu tak\u017ce z mo\u017cliwo\u015bci jakie oferuje nam Angular w po\u0142\u0105czeniu z elementami na wcze\u015bniej wymienionej biblioteki najlepszym rozwi\u0105zaniem b\u0119dzie skorzysta\u0107 jak najszybciej ng-boostrap. Pami\u0119tajmy, tak\u017ce i\u017c mo\u017cemy korzysta\u0107 z nich naprzemiennie w zale\u017cno\u015bci od potrzeb. <\/p>\n","protected":false},"excerpt":{"rendered":"
Je\u017celi tworzysz aplikacje przy u\u017cyciu frameworka angular, tworz\u0105c interfejs graficzny nadchodzi chwila w kt\u00f3rej chcemy skorzysta\u0107 z biblioteki CSS. Przeszukuj\u0105c stron\u0119 npmjs w celu znalezienia odpowiedniej paczki natkniemy si\u0119 na jedn\u0105 z najpopularniejszych biblotek jak\u0105 jest bootstrap. Robi\u0105c to pierwszy raz mo\u017cemy by\u0107 nieco zdziwieni poniewa\u017c naszym ocz\u0105 uka\u017c\u0105 si\u0119 dwie paczki o podobnej nazwie […]<\/p>\n","protected":false},"author":1,"featured_media":244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[13,14,16,15,17,18],"class_list":["post-228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-bootstrap","tag-konfiguracja","tag-ngbootstrap","tag-npm","tag-packages"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/228","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=228"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/228\/revisions\/521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/244"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}