Zaczynamy, commit obecnie dążymy do pobrania danych z API, aby tego dokonać zastępuję tablice $scope.posts na tablicę pobraną z API za pomocą $http. Pracę rozpocząłem od wstrzyknięcia zależności podczas tworzenia kontrolera PostsCtrl. Commit pliczek layouts/posts.html w taki o to sposób dostarczamy zależności $http do kontrolera.
1 2 3 4 5 6 | app.controller('PostsCtrl', function($scope, $http) { $http.get('/posts') .success(function(posts) { $scope.posts = posts })... |
Wstrzykiwanie zależności, czyli nie tworzymy instancji obiektu w danej „klasie”, tylko przekazujemy go przez konstruktor/metodę. Ktoś zapyta dlaczego takie rozwiązanie jest lepsze niż
1 | $http http = new $http() |
Ponieważ parametr ten jest „sztucznie” dodany i nie dotyczy tej funkcji. Przejrzyściej jest przekazać już gotowy wcześniej zdefiniowany obiekt.
Dzięki temu możemy pozbyć się wpisanej na sztywno tablicy $scope.posts na metodę http odwołującą się do API. Jeżeli funkcja wykona się poprawnie, zwróci nam istniejące posty z bazy.
Teraz zlecam Node.js na hostowanie strony HTML kod poniżej
1 2 3 4 | app.get('/', function(req, res) { console.log() res.sendFile(path.join(__dirname, '/', 'layouts/posts.html'))}) |
Teraz wchodząc na adres localhost:3002 aplikacja wyświetli zawartość pliku posts.html.
Następnie wykonuję parę prac czyszczących kod, oraz dodaję sortowanie postów przez serwer w kolejności malejącej, czyli na samej górze wyświetlam najnowszy post.
1 2 3 4 5 | app.get('/posts', function(req, res, next) { Post.find() .sort('-date')...}) |
Oprócz sortowania postów przez serwer, dodaję również warunek w angularze który ma za zadanie zrobić to samo. Wystarczy użyć opcji orderBy: ’-date’ i gotowe.
1 | <li ng-repeat="post in posts | orderBy: '-date' " class="list-group-item"> |
Gdy powyższe zmiany działają, zajmuję się refaktoryzacją kodu, nie wypada trzymać kontrolerów w plikach html, commit.
Commit tutaj zastosowano fajny myk:
1 | router.use(express.static(path.join(__dirname, './../', 'assets'))) |
Node.js ładuje folder z javascriptem, a my konkretny plik możemy wywołać po przez
1 | <script src='/app.js'></script> |
zamiast pisania całej ścieżki. W moim wypadku zawszę dodaję jeden plik app.js i jeden plik app.css do pliku głównego, ponieważ gulp generuję mi wszystkie js-we i css-we zmiany właśnie w tych plikach.
Plik static przechowuje dane statyczne takie które muszę być uruchomione jako pierwsze, żeby załadować odpowiednie biblioteki i dane.
Pozdro 