MyTwitter ciąg dalszy

Commits on Jun 29, 2017

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 🙂

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*