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.
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ż
$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
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.
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.
<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:
router.use(express.static(path.join(__dirname, './../', 'assets')))
Node.js ładuje folder z javascriptem, a my konkretny plik możemy wywołać po przez
<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 🙂