Node.js
Node.js (express.js) met angular.js Voorbeeldcode

Invoering

Ons project maken.

We zijn goed om te gaan, dus we rennen, opnieuw vanaf console:

mkdir our_project
cd our_project

Nu zijn we op de plaats waar onze code zal leven. U kunt het hoofdarchief van ons project maken

Oké, maar hoe maken we het uitdrukkelijke skeletproject?

Het is makkelijk:

npm install -g express express-generator

Linux distros en Mac moeten sudo gebruiken om dit te installeren, omdat ze zijn geïnstalleerd in de map nodejs die alleen toegankelijk is voor de rootgebruiker . Als alles goed is gegaan, kunnen we eindelijk het express-app-skelet maken, gewoon uitvoeren

express

Met deze opdracht maakt u in onze map een uitdrukkelijke voorbeeld-app. De structuur is als volgt:

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

Als we nu npm draaien, gaan we naar http: // localhost: 3000, we zien de express-app in werking, eerlijk genoeg hebben we zonder al te veel problemen een express-app gegenereerd, maar hoe kunnen we dit combineren met AngularJS? .

Hoe werkt Express kort?

Express is een framework dat bovenop Nodejs is gebouwd. U kunt de officiële documentatie op de Express-site bekijken . Maar voor ons doel moeten we weten dat Express verantwoordelijk is wanneer we bijvoorbeeld http: // localhost: 3000 / home typen voor het weergeven van de startpagina van onze applicatie. Van de recent gecreëerde app kunnen we controleren:

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;

Wat deze code ons vertelt, is dat wanneer de gebruiker naar http: // localhost: 3000 gaat, deze de indexweergave moet weergeven en een JSON moet doorgeven met een titel en de waarde Express. Maar wanneer we de map views bekijken en index.jade openen, kunnen we dit zien:

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

Dit is een andere krachtige Express-functie, template-engines , waarmee je inhoud op de pagina kunt weergeven door er variabelen aan door te geven of een andere sjabloon te erven, zodat je pagina's compacter en beter te begrijpen zijn voor anderen. De bestandsextensie is .jade voor zover ik weet dat Jade de naam voor Pug heeft gewijzigd, is in principe dezelfde sjabloon-engine, maar met enkele updates en kernaanpassingen.

Pug installeren en Express-sjabloon-engine bijwerken.

Ok, om Pug als de sjabloon-engine van ons project te gaan gebruiken, moeten we het volgende uitvoeren:

npm install --save pug

Hiermee wordt Pug geïnstalleerd als een afhankelijkheid van ons project en wordt het opgeslagen in package.json . Om het te gebruiken moeten we het bestand app.js aanpassen :

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

En de lijn van de view engine vervangen door pug en dat is alles. We kunnen ons project met npm start opnieuw uitvoeren en we zullen zien dat alles goed werkt.

Hoe past AngularJS hierin?

AngularJS is een Javascript MVW (Model-View-Whatever) Framework dat voornamelijk wordt gebruikt om SPA (Simple Page Application) te installeren. Installatie is vrij eenvoudig, u kunt naar de AngularJS-website gaan en de nieuwste versie downloaden die v1.6.4 is .

Nadat we AngularJS hebben gedownload, wanneer moet het bestand naar onze openbare / javascript- map binnen ons project worden gekopieerd, een kleine uitleg, dit is de map die de statische activa van onze site, afbeeldingen, css, javacript-bestanden, enzovoort bedient. Natuurlijk kan dit worden geconfigureerd via het app.js- bestand, maar we houden het simpel. Nu maken we een bestand met de naam ng-app.js , het bestand waar onze toepassing zal staan, in onze openbare map met JavaScript, precies waar AngularJS woont. Om AngularJS ter sprake te brengen, moeten we de inhoud van views / layout.pug als volgt wijzigen:

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')

Wat doen we hier? Nou, we nemen de AngularJS-kern en ons recent gemaakte bestand ng-app.js op, dus wanneer de sjabloon wordt weergegeven, wordt AngularJS weergegeven, let op het gebruik van de ng-app- richtlijn, dit is veelzeggend AngularJS dat dit onze applicatienaam is en dat het eraan moet blijven hangen.
De inhoud van onze ng-app.js is dus:

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

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

We gebruiken hier de meest elementaire AngularJS-functie, tweerichtingsgegevensbinding , dit stelt ons in staat om de inhoud van onze weergave en controller onmiddellijk te vernieuwen, dit is een zeer eenvoudige uitleg, maar u kunt een onderzoek in Google of StackOverflow maken om te zien hoe het echt werkt.

We hebben dus de basisblokken van onze AngularJS-applicatie, maar er is iets dat we moeten doen, we moeten onze index.pug-pagina bijwerken om de wijzigingen van onze hoekige app te zien, laten we het doen:

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

Hier binden we alleen de invoer aan onze gedefinieerde eigenschapsnaam in het AngularJS-bereik in onze controller:

$scope.name = 'sigfried';

Het doel hiervan is dat wanneer we de tekst in de invoer wijzigen, de bovenstaande paragraaf de inhoud in de {{name}} bijwerkt, dit wordt interpolatie genoemd , weer een andere AngularJS-functie om onze inhoud in de sjabloon weer te geven.

Dus alles is ingesteld, we kunnen nu npm start uitvoeren, ga naar http: // localhost: 3000 en bekijk onze express-applicatie die de pagina bedient en AngularJS die de frontend van de applicatie beheert.