Node.js
Node.js (express.js) z angular.js Przykładowy kod

Wprowadzenie

Tworzymy nasz projekt.

Jesteśmy gotowi, więc znów uruchamiamy z konsoli:

mkdir our_project
cd our_project

Teraz jesteśmy w miejscu, w którym będzie żył nasz kod. Aby utworzyć główne archiwum naszego projektu, możesz uruchomić

Ok, ale jak tworzymy projekt szkieletu ekspresowego?

To proste:

npm install -g express express-generator

Linuxowe dystrybucje i Mac powinny używać sudo, aby to zainstalować, ponieważ są zainstalowane w katalogu nodejs, do którego dostęp ma tylko użytkownik root . Jeśli wszystko pójdzie dobrze, możemy w końcu stworzyć szkielet aplikacji ekspresowej, po prostu uruchomić

express

To polecenie utworzy w naszym folderze ekspresową przykładową aplikację. Struktura jest następująca:

bin/
public/
routes/
views/
app.js
package.json

Teraz, jeśli uruchomimy npm, zacznijmy od http: // localhost: 3000 zobaczymy, że aplikacja ekspresowa jest uruchomiona i działa, wystarczy, że wygenerowaliśmy aplikację ekspresową bez większych problemów, ale jak możemy to połączyć z AngularJS? .

Jak działa ekspres, krótko?

Express to platforma zbudowana na bazie Nodejs , oficjalną dokumentację można zobaczyć na stronie Express . Ale dla naszego celu musimy wiedzieć, że Express jest odpowiedzialny, gdy piszemy, na przykład http: // localhost: 3000 / home renderowania strony głównej naszej aplikacji. Z nowo utworzonej aplikacji możemy sprawdzić:

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Ten kod mówi nam, że kiedy użytkownik przechodzi do http: // localhost: 3000 , musi wyświetlić widok indeksu i przekazać JSON z właściwością title i wartością Express. Ale gdy sprawdzimy katalog views i otworzymy plik index.jade, możemy zobaczyć:

extends layout
block content
    h1= title
    p Welcome to #{title}

Jest to kolejna potężna funkcja Express, silniki szablonów , które umożliwiają renderowanie treści na stronie poprzez przekazywanie do niej zmiennych lub dziedziczenie innego szablonu, dzięki czemu strony są bardziej zwarte i lepiej zrozumiałe dla innych. Rozszerzenie pliku to .jade, o ile wiem, Jade zmieniła nazwę dla Puga , w zasadzie jest to ten sam silnik szablonów, ale z pewnymi aktualizacjami i modyfikacjami rdzenia.

Instalowanie wtyczki i aktualizowanie silnika szablonów Express.

Ok, aby zacząć używać Puga jako silnika szablonów naszego projektu, musimy uruchomić:

npm install --save pug

Spowoduje to zainstalowanie Puga jako zależności naszego projektu i zapisanie go w pliku package.json . Aby go użyć, musimy zmodyfikować plik app.js :

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

I zamień silnik linii widoku na mops i to wszystko. Możemy ponownie uruchomić nasz projekt z uruchomieniem npm i zobaczymy, że wszystko działa dobrze.

Jak AngularJS pasuje do tego wszystkiego?

AngularJS to framework JavaScript MVW (Model-View-Whthing) używany głównie do tworzenia instalacji SPA (Simple Page Application) instalacja jest dość prosta, możesz przejść do strony AngularJS i pobrać najnowszą wersję v1.6.4 .

Po pobraniu AngularJS, kiedy należy skopiować plik do naszego folderu publicznego / javascripts w naszym projekcie, małe wyjaśnienie, jest to folder, który obsługuje statyczne zasoby naszej witryny, obrazy, css, pliki javacript i tak dalej. Oczywiście można to skonfigurować za pomocą pliku app.js , ale my uprościmy to. Teraz tworzymy plik o nazwie ng-app.js , plik, w którym będzie mieszkała nasza aplikacja, w folderze publicznym javascripts, właśnie tam, gdzie mieszka AngularJS. Aby uruchomić AngularJS, musimy zmodyfikować zawartość views / layout.pug w następujący sposób:

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

Co my tutaj robimy ?, cóż, uwzględniamy rdzeń AngularJS i nasz niedawno utworzony plik ng-app.js, więc kiedy szablon jest renderowany, uruchomi AngularJS, zauważ użycie dyrektywy ng-app , to mówi AngularJS, że to jest nazwa naszej aplikacji i powinna się jej trzymać.
Tak więc zawartość naszego pliku ng-app.js będzie:

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

Używamy tutaj najbardziej podstawowej funkcji AngularJS, dwukierunkowego wiązania danych , co pozwala nam odświeżyć zawartość naszego widoku i kontrolera natychmiast, jest to bardzo proste wyjaśnienie, ale możesz przeprowadzić badanie w Google lub StackOverflow, aby zobaczyć jak to naprawdę działa.

Mamy więc podstawowe bloki naszej aplikacji AngularJS, ale jest coś, co musimy zrobić, musimy zaktualizować naszą stronę index.pug, aby zobaczyć zmiany w naszej aplikacji kątowej, zróbmy to:

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

Tutaj po prostu wiążemy dane wejściowe z naszą zdefiniowaną nazwą właściwości w zakresie AngularJS wewnątrz naszego kontrolera:

$scope.name = 'sigfried';

Celem tego jest to, że ilekroć zmienimy tekst w danych wejściowych, powyższy akapit zaktualizuje jego zawartość w {{name}}, nazywa się to interpolacją , co jest kolejną funkcją AngularJS służącą do renderowania naszej zawartości w szablonie.

Tak więc wszystko jest skonfigurowane, możemy teraz uruchomić npm start, przejdź do http: // localhost: 3000 i zobacz naszą ekspresową aplikację obsługującą stronę oraz AngularJS zarządzający nakładką aplikacji.