Node.js
Node.js (express.js) angular.js नमूना कोड के साथ

परिचय

हमारा प्रोजेक्ट बनाना।

हम जाने के लिए अच्छा है, हम फिर से, सांत्वना से:

mkdir our_project
cd our_project

अब हम उस स्थान पर हैं जहाँ हमारा कोड रहेगा। हमारी परियोजना का मुख्य संग्रह बनाने के लिए आप चला सकते हैं

ठीक है, लेकिन हम एक्सप्रेस कंकाल परियोजना कैसे बनाते हैं?

यह आसान है:

npm install -g express express-generator

लिनक्स डिस्ट्रोस और मैक को इसे स्थापित करने के लिए sudo का उपयोग करना चाहिए क्योंकि वे नोडज निर्देशिका में स्थापित हैं जो केवल रूट उपयोगकर्ता द्वारा सुलभ है। अगर सबकुछ ठीक हो गया तो हम अंतत: एक्सप्रेस-ऐप कंकाल बना सकते हैं, बस चलाएं

express

यह कमांड हमारे फ़ोल्डर के अंदर एक एक्सप्रेस उदाहरण ऐप बनाएगी। संरचना इस प्रकार है:

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

अब अगर हम npm चलाते हैं तो http: // localhost: 3000 पर जाएँ, हम एक्सप्रेस ऐप को देखेंगे और रनिंग करेंगे, काफी हद तक हम बहुत अधिक परेशानी के बिना एक एक्सप्रेस ऐप तैयार कर चुके हैं, लेकिन हम इसे AngularJS के साथ कैसे मिला सकते हैं? ।

एक्सप्रेस कैसे काम करता है, संक्षेप में?

एक्सप्रेस , नोड्स के शीर्ष पर निर्मित एक फ्रेमवर्क है, आप एक्सप्रेस साइट पर आधिकारिक दस्तावेज देख सकते हैं। लेकिन हमारे उद्देश्य के लिए हमें यह जानना होगा कि जब हम टाइप करते हैं तो एक्सप्रेस जिम्मेदार होता है, उदाहरण के लिए, http: // localhost: 3000 / हमारे आवेदन के मुख पृष्ठ को प्रस्तुत करने का घर। हाल ही में बनाए गए ऐप से हम जाँच कर सकते हैं:

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;

यह कोड हमें जो बता रहा है वह यह है कि जब उपयोगकर्ता http: // localhost: 3000 पर जाता है तो उसे सूचकांक दृश्य प्रस्तुत करना होगा और शीर्षक संपत्ति और मूल्य एक्सप्रेस के साथ एक JSON पास करना होगा। लेकिन जब हम दृश्य निर्देशिका की जाँच करते हैं और index.jade को खोलते हैं तो हम इसे देख सकते हैं:

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

यह एक और शक्तिशाली एक्सप्रेस सुविधा, टेम्पलेट इंजन है , वे आपको पृष्ठ में सामग्री को इसके चर देकर या किसी अन्य टेम्पलेट को इनहेरिट करने की अनुमति देते हैं ताकि आपके पृष्ठ अधिक कॉम्पैक्ट और दूसरों द्वारा बेहतर समझ में आ सकें। फ़ाइल एक्सटेंशन है। जेडे जहां तक मुझे पता है कि जेड ने पग के लिए नाम बदल दिया है, मूल रूप से एक ही टेम्पलेट इंजन है, लेकिन कुछ अपडेट और कोर संशोधनों के साथ।

पग को स्थापित करना और एक्सप्रेस टेम्पलेट इंजन को अपडेट करना।

ठीक है, हमारी परियोजना के टेम्पलेट इंजन के रूप में पग का उपयोग शुरू करने के लिए हमें चलाने की आवश्यकता है:

npm install --save pug

यह पग को हमारी परियोजना की एक निर्भरता के रूप में स्थापित करेगा और इसे package.json में बचाएगा। इसका उपयोग करने के लिए हमें फ़ाइल app.js को संशोधित करने की आवश्यकता है:

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

और पग के साथ दृश्य इंजन की लाइन को बदलें और यह सब है। हम npm की शुरुआत के साथ फिर से अपना प्रोजेक्ट चला सकते हैं और हम देखेंगे कि सब कुछ ठीक चल रहा है।

कैसे इस सब में फिट बैठता है AngularJS?

एंगुलरजेएस एक जावास्क्रिप्ट एमवीडब्ल्यू (मॉडल-व्यू-जो भी) फ्रेमवर्क मुख्य रूप से एसपीए (सरल पेज एप्लीकेशन) स्थापित करने के लिए उपयोग किया जाता है, काफी सरल है, आप एंगुलरजेएस वेबसाइट पर जा सकते हैं और नवीनतम संस्करण डाउनलोड कर सकते हैं जो कि v1.6.4 है ।

जब हमने अपने प्रोजेक्ट के अंदर हमारे सार्वजनिक / javascripts फ़ोल्डर में फ़ाइल की प्रतिलिपि बनाई जानी चाहिए, तो AngularJS डाउनलोड करने के बाद, यह एक छोटा सा स्पष्टीकरण है, यह वह फ़ोल्डर है जो हमारी साइट, इमेज, सीएसएस, जेवाक्रिप्ट फ़ाइलों और इत्यादि की स्थैतिक संपत्ति परोसता है। बेशक यह app.js फ़ाइल के माध्यम से कॉन्फ़िगर करने योग्य है, लेकिन हम इसे सरल रखेंगे। अब हम ng-app.js नामक एक फ़ाइल बनाते हैं, वह फ़ाइल जहाँ हमारा एप्लिकेशन लाइव होगा, हमारे javascripts सार्वजनिक फ़ोल्डर के अंदर, जहाँ AngularJS रहता है। AngularJS को लाने के लिए हमें विचार / लेआउट की सामग्री को संशोधित करना होगा।

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

हम यहां क्या कर रहे हैं ?, ठीक है, हम AngularJS कोर और हमारी हाल ही में बनाई गई फ़ाइल ng-app शामिल कर रहे हैं। इसलिए जब टेम्पलेट प्रदान किया जाता है तो यह AngularJS को लाएगा, एनजी-ऐप निर्देश के उपयोग को नोटिस करेगा, यह बता रहा है AngularJS कि यह हमारा एप्लिकेशन नाम है और इसे उसी पर टिके रहना चाहिए।
तो, हमारे एनजी app.js की सामग्री होगी:

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

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

हम यहां सबसे बुनियादी AngularJS फ़ीचर, टू-वे डेटा बाइंडिंग का उपयोग कर रहे हैं, यह हमें अपने दृश्य और नियंत्रक की सामग्री को तुरंत ताज़ा करने की अनुमति देता है, यह एक बहुत ही सरल स्पष्टीकरण है, लेकिन आप Google या StackOverflow में एक शोध देख सकते हैं यह वास्तव में कैसे काम करता है।

तो, हमारे पास हमारे AngularJS एप्लिकेशन के बुनियादी ब्लॉक हैं, लेकिन ऐसा कुछ है जो हमें करने को मिला है, हमें अपने कोणीय ऐप के परिवर्तनों को देखने के लिए अपने index.pug पेज को अपडेट करने की आवश्यकता है, आइए इसे करें:

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

यहां हम केवल हमारे नियंत्रक के अंदर AngularJS दायरे में हमारी परिभाषित संपत्ति के नाम के लिए इनपुट बांध रहे हैं:

$scope.name = 'sigfried';

इसका उद्देश्य यह है कि जब भी हम ऊपर दिए गए इनपुट में पाठ को बदलते हैं तो यह {{name}} के अंदर सामग्री को अपडेट कर देगा, इसे इंटरपोलेशन कहा जाता है , फिर से टेम्पलेट में हमारी सामग्री को रेंडर करने के लिए एक और AngularJS सुविधा है।

तो, सब सेटअप है, हम अब npm शुरू चला सकते हैं http: // localhost: 3000 पर जाएं और हमारे सेवा आवेदन को पृष्ठ पर देखें और AngularJS एप्लिकेशन फ्रंटेंड को प्रबंधित करें।