Node.js
Node.js (express.js) med angular.js Provkod

Introduktion

Skapa vårt projekt.

Vi är bra att gå så vi springer igen från konsolen:

mkdir our_project
cd our_project

Nu är vi på den plats där vår kod kommer att leva. För att skapa huvudarkivet för vårt projekt kan du köra

Okej, men hur skapar vi skelettprojektet?

Det är enkelt:

npm install -g express express-generator

Linux-distros och Mac bör använda sudo för att installera detta eftersom de är installerade i nodejs-katalogen, som endast är tillgänglig för rotanvändaren . Om allt gick bra kan vi äntligen skapa express-app-skelettet, bara springa

express

Detta kommando skapar en uttrycklig exempelapp i vår mapp. Strukturen är som följer:

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

Nu om vi kör npm börjar vi gå till http: // localhost: 3000 ser vi express-appen igång, tillräckligt bra att vi har genererat en express-app utan för mycket besvär, men hur kan vi blanda detta med AngularJS? .

Hur uttrycker verk, kort?

Express är ett ramverk uppbyggt ovanpå Nodejs , du kan se den officiella dokumentationen på Express-webbplatsen . Men för vårt syfte måste vi veta att Express är det ansvariga när vi skriver till exempel http: // localhost: 3000 / home för att rendera hemsidan för vår applikation. Från den nyligen skapade appen kan vi kontrollera:

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;

Vad den här koden berättar för oss är att när användaren går till http: // localhost: 3000 måste den visa indexvyn och passera en JSON med en titelegenskap och värde Express. Men när vi kontrollerar visningskatalogen och öppnar index.jade kan vi se detta:

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

Detta är en annan kraftfull Express-funktion, mallmotorer , de låter dig göra innehåll på sidan genom att skicka variabler till den eller ärva en annan mall så att dina sidor är mer kompakta och bättre förståliga av andra. Filtillägget är .jade så vitt jag vet Jade ändrade namnet på Pug , är i princip samma mallmotor men med några uppdateringar och kärnmodifieringar.

Installera Pug och uppdatera Express-mallmotorn.

Okej, för att börja använda Pug som mallmotor för vårt projekt måste vi köra:

npm install --save pug

Detta kommer att installera Pug som ett beroende av vårt projekt och spara det till package.json . För att använda den måste vi ändra filen app.js :

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

Och byt ut siktlinjen mot mops och det är allt. Vi kan köra igen vårt projekt med npm-start och vi ser att allt fungerar bra.

Hur AngularJS passar in i allt detta?

AngularJS är ett Javascript MVW (Model-View-Whatever) -ramverk som huvudsakligen används för att skapa SPA (Simple Page Application) -installation är ganska enkelt, du kan gå till AngularJS-webbplatsen och ladda ner den senaste versionen som är v1.6.4 .

Efter att vi laddat ner AngularJS när ska kopiera filen till vår mapp public / javascripts i vårt projekt, en liten förklaring, detta är den mapp som tjänar de statiska tillgångarna på vår webbplats, bilder, css, javacript-filer och så vidare. Naturligtvis kan detta konfigureras via app.js- filen, men vi håller det enkelt. Nu skapar vi en fil med namnet ng-app.js , filen där vår applikation kommer att leva, i vår offentliga mapp för javascripts, precis där AngularJS bor. För att få upp AngularJS måste vi ändra innehållet i vyer / layout.pug enligt följande:

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

Vad gör vi här ?, ja, vi inkluderar AngularJS-kärnan och vår nyligen skapade fil ng-app.js så när mallen återges kommer den att föra upp AngularJS, lägg märke till användningen av ng-app- direktivet, detta berättar AngularJS att detta är vårt applikationsnamn och det borde hålla sig till det.
Så innehållet i vår ng-app.js kommer att vara:

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

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

Vi använder den mest grundläggande AngularJS-funktionen här, tvåvägs databindning , detta gör att vi kan uppdatera innehållet i vår syn och kontroller direkt, detta är en mycket enkel förklaring, men du kan göra en undersökning i Google eller StackOverflow för att se hur det verkligen fungerar.

Så vi har de grundläggande blocken för vår AngularJS-applikation, men det är något vi måste göra, vi måste uppdatera vår index.pug-sida för att se ändringarna i vår vinklade app, låt oss göra det:

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

Här binder vi bara inmatningen till vårt definierade fastighetsnamn i AngularJS-räckvidden i vår controller:

$scope.name = 'sigfried';

Syftet med detta är att när vi ändrar texten i inmatningen kommer stycket ovan att uppdatera innehållet i {{name}}, detta kallas interpolation , återigen en annan AngularJS-funktion för att göra vårt innehåll i mallen.

Så allt är inställt, vi kan nu köra npm start gå till http: // localhost: 3000 och se vår expressapplikation som serverar sidan och AngularJS hanterar applikationsfronten.