Socket.io உடன் AngularJS ஒத்துழைப்பு குழு

நூலாசிரியர்: Peter Berry
உருவாக்கிய தேதி: 14 ஜூலை 2021
புதுப்பிப்பு தேதி: 13 மே 2024
Anonim
கோண, முனை மற்றும் Socket.io ஐப் பயன்படுத்தி எளிதான நிகழ்நேர அரட்டை பயன்பாடு
காணொளி: கோண, முனை மற்றும் Socket.io ஐப் பயன்படுத்தி எளிதான நிகழ்நேர அரட்டை பயன்பாடு

உள்ளடக்கம்

  • அறிவு தேவை: இடைநிலை ஜாவாஸ்கிரிப்ட்
  • தேவை: Node.js, NPM
  • திட்ட நேரம்: 2 மணி நேரம்

உலாவியில் பணக்கார கிளையன்ட் பக்க பயன்பாடுகளை உருவாக்குவதற்கு AngularJS குறிப்பாக மிகவும் பொருத்தமானது, மேலும் நீங்கள் ஒரு சிறிய Socket.io ஐ மிக்ஸியில் சேர்க்கும்போது, ​​விஷயங்கள் மிகவும் சுவாரஸ்யமானவை. இந்த கட்டுரையில், கிளையன்ட்-சைட் பயன்பாட்டிற்கான AngularJS மற்றும் இணைக்கப்பட்ட அனைத்து வாடிக்கையாளர்களுக்கும் இடையில் நிலையைப் பகிர்ந்து கொள்ள Socket.io ஐப் பயன்படுத்தும் நிகழ்நேர ஒத்துழைப்பு வாரியத்தை உருவாக்க உள்ளோம்.

நாங்கள் தொடங்குவதற்கு முன்பு கொஞ்சம் வீட்டுப்பாடம் செய்வோம். குறியீட்டின் ஒவ்வொரு சிறிய மூலையையும் நான் மறைக்கப் போவதில்லை என்பதால், உங்களுக்கு HTML மற்றும் ஜாவாஸ்கிரிப்ட் பற்றிய அடிப்படை புரிதல் இருப்பதாக நான் கருதுகிறேன். உதாரணமாக, HTML கோப்பின் தலையில் நான் சேர்த்துள்ள CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை நான் அழைக்கப் போவதில்லை, ஏனெனில் அங்கு புதிய தகவல்கள் எதுவும் இல்லை.

மேலும், எனது கிட்ஹப் கணக்கிலிருந்து குறியீட்டைப் பின்தொடர நான் உங்களை ஊக்குவிக்கிறேன். எனது நல்ல நண்பர் பிரையன் ஃபோர்டுக்கு ஒரு சிறந்த சாக்கெட்.ஓ விதை உள்ளது, இது எனது சில அசல் யோசனைகளை அடிப்படையாகக் கொண்டது.

ஒத்துழைப்பு குழுவில் நாம் விரும்பும் நான்கு முக்கிய அம்சங்கள் ஒரு குறிப்பை உருவாக்குவது, குறிப்புகளைப் படிப்பது, குறிப்பைப் புதுப்பிப்பது, குறிப்பை நீக்குவது மற்றும் வேடிக்கையாக, ஒரு குறிப்பை பலகையில் நகர்த்துவது. ஆம், அது சரியானது, நாங்கள் நிலையான CRUD அம்சங்களில் கவனம் செலுத்துகிறோம். இந்த அடிப்படை அம்சங்களில் கவனம் செலுத்துவதன் மூலம், வடிவங்கள் வெளிவருவதற்கு போதுமான குறியீட்டை நாங்கள் உள்ளடக்கியிருப்போம், இதனால் நீங்கள் அவற்றை எடுத்து வேறு இடங்களில் பயன்படுத்தலாம்.


01. சேவையகம்

நாம் முதலில் Node.js சேவையகத்துடன் தொடங்கப் போகிறோம், ஏனென்றால் எல்லாவற்றையும் கட்டமைக்கப் போகும் அடித்தளமாக இது செயல்படும்.

எக்ஸ்பிரஸ் மற்றும் சாக்கெட்.யோவுடன் ஒரு Node.js சேவையகத்தை உருவாக்க உள்ளோம். நாங்கள் எக்ஸ்பிரஸைப் பயன்படுத்துவதற்கான காரணம் என்னவென்றால், இது Node.js க்குள் நிலையான சொத்து சேவையகத்தை அமைப்பதற்கான ஒரு நல்ல வழிமுறையை வழங்குகிறது. எக்ஸ்பிரஸ் மிகவும் அற்புதமான அம்சங்களுடன் வருகிறது, ஆனால் இந்த விஷயத்தில், சேவையகத்திற்கும் கிளையனுக்கும் இடையில் பயன்பாட்டை சுத்தமாக பிரிக்க இதைப் பயன்படுத்தப் போகிறோம்.

(நீங்கள் Node.js மற்றும் NPM ஐ நிறுவியுள்ளீர்கள் என்ற அனுமானத்தின் கீழ் நான் செயல்படுகிறேன். விரைவான கூகிள் தேடல் நீங்கள் செய்யாவிட்டால் இவை எவ்வாறு நிறுவப்படும் என்பதைக் காண்பிக்கும்.)

02. வெற்று எலும்புகள்

எனவே சேவையகத்தின் வெற்று எலும்புகளை உருவாக்க, எழுந்து இயங்க இரண்டு விஷயங்களைச் செய்ய வேண்டும்.

// app.js

// அ .1
var express = தேவை (’எக்ஸ்பிரஸ்’),
app = எக்ஸ்பிரஸ் ();
server = required (’http’). createServer (பயன்பாடு),
io = தேவை (’socket.io’). கேளுங்கள் (சேவையகம்);

// அ .2
app.configure (செயல்பாடு () {
app.use (express.static (__ dirname + ’/ public’));
});

// அ .3
server.listen (1337);


A.1 நாங்கள் எங்கள் Node.js தொகுதிக்கூறுகளை அறிவித்து நிறுவுகிறோம், இதன்மூலம் அவற்றை எங்கள் பயன்பாட்டில் பயன்படுத்தலாம். நாங்கள் எக்ஸ்பிரஸ் என்று அறிவிக்கிறோம், எக்ஸ்பிரஸை நிறுவுகிறோம், பின்னர் ஒரு HTTP சேவையகத்தை உருவாக்கி எக்ஸ்பிரஸ் நிகழ்வை அதற்குள் அனுப்புகிறோம். அங்கிருந்து நாங்கள் Socket.io ஐ நிறுவுகிறோம், எங்கள் சேவையக நிகழ்வைக் கண்காணிக்கச் சொல்கிறோம்.

A.2 கோப்புகளை வழங்க எங்கள் பொது கோப்பகத்தைப் பயன்படுத்த எங்கள் எக்ஸ்பிரஸ் பயன்பாட்டிற்கு சொல்கிறோம்.

A.3 நாங்கள் சேவையகத்தைத் தொடங்கி துறைமுகத்தில் கேட்கச் சொல்கிறோம் 1337.

இதுவரை அது மிகவும் வலியற்றது மற்றும் விரைவானது. நாங்கள் குறியீட்டில் 10 வரிகளுக்கு குறைவாக இருக்கிறோம் என்று நம்புகிறேன், ஏற்கனவே எங்களிடம் ஒரு செயல்பாட்டு Node.js சேவையகம் உள்ளது. முன்னோக்கி!

03. உங்கள் சார்புகளை அறிவிக்கவும்

// packages.json
{
"பெயர்": "கோண-கொலாப்-பலகை",
"விளக்கம்": "AngularJS ஒத்துழைப்பு வாரியம்",
"பதிப்பு": "0.0.1-1",
"தனிப்பட்ட": உண்மை,
"சார்புநிலைகள்": {
"எக்ஸ்பிரஸ்": "3.x",
"socket.io": "0.9.x"
}
}

NPM இன் மிகச்சிறந்த அம்சங்களில் ஒன்று, உங்கள் சார்புகளை a இல் அறிவிக்கும் திறன் packages.json கோப்பு பின்னர் தானாகவே அவற்றை நிறுவவும் npm நிறுவவும் கட்டளை வரியில்.


04. வயர் அப் சாக்கெட்.ஓ

பயன்பாட்டில் நாம் விரும்பும் முக்கிய அம்சங்களை நாங்கள் ஏற்கனவே வரையறுத்துள்ளோம், எனவே ஒவ்வொரு செயல்பாட்டிற்கும் நிகழ்வைக் கையாள Socket.io நிகழ்வு கேட்பவர்களையும் பொருத்தமான மூடுதலையும் அமைக்க வேண்டும்.

கீழேயுள்ள குறியீட்டில், இது அடிப்படையில் நிகழ்வு கேட்போர் மற்றும் கால்பேக்குகளின் உள்ளமைவு என்பதை நீங்கள் காண்பீர்கள். முதல் நிகழ்வு இணைப்பு நிகழ்வு, மூடுவதில் எங்கள் பிற நிகழ்வுகளை கம்பி செய்ய நாங்கள் பயன்படுத்துகிறோம்.

io.sockets.on (’இணைப்பு’, செயல்பாடு (சாக்கெட்) {
socket.on (’createNote’, செயல்பாடு (தரவு) {
socket.broadcast.emit (’onNoteCreated’, தரவு);
});

socket.on (’updateNote’, செயல்பாடு (தரவு) {
socket.broadcast.emit (’onNoteUpdated’, தரவு);
});

socket.on (’deleteNote’, செயல்பாடு (தரவு) {
socket.broadcast.emit (’onNoteDeleted’, தரவு);
});

socket.on (’moveNote’, செயல்பாடு (தரவு) {
socket.broadcast.emit (’onNoteMoved’, தரவு);
});
});

இங்கிருந்து நாங்கள் கேட்போரைச் சேர்க்கிறோம் createNote, updateNote, deleteNote மற்றும் moveNote. கால்பேக் செயல்பாட்டில், என்ன நிகழ்வு நடந்தது என்பதை நாங்கள் ஒளிபரப்புகிறோம், இதனால் எந்தவொரு வாடிக்கையாளரும் கேட்கும் நிகழ்வு நிகழ்ந்தது என்பதை அறிவிக்க முடியும்.

தனிப்பட்ட நிகழ்வு கையாளுபவர்களில் கால்பேக் செயல்பாடுகளைப் பற்றி சுட்டிக்காட்ட வேண்டிய சில விஷயங்கள் உள்ளன. ஒன்று, நீங்கள் அனைவருக்கும் ஒரு நிகழ்வை அனுப்ப விரும்பினால், ஆனால் நீங்கள் செருகும் நிகழ்வை வெளியிடும் கிளையண்ட் ஒளிபரப்பு முன்னால் உமிழ்வு செயல்பாடு அழைப்பு. இரண்டாவதாக, நிகழ்வின் கட்டணத்தை ஆர்வமுள்ள தரப்பினருக்கு நாங்கள் அனுப்புகிறோம், இதன் மூலம் அவர்கள் எவ்வாறு பொருத்தமாக இருக்கிறார்கள் என்பதை அவர்கள் செயலாக்க முடியும்.

05. உங்கள் இயந்திரங்களைத் தொடங்குங்கள்!

இப்போது நாங்கள் எங்கள் சார்புகளை வரையறுத்து, எக்ஸ்பிரஸ் மற்றும் சாக்கெட்.ஓ சக்திகளுடன் எங்கள் Node.js பயன்பாட்டை அமைத்துள்ளோம், Node.js சேவையகத்தைத் தொடங்குவது மிகவும் எளிது.

முதலில் நீங்கள் உங்கள் Node.js சார்புகளை நிறுவுகிறீர்கள்:

npm நிறுவவும்

பின்னர் நீங்கள் இதைப் போன்ற சேவையகத்தைத் தொடங்குகிறீர்கள்:

முனை app.js

பின்னர்! உங்கள் உலாவியில் இந்த முகவரிக்குச் செல்லுங்கள். பாம்!

06. நகரும் முன் சில நேர்மையான எண்ணங்கள்

நான் முதன்மையாக ஒரு ஃபிரான்டென்ட் டெவலப்பர், ஆரம்பத்தில் எனது பயன்பாட்டிற்கு ஒரு Node.js சேவையகத்தை இணைப்பதில் நான் சற்று மிரட்டப்பட்டேன். AngularJS பகுதி ஒரு ஸ்னாப் ஆனால் சர்வர் பக்க ஜாவாஸ்கிரிப்ட்? ஒரு திகில் படத்திலிருந்து தவழும் இசையை வரிசைப்படுத்தவும்.

ஆனால், ஒரு நிலையான வலை சேவையகத்தை ஒரு சில வரிகளில் அமைக்க முடியும் என்பதைக் கண்டறிய நான் முற்றிலும் தளம் பெற்றேன், மேலும் சில வரிகளில் உலாவிகளுக்கு இடையிலான அனைத்து நிகழ்வுகளையும் கையாள Socket.io ஐப் பயன்படுத்துகிறேன். அது இன்னும் ஜாவாஸ்கிரிப்ட் தான்! நேரமின்மைக்காக, நாங்கள் சில அம்சங்களை மட்டுமே உள்ளடக்குகிறோம், ஆனால் கட்டுரையின் முடிவில் நீந்துவது எளிது என்பதை நீங்கள் காண்பீர்கள் என்று நம்புகிறேன் - மேலும் குளத்தின் ஆழமான முடிவு மிகவும் பயமாக இல்லை.

07. கிளையண்ட்

இப்போது எங்கள் சேவையகத்துடன் எங்கள் உறுதியான அடித்தளத்தை வைத்திருக்கிறோம், எனக்கு பிடித்த பகுதிக்கு - கிளையண்டுக்கு செல்லலாம்! இழுக்கக்கூடிய பகுதிக்கு AngularJS, jQueryUI மற்றும் ஒரு நடை தளத்திற்கு ட்விட்டர் பூட்ஸ்டார்பைப் பயன்படுத்தப் போகிறோம்.

08. வெற்று எலும்புகள்

தனிப்பட்ட விருப்பத்தின் ஒரு விஷயமாக, நான் ஒரு புதிய AngularJS பயன்பாட்டைத் தொடங்கும்போது, ​​நான் தொடங்க வேண்டும் என்று எனக்குத் தெரிந்த குறைந்தபட்ச குறைந்தபட்சத்தை விரைவாக வரையறுக்க விரும்புகிறேன், பின்னர் அதை விரைவாகச் செய்யத் தொடங்குவேன்.

ஒவ்வொரு AngularJS பயன்பாடும் குறைந்தது ஒரு கட்டுப்படுத்தியுடன் பூட்ஸ்ட்ராப் செய்யப்பட வேண்டும், எனவே இது பொதுவாக நான் எப்போதும் தொடங்கும் இடமாகும்.

பயன்பாட்டை தானாக பூட்ஸ்ட்ராப் செய்ய நீங்கள் சேர்க்க வேண்டும் ng-app பயன்பாடு வாழ விரும்பும் HTML முனைக்கு. பெரும்பாலான நேரங்களில், அதை HTML குறிச்சொல்லில் சேர்ப்பது முற்றிலும் ஏற்றுக்கொள்ளத்தக்கதாக இருக்கும். இதற்கு ஒரு பண்புக்கூறையும் சேர்த்துள்ளேன் ng-app நான் பயன்படுத்த விரும்புகிறேன் என்று சொல்ல செயலி தொகுதி, நான் ஒரு கணத்தில் வரையறுப்பேன்.

// பொது / குறியீட்டு. html
html ng-app = "app">

எனக்கு குறைந்தபட்சம் ஒரு கட்டுப்பாட்டாளர் தேவைப்படுவார் என்று எனக்குத் தெரியும், எனவே அதைப் பயன்படுத்தி அழைப்பேன் ng- கட்டுப்படுத்தி மற்றும் அதை ஒரு சொத்தை ஒதுக்குதல் MainCtrl.

body ng-controller = "MainCtrl"> / body>

எனவே இப்போது பெயரிடப்பட்ட ஒரு தொகுதிக்கான ஹூக்கில் இருக்கிறோம் செயலி மற்றும் ஒரு கட்டுப்படுத்தி MainCtrl. இப்போது மேலே சென்று அவற்றை உருவாக்குவோம்.

ஒரு தொகுதியை உருவாக்குவது மிகவும் நேரடியானது. அழைப்பதன் மூலம் அதை வரையறுக்கிறீர்கள் angular.module அதற்கு ஒரு பெயரைக் கொடுக்கும். எதிர்கால குறிப்புக்கு, வெற்று வரிசையின் இரண்டாவது அளவுரு, பயன்பாட்டில் பயன்படுத்த துணை தொகுதிகளை நீங்கள் செலுத்தலாம். இது இந்த டுடோரியலின் நோக்கத்திற்கு வெளியே உள்ளது, ஆனால் உங்கள் பயன்பாடு சிக்கலான மற்றும் தேவைகளில் வளரத் தொடங்கும் போது இது எளிது.

// பொது / ஜே.எஸ் / கொலாப்.ஜெஸ்
var app = angular.module (’app’, []);

இல் சில வெற்று ஒதுக்கிடங்களை நாங்கள் அறிவிக்கப் போகிறோம் செயலி தொடங்கும் தொகுதி MainCtrl கீழே.இவை அனைத்தையும் நாங்கள் பின்னர் நிரப்புவோம், ஆனால் தொடக்கத்திலிருந்தே அடிப்படை கட்டமைப்பை விளக்க விரும்பினேன்.

app.controller (’MainCtrl’, செயல்பாடு (ope நோக்கம்) {});

நாம் Socket.io செயல்பாட்டை a இல் மடிக்கப் போகிறோம் சாக்கெட் சேவையின் மூலம் நாம் அந்த பொருளை இணைத்து, உலகளாவிய பெயர்வெளியில் மிதக்க விடக்கூடாது.

app.factory (’சாக்கெட்’, செயல்பாடு ($ rootScope) {});

நாங்கள் அதில் இருக்கும்போது, ​​ஒரு உத்தரவை நாங்கள் அறிவிக்கப் போகிறோம் ஒட்டும் குறிப்பு உள்ள ஒட்டும் குறிப்பு செயல்பாட்டை இணைக்க நாங்கள் பயன்படுத்தப் போகிறோம்.

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {});

எனவே இதுவரை நாங்கள் செய்ததை மறுபரிசீலனை செய்வோம். பயன்பாட்டைப் பயன்படுத்தி பூட்ஸ்ட்ராப் செய்துள்ளோம் ng-app மற்றும் எங்கள் பயன்பாட்டுக் கட்டுப்படுத்தியை HTML இல் அறிவித்தது. நாங்கள் பயன்பாட்டு தொகுதியை வரையறுத்து உருவாக்கியுள்ளோம் MainCtrl கட்டுப்படுத்தி, தி சாக்கெட் சேவை மற்றும் ஒட்டும் குறிப்பு உத்தரவு.

09. ஒட்டும் குறிப்பை உருவாக்குதல்

இப்போது எங்களிடம் AngularJS பயன்பாட்டின் எலும்புக்கூடு உள்ளது, நாங்கள் உருவாக்கும் அம்சத்தை உருவாக்கத் தொடங்குவோம்.

app.controller (’MainCtrl’, செயல்பாடு (ope நோக்கம், சாக்கெட்) {// B.1
$ scope.notes = []; // பி .2

// வருகை
socket.on (’onNoteCreated’, செயல்பாடு (தரவு) {// B.3
$ scope.notes.push (தரவு);
});

// வெளிச்செல்லும்
$ scope.createNote = செயல்பாடு () {// B.4
var குறிப்பு = {
ஐடி: புதிய தேதி (). getTime (),
தலைப்பு: ’புதிய குறிப்பு’,
உடல்: ’நிலுவையில் உள்ளது’
};

$ scope.notes.push (குறிப்பு);
socket.emit (’createNote’, குறிப்பு);
};

B.1 AngularJS இல் ஒரு சார்பு ஊசி அம்சம் உள்ளது, எனவே நாங்கள் ஒரு ஊசி போடுகிறோம் ope நோக்கம் பொருள் மற்றும் சாக்கெட் சேவை. தி ope நோக்கம் பொருள் ஒரு வியூமோடலாக செயல்படுகிறது மற்றும் அடிப்படையில் ஜாவாஸ்கிரிப்ட் பொருளாகும், இது இருவழி தரவுத்தளத்தை செயல்படுத்த சில நிகழ்வுகளை சுடுகிறது.

B.2 பார்வையை பிணைக்க நாங்கள் பயன்படுத்தும் வரிசையை அறிவிக்கிறோம்.

B.3 இதற்கான கேட்பவரை நாங்கள் சேர்க்கிறோம் onNoteCreated நிகழ்வு சாக்கெட் சேவை மற்றும் நிகழ்வு பேலோடை தள்ளும் ope scope.notes வரிசை.

B.4 நாங்கள் அறிவித்துள்ளோம் a createNote இயல்புநிலையை உருவாக்கும் முறை குறிப்பு பொருள் மற்றும் அதை தள்ளும் ope scope.notes வரிசை. இது பயன்படுத்துகிறது சாக்கெட் உமிழும் சேவை createNote நிகழ்வு மற்றும் கடந்து புதிய குறிப்பு உடன் பொருள்.

எனவே இப்போது குறிப்பை உருவாக்க ஒரு முறை இருப்பதால், அதை எவ்வாறு அழைப்பது? அது ஒரு நல்ல கேள்வி! HTML கோப்பில், உள்ளமைக்கப்பட்ட AngularJS கட்டளையைச் சேர்க்கிறோம் ng- கிளிக் செய்யவும் பொத்தானை நோக்கி பின்னர் சேர்க்கவும் createNote பண்புக்கூறு மதிப்பாக முறை அழைப்பு.

button id = "createButton" ng-click = "createNote ()"> குறிப்பு / பொத்தானை உருவாக்கு>

இதுவரை நாங்கள் என்ன செய்தோம் என்பதை விரைவாக மதிப்பாய்வு செய்வதற்கான நேரம். நாங்கள் ஒரு வரிசையைச் சேர்த்துள்ளோம் ope நோக்கம் பொருள் MainCtrl இது பயன்பாட்டிற்கான எல்லா குறிப்புகளையும் வைத்திருக்கும். நாங்கள் ஒரு சேர்த்துள்ளோம் createNote முறை ope நோக்கம் ஒரு புதிய உள்ளூர் குறிப்பை உருவாக்க, பின்னர் அந்த குறிப்பை மற்ற வாடிக்கையாளர்களுக்கு ஒளிபரப்ப வேண்டும் சாக்கெட் சேவை. நிகழ்வு கேட்போரையும் சேர்த்துள்ளோம் சாக்கெட் சேவை எனவே மற்ற வாடிக்கையாளர்கள் ஒரு குறிப்பை எப்போது உருவாக்கினார்கள் என்பதை அறிந்து கொள்வோம், எனவே அதை எங்கள் சேகரிப்பில் சேர்க்கலாம்.

10. ஒட்டும் குறிப்புகளைக் காண்பித்தல்

குறிப்பு பொருளை உருவாக்கி அதை உலாவிகளுக்கு இடையில் பகிர்ந்து கொள்ளும் திறன் இப்போது எங்களிடம் உள்ளது, ஆனால் அதை உண்மையில் எவ்வாறு காண்பிப்பது? இங்குதான் வழிமுறைகள் வருகின்றன.

வழிமுறைகள் மற்றும் அவற்றின் சிக்கல்கள் ஒரு பரந்த பொருள், ஆனால் குறுகிய பதிப்பு அவை தனிபயன் செயல்பாட்டுடன் கூறுகள் மற்றும் பண்புகளை நீட்டிக்க ஒரு வழியை வழங்குகின்றன. HTML இல் உங்கள் பயன்பாட்டைச் சுற்றி முழு டி.எஸ்.எல் (டொமைன் ஸ்பெஷிக் லாங்வேஜ்) ஐ உருவாக்க முக்கியமாக உங்களை அனுமதிப்பதால், கோணல்கள் ஜே.ஜி.யைப் பற்றி எனக்கு மிகவும் பிடித்த பகுதியாகும்.

எங்கள் ஒத்துழைப்பு வாரியத்திற்கான ஒட்டும் குறிப்புகளை நாங்கள் உருவாக்கப் போகிறோம் என்பதால், அதை உருவாக்க வேண்டும் என்பது இயற்கையானது ஒட்டும் குறிப்பு உத்தரவு. நீங்கள் அறிவிக்க விரும்பும் ஒரு தொகுதியில் டைரெக்டிவ் முறையை அழைப்பதன் மூலமும் ஒரு பெயரிலும் ஒரு டைரெக்டிவ் வரையறை பொருளைத் தரும் ஒரு செயல்பாட்டிலும் அனுப்புவதன் மூலம் வழிமுறைகள் வரையறுக்கப்படுகின்றன. டைரெக்டிவ் வரையறை பொருள் பொருளில் நீங்கள் வரையறுக்கக்கூடிய பல பண்புகள் உள்ளன, ஆனால் நாங்கள் இங்கே சிலவற்றை மட்டுமே எங்கள் நோக்கங்களுக்காகப் பயன்படுத்தப் போகிறோம்.

டைரெக்டிவ் வரையறை பொருளில் நீங்கள் வரையறுக்கக்கூடிய பண்புகளின் முழு பட்டியலையும் காண AngularJS ஆவணங்களை நீங்கள் பார்க்க பரிந்துரைக்கிறேன்.

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {
var linker = செயல்பாடு (நோக்கம், உறுப்பு, attrs) {};

var கட்டுப்படுத்தி = செயல்பாடு (ope நோக்கம்) {};

திரும்ப {
கட்டுப்படுத்து: ’அ’, // சி .1
இணைப்பு: இணைப்பான், // சி .2
கட்டுப்படுத்தி: கட்டுப்படுத்தி, // சி .3
நோக்கம்: C. // C.4
குறிப்பு: ’=’,
ondelete: ’&’
}
};
});

C.1 உங்கள் கட்டளையை ஒரு குறிப்பிட்ட வகை HTML உறுப்புடன் கட்டுப்படுத்தலாம். மிகவும் பொதுவான இரண்டு உறுப்பு அல்லது பண்புக்கூறு, நீங்கள் பயன்படுத்துவதாக அறிவிக்கிறீர்கள் இ மற்றும் அ முறையே. நீங்கள் இதை ஒரு CSS வகுப்பு அல்லது கருத்துக்கு கட்டுப்படுத்தலாம், ஆனால் இவை பொதுவானவை அல்ல.

C.2 உங்கள் DOM கையாளுதல் குறியீட்டை நீங்கள் வைக்கும் இடமே இணைப்பு செயல்பாடு. நான் கண்டறிந்த சில விதிவிலக்குகள் உள்ளன, ஆனால் இது எப்போதும் உண்மைதான் (குறைந்தது 99 சதவீதம் நேரம்). இது AngularJS இன் அடிப்படை தரை விதி, அதனால்தான் நான் அதை வலியுறுத்தினேன்.

C.3 கட்டுப்பாட்டு செயல்பாடு, பயன்பாட்டிற்காக நாங்கள் வரையறுத்த முக்கிய கட்டுப்படுத்தியைப் போலவே செயல்படுகிறது ope நோக்கம் நாம் கடந்து செல்லும் பொருள், கட்டளை வாழும் DOM உறுப்புக்கு குறிப்பிட்டது.

C.4 AngularJS தனிமைப்படுத்தப்பட்ட நோக்கம் கொண்ட ஒரு கருத்தைக் கொண்டுள்ளது, இது ஒரு உத்தரவின் நோக்கம் வெளி உலகத்துடன் எவ்வாறு தொடர்பு கொள்கிறது என்பதை வெளிப்படையாக வரையறுக்க உங்களை அனுமதிக்கிறது. நாங்கள் நோக்கம் அறிவிக்காவிட்டால், பெற்றோர்-குழந்தை உறவோடு பெற்றோரின் நோக்கத்திலிருந்து இந்த உத்தரவு மறைமுகமாக பெறப்பட்டிருக்கும். நிறைய சந்தர்ப்பங்களில் இது உகந்ததல்ல. நோக்கத்தை தனிமைப்படுத்துவதன் மூலம், வெளி உலகம் கவனக்குறைவாகவும், உங்கள் உத்தரவின் நிலையை மோசமாக பாதிக்கும் வாய்ப்புகளையும் நாங்கள் தணிக்கிறோம்.

இருவழி தரவு-பிணைப்பை நான் அறிவித்துள்ளேன் குறிப்பு உடன் = சின்னம் மற்றும் ஒரு வெளிப்பாடு பிணைப்பு ondelete உடன் & சின்னம். கட்டமைப்பில் மிகவும் சிக்கலான பாடங்களில் ஒன்றாக இருப்பதால், தனிமைப்படுத்தப்பட்ட நோக்கம் குறித்த முழு விளக்கத்திற்கு AngularJS ஆவணங்களைப் படிக்கவும்.

எனவே உண்மையில் DOM இல் ஒரு ஒட்டும் குறிப்பைச் சேர்ப்போம்.

எந்தவொரு நல்ல கட்டமைப்பையும் போலவே, AngularJS பெட்டியிலிருந்து சில சிறந்த அம்சங்களுடன் வருகிறது. எளிதான அம்சங்களில் ஒன்று ng- மீண்டும். இந்த AngularJS உத்தரவு உங்களை ஒரு பொருளின் வரிசையில் அனுப்ப அனுமதிக்கிறது, மேலும் அது வரிசையில் உள்ள உருப்படிகள் இருப்பதால் பல தடவைகள் குறிச்சொல்லாக நகலெடுக்கிறது. கீழேயுள்ள வழக்கில், நாங்கள் அதை மீண்டும் செய்கிறோம் குறிப்புகள் வரிசை மற்றும் நகல் div உறுப்பு மற்றும் அதன் குழந்தைகள் நீளத்திற்கு குறிப்புகள் வரிசை.

div sticky-note ng-ആവർത്തനം = "குறிப்புகளில் குறிப்பு" குறிப்பு = "குறிப்பு" ondelete = "நீக்கு குறிப்பு (ஐடி)">
பொத்தானை வகை = "பொத்தான்" ng-click = "deleteNote (note.id)"> × / button>
உள்ளீடு ng-model = "note.title" ng-change = "updateNote (குறிப்பு)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (குறிப்பு)"
> {{note.body} text / textarea>
/ div>

அழகு ng- மீண்டும் நீங்கள் கடந்து செல்லும் எந்த வரிசையிலும் இது பிணைக்கப்பட்டுள்ளது, மேலும் நீங்கள் வரிசையில் ஒரு உருப்படியைச் சேர்க்கும்போது, ​​உங்கள் DOM உறுப்பு தானாகவே புதுப்பிக்கப்படும். நீங்கள் இதை ஒரு படி மேலே கொண்டு செல்லலாம் மற்றும் நிலையான DOM கூறுகளை மட்டுமல்ல, பிற தனிப்பயன் வழிமுறைகளையும் மீண்டும் செய்யலாம். அதனால்தான் நீங்கள் பார்க்கிறீர்கள் ஒட்டும் குறிப்பு உறுப்பு மீதான பண்புக்கூறாக.

தனிப்பயன் குறியீட்டின் வேறு இரண்டு பிட்கள் தெளிவுபடுத்தப்பட வேண்டும். நாங்கள் நோக்கம் தனிமைப்படுத்தியுள்ளோம் ஒட்டும் குறிப்புகள் இரண்டு பண்புகள் குறித்த உத்தரவு. முதல் ஒன்று பிணைப்பு வரையறுக்கப்பட்ட தனிமைப்படுத்தப்பட்ட நோக்கம் குறிப்பு சொத்து. இதன் பொருள், குறிப்பு பொருள் பெற்றோர் நோக்கத்தில் மாறும்போதெல்லாம், அது தானாகவே தொடர்புடைய குறிப்பு பொருளை உத்தரவில் புதுப்பிக்கும் மற்றும் நேர்மாறாக இருக்கும். மற்ற வரையறுக்கப்பட்ட தனிமைப்படுத்தப்பட்ட நோக்கம் உள்ளது ondelete பண்புக்கூறு. இதன் பொருள் என்னவென்றால் ondelete உத்தரவில் அழைக்கப்படுகிறது, இது எந்த வெளிப்பாட்டிலும் இருக்கும் ondelete கட்டளையை உறுதிப்படுத்தும் DOM உறுப்பு மீதான பண்புக்கூறு.

ஒரு உத்தரவு உடனடிப்படுத்தப்படும்போது, ​​அது DOM இல் சேர்க்கப்படும் மற்றும் இணைப்பு செயல்பாடு அழைக்கப்படுகிறது. உறுப்பில் சில இயல்புநிலை DOM பண்புகளை அமைக்க இது சரியான வாய்ப்பு. நாம் கடந்து செல்லும் உறுப்பு அளவுரு உண்மையில் ஒரு jQuery பொருள், எனவே நாம் அதில் jQuery செயல்பாடுகளைச் செய்யலாம்.

(AngularJS உண்மையில் அதில் கட்டமைக்கப்பட்ட jQuery இன் துணைக்குழுவுடன் வருகிறது, ஆனால் நீங்கள் ஏற்கனவே jQuery இன் முழு பதிப்பையும் சேர்த்திருந்தால், AngularJS அதற்கு ஒத்திவைக்கும்.)

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {
var linker = செயல்பாடு (நோக்கம், உறுப்பு, attrs) {
// சில DOM துவக்கத்தை நன்றாக மாற்ற
element.css (’இடது’, ’10px’);
element.css (’top’, ’50px’);
element.hide (). fadeIn ();
};
});

மேலே உள்ள குறியீட்டில் நாம் ஒட்டும் குறிப்பை மேடையில் நிலைநிறுத்தி அதை மங்கச் செய்கிறோம்.

11. ஒட்டும் குறிப்பை நீக்குதல்

எனவே இப்போது நாம் ஒரு ஒட்டும் குறிப்பைச் சேர்த்து காண்பிக்க முடியும், ஒட்டும் குறிப்புகளை நீக்க வேண்டிய நேரம் இது. ஒட்டும் குறிப்புகளை உருவாக்குவதும் நீக்குவதும் குறிப்புகள் கட்டுப்பட்ட வரிசையில் இருந்து உருப்படிகளைச் சேர்ப்பது மற்றும் நீக்குவது. அந்த வரிசையை பராமரிப்பது பெற்றோர் நோக்கத்தின் பொறுப்பு, அதனால்தான் நாங்கள் உத்தரவுக்குள்ளேயே நீக்குதல் கோரிக்கையை உருவாக்குகிறோம், ஆனால் பெற்றோரின் நோக்கம் உண்மையான கனமான தூக்குதலைச் செய்யட்டும்.

இதனால்தான், வெளிப்பாட்டின் வரையறுக்கப்பட்ட தனிமைப்படுத்தப்பட்ட நோக்கத்தை உருவாக்கும் அனைத்து சிக்கல்களையும் நாங்கள் சந்தித்தோம்: எனவே உத்தரவு நீக்குதல் நிகழ்வை உள்நாட்டில் பெற்று அதை செயலாக்கத்திற்காக அதன் பெற்றோருக்கு அனுப்ப முடியும்.

கட்டளைக்குள் உள்ள HTML ஐக் கவனியுங்கள்.

பொத்தானை வகை = "பொத்தான்" ng-click = "deleteNote (note.id)"> × / button>

நான் சொல்லப்போகும் அடுத்த விஷயம் நீண்ட தூரம் போல் தோன்றலாம், ஆனால் நாங்கள் ஒரே பக்கத்தில் இருப்பதை நினைவில் கொள்ளுங்கள், நான் விரிவாகக் கூறிய பிறகு அது அர்த்தமுள்ளதாக இருக்கும். ஒட்டும் குறிப்பின் மேல் வலது மூலையில் உள்ள பொத்தானைக் கிளிக் செய்தால் நாங்கள் அழைக்கிறோம் deleteNote உத்தரவின் கட்டுப்படுத்தி மற்றும் கடந்து செல்லும் note.id மதிப்பு. கட்டுப்படுத்தி பின்னர் அழைக்கிறது ondelete, இது நாம் வெளிப்படுத்திய எந்த வெளிப்பாட்டையும் செயல்படுத்துகிறது. இதுவரை மிகவும் நல்ல? கட்டுப்படுத்தியில் ஒரு உள்ளூர் முறையை நாங்கள் அழைக்கிறோம், பின்னர் தனிமைப்படுத்தப்பட்ட நோக்கத்தில் வரையறுக்கப்பட்ட எந்த வெளிப்பாட்டையும் அழைப்பதன் மூலம் அதை ஒப்படைக்கிறோம். பெற்றோரை அழைக்கும் வெளிப்பாடு இப்போதுதான் அழைக்கப்படுகிறது deleteNote அத்துடன்.

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {
var கட்டுப்படுத்தி = செயல்பாடு (ope நோக்கம்) {
$ scope.deleteNote = செயல்பாடு (ஐடி) {
$ scope.ondelete ({
நான் செய்தேன்
});
};
};

திரும்ப {
கட்டுப்படுத்து: ’அ’,
இணைப்பு: இணைப்பான்,
கட்டுப்படுத்தி: கட்டுப்படுத்தி,
வாய்ப்பு: {
குறிப்பு: ’=’,
ondelete: ’&’
}
};
});

(வெளிப்பாடு-வரையறுக்கப்பட்ட தனிமைப்படுத்தப்பட்ட நோக்கத்தைப் பயன்படுத்தும் போது, ​​அளவுருக்கள் ஒரு பொருள் வரைபடத்தில் அனுப்பப்படும்.)

பெற்றோர் நோக்கத்தில், deleteNote அழைக்கப்படுகிறது மற்றும் பயன்படுத்தி ஒரு நிலையான நீக்குதல் செய்கிறது angular.forEach குறிப்புகள் வரிசைக்கு மேல் மீண்டும் செயல்படுவதற்கான பயன்பாட்டு செயல்பாடு. செயல்பாடு அதன் உள்ளூர் வணிகத்தை கையாண்டவுடன், அது முன்னேறி, உலகின் பிற பகுதிகளுக்கு ஏற்ப அதற்கேற்ப நிகழ்வை வெளியிடுகிறது.

app.controller (’MainCtrl’, செயல்பாடு (ope நோக்கம், சாக்கெட்) {
$ scope.notes = [];

// வருகை
socket.on (’onNoteDeleted’, செயல்பாடு (தரவு) {
$ scope.deleteNote (data.id);
});

// வெளிச்செல்லும்
$ scope.deleteNote = செயல்பாடு (ஐடி) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (பழைய குறிப்புகள், செயல்பாடு (குறிப்பு) {
if (note.id! == id) newNotes.push (குறிப்பு);
});

$ scope.notes = புதிய குறிப்புகள்;
socket.emit (’deleteNote’, {id: id});
};
});

12. ஒட்டும் குறிப்பைப் புதுப்பித்தல்

நாங்கள் அற்புதமான முன்னேற்றம் அடைகிறோம்! நாங்கள் மேற்கொண்டுள்ள இந்த சூறாவளி சுற்றுப்பயணத்திலிருந்து சில வடிவங்களை நீங்கள் காணத் தொடங்குகிறீர்கள் என்று இப்போது நம்புகிறேன். பட்டியலில் அடுத்த உருப்படி புதுப்பிப்பு அம்சமாகும்.

நாங்கள் உண்மையான DOM உறுப்புகளில் தொடங்கி சேவையகத்திற்கு எல்லா வழிகளிலும் பின்தொடர்ந்து கிளையண்ட்டுக்கு பின்வாங்கப் போகிறோம். ஒட்டும் குறிப்பின் தலைப்பு அல்லது உடல் எப்போது மாற்றப்படுகிறது என்பதை முதலில் நாம் தெரிந்து கொள்ள வேண்டும். AngularJS தரவு மாதிரியின் ஒரு பகுதியாக படிவக் கூறுகளைக் கருதுகிறது, எனவே நீங்கள் இருவழி தரவு-பிணைப்பை ஒரு நொடியில் இணைக்க முடியும். இதைச் செய்ய ng- மாதிரி நீங்கள் பிணைக்க விரும்பும் சொத்தில் கட்டளையிடுங்கள். இந்த விஷயத்தில் நாங்கள் பயன்படுத்தப் போகிறோம் note.title மற்றும் note.body முறையே.

இந்த பண்புகளில் ஏதேனும் ஒன்று மாறும்போது, ​​அந்தத் தகவலைக் கடந்து செல்ல நாங்கள் விரும்புகிறோம். இதை நாங்கள் நிறைவேற்றுகிறோம் ng- மாற்றம் உத்தரவு மற்றும் அழைக்க அதைப் பயன்படுத்தவும் updateNote குறிப்பு பொருளில் தானே கடந்து செல்லுங்கள். AngularJS சில புத்திசாலித்தனமான அழுக்கு சோதனைகளை செய்கிறது ng- மாதிரி மாறிவிட்டது, பின்னர் இருக்கும் வெளிப்பாட்டை செயல்படுத்துகிறது ng- மாற்றம்.

உள்ளீடு ng-model = "note.title" ng-change = "updateNote (குறிப்பு)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body} text / textarea>

பயன்படுத்துவதன் தலைகீழ் ng- மாற்றம் உள்ளூர் மாற்றம் ஏற்கனவே நிகழ்ந்துள்ளது, மேலும் செய்தியை வெளியிடுவதற்கு நாங்கள் பொறுப்பு. கட்டுப்படுத்தியில், updateNote என்று அழைக்கப்படுகிறது, அங்கிருந்து நாம் வெளியேற்றப் போகிறோம் updateNote எங்கள் சேவையகம் மற்ற வாடிக்கையாளர்களுக்கு ஒளிபரப்ப நிகழ்வு.

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {
var கட்டுப்படுத்தி = செயல்பாடு (ope நோக்கம்) {
$ scope.updateNote = செயல்பாடு (குறிப்பு) {
socket.emit (’updateNote’, குறிப்பு);
};
};
});

டைரெக்டிவ் கன்ட்ரோலரில், நாங்கள் கேட்கிறோம் onNoteUpdated மற்றொரு கிளையண்டிலிருந்து ஒரு குறிப்பு புதுப்பிக்கப்பட்டபோது தெரிந்துகொள்ளும் நிகழ்வு, இதன் மூலம் எங்கள் உள்ளூர் பதிப்பைப் புதுப்பிக்க முடியும்.

var கட்டுப்படுத்தி = செயல்பாடு (ope நோக்கம்) {
// வருகை
socket.on (’onNoteUpdated’, செயல்பாடு (தரவு) {
// அதே குறிப்பு இருந்தால் புதுப்பிக்கவும்
if (data.id == $ scope.note.id) {

$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};

13. ஒட்டும் குறிப்பை நகர்த்துவது

இந்த கட்டத்தில் நாங்கள் அடிப்படையில் CRUD கிட்டி பூலைச் சுற்றி ஒரு மடியைச் செய்துள்ளோம், வாழ்க்கை நன்றாக இருக்கிறது! உங்கள் நண்பர்களைக் கவர ஒரு பார்லர் தந்திரத்திற்காக, திரையைச் சுற்றி குறிப்புகளை நகர்த்துவதற்கும், ஒருங்கிணைப்புகளை உண்மையான நேரத்தில் புதுப்பிப்பதற்கும் நாங்கள் சேர்க்க உள்ளோம். பீதி அடைய வேண்டாம் - இது இன்னும் சில வரிகளின் குறியீடு. இந்த கடின உழைப்பு அனைத்தும் பலனளிக்கும். நான் சத்தியம் செய்கிறேன்!

சிறப்பு விருந்தினரான jQueryUI ஐ விருந்துக்கு அழைத்துள்ளோம், இழுக்கக்கூடியவர்களுக்காக நாங்கள் அனைத்தையும் செய்தோம். உள்நாட்டில் ஒரு குறிப்பை இழுக்கும் திறனைச் சேர்ப்பது ஒரு வரியின் குறியீட்டை மட்டுமே எடுக்கும். நீங்கள் சேர்த்தால் element.draggable (); உங்கள் இணைப்பான் செயல்பாட்டிற்கு நீங்கள் சர்வைவர் எழுதிய ‘புலியின் கண்’ கேட்கத் தொடங்குவீர்கள், ஏனெனில் இப்போது உங்கள் குறிப்புகளைச் சுற்றி இழுக்கலாம்.

இழுத்தல் எப்போது நிறுத்தப்பட்டது என்பதை அறிய விரும்புகிறோம், மேலும் புதிய ஆயங்களை கடந்து செல்ல வேண்டும். jQueryUI சில புத்திசாலித்தனமான நபர்களால் கட்டப்பட்டது, எனவே இழுத்தல் நிறுத்தப்படும் போது நீங்கள் நிறுத்த நிகழ்வுக்கு ஒரு அழைப்பு செயல்பாட்டை வரையறுக்க வேண்டும். நாங்கள் பிடிக்கிறோம் note.id நோக்கம் பொருள் மற்றும் இடது மற்றும் மேல் CSS மதிப்புகள் ui பொருள். அந்த அறிவைக் கொண்டு நாம் எல்லாவற்றையும் செய்து வருகிறோம்: உமிழ்!

app.directive (’ஒட்டும் குறிப்பு’, செயல்பாடு (சாக்கெட்) {
var linker = செயல்பாடு (நோக்கம், உறுப்பு, attrs) {
element.draggable ({
நிறுத்து: செயல்பாடு (நிகழ்வு, ui) {
socket.emit (’moveNote’, {
ஐடி: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, செயல்பாடு (தரவு) {
// அதே குறிப்பு இருந்தால் புதுப்பிக்கவும்
if (data.id == scope.note.id) {
element.animate ({
இடது: data.x,
மேலே: data.y.
});
}
});
};
});

இந்த கட்டத்தில், சாக்கெட் சேவையிலிருந்து நகர்வு தொடர்பான நிகழ்வையும் நாங்கள் கேட்கிறோம் என்பதில் ஆச்சரியமில்லை. இந்த வழக்கில் அது onNoteMoved நிகழ்வு மற்றும் குறிப்பு ஒரு பொருத்தமாக இருந்தால், இடது மற்றும் மேல் CSS பண்புகளை புதுப்பிப்போம். பாம்! முடிந்தது!

14. போனஸ்

இது ஒரு போனஸ் பிரிவு, நீங்கள் 10 நிமிடங்களுக்குள் அதை அடைய முடியும் என்று எனக்கு முழு நம்பிக்கை இல்லை என்றால் நான் சேர்க்க மாட்டேன். நாங்கள் ஒரு நேரடி சேவையகத்திற்கு அனுப்பப் போகிறோம் (அதைச் செய்வது எவ்வளவு எளிது என்று நான் இன்னும் வியப்படைகிறேன்).

முதலில், நீங்கள் ஒரு இலவச நோட்ஜிட்சு சோதனைக்கு பதிவுபெற வேண்டும். சோதனை 30 நாட்களுக்கு இலவசம், இது உங்கள் கால்களை ஈரமாக்குவதற்கு ஏற்றது.

உங்கள் கணக்கை உருவாக்கியதும் நீங்கள் கட்டளை வரியிலிருந்து செய்யக்கூடிய ஜிட்சு தொகுப்பை நிறுவ வேண்டும் pm npm jitsu -g ஐ நிறுவவும்.

நீங்கள் கட்டளை வரியிலிருந்து உள்நுழைய வேண்டும் $ ஜிட்சு உள்நுழைவு உங்கள் சான்றுகளை உள்ளிடவும்.

உங்கள் பயன்பாட்டில் நேரடியாக இருப்பதை உறுதிசெய்து தட்டச்சு செய்க it ஜிட்சு வரிசைப்படுத்து மற்றும் கேள்விகளைக் கொண்டு செல்லுங்கள். நான் வழக்கமாக முடிந்தவரை இயல்புநிலைக்கு விடுகிறேன், அதாவது எனது பயன்பாட்டிற்கு ஒரு பெயரைக் கொடுக்கிறேன், ஆனால் ஒரு துணை டொமைன் அல்ல.

மேலும், என் அன்பான நண்பர்களே, அதெல்லாம் இருக்கிறது! சேவையகம் பயன்படுத்தப்பட்டதும், அது செல்லத் தயாரானதும் உங்கள் பயன்பாட்டிற்கான URL ஐப் பெறுவீர்கள்.

15. முடிவு

இந்த கட்டுரையில் நாங்கள் நிறைய AngularJS மைதானத்தை உள்ளடக்கியுள்ளோம், மேலும் இந்த செயல்பாட்டில் நீங்கள் மிகவும் மகிழ்ச்சியாக இருந்தீர்கள் என்று நம்புகிறேன். ஏறக்குறைய 200 வரிக் குறியீடுகளில் AngularJS மற்றும் Socket.io உடன் நீங்கள் என்ன செய்ய முடியும் என்பது மிகவும் சுத்தமாக இருக்கிறது என்று நினைக்கிறேன்.

முக்கிய விஷயங்களில் கவனம் செலுத்துவதற்காக நான் மறைக்காத சில விஷயங்கள் இருந்தன, ஆனால் மூலத்தை இழுத்து, பயன்பாட்டுடன் விளையாட நான் உங்களை ஊக்குவிக்கிறேன். நாங்கள் ஒரு வலுவான அடித்தளத்தை உருவாக்கியுள்ளோம், ஆனால் நீங்கள் சேர்க்கக்கூடிய பல அம்சங்கள் இன்னும் உள்ளன. ஹேக்கிங் கிடைக்கும்!

லூகாஸ் ருபெல்கே ஒரு தொழில்நுட்ப ஆர்வலர் மற்றும் மானிங் பப்ளிகேஷன்ஸ் நிறுவனத்தில் AngularJS உடன் இணைந்து எழுதியுள்ளார். அவருக்கு மிகவும் பிடித்த விஷயம் என்னவென்றால், அவர் புதிய தொழில்நுட்பத்தைப் பற்றி மக்களை உற்சாகப்படுத்துவதாகும். அவர் பீனிக்ஸ் வலை பயன்பாட்டு பயனர் குழுவை நடத்தி வருகிறார் மற்றும் குற்றத்தில் தனது சக பங்காளிகளுடன் பல ஹேக்கத்தான்களை வழங்கியுள்ளார்.

இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!

  • பயன்பாட்டை உருவாக்குவது எப்படி
  • எங்களுக்கு பிடித்த வலை எழுத்துருக்கள் - அவற்றுக்கு ஒரு பைசா கூட செலவாகாது
  • ஆக்மென்ட் ரியாலிட்டிக்கு அடுத்தது என்ன என்பதைக் கண்டறியவும்
  • இலவச அமைப்புகளைப் பதிவிறக்குக: உயர் தெளிவுத்திறன் மற்றும் இப்போது பயன்படுத்த தயாராக உள்ளது
முந்தைய கட்டுரை

இறுதி UI வடிவமைப்பு வழிகாட்டி
அடுத்த கட்டுரை

கிரியேட்டிவ் வீக் வருகிறது!
இன்று படிக்கவும்
ஃபிளேம் பெயிண்டர் மூலம் தொடங்கவும்
கண்டுபிடி

ஃபிளேம் பெயிண்டர் மூலம் தொடங்கவும்

மே 2024
ஃபிளேம் பெயிண்டர் என்பது ஒரு தனித்துவமான பெயிண்ட் மற்றும் துகள் விளைவுகள் தொகுப்பாகும், இது அசல் ஓவியங்கள், ஒளி விளைவுகள், வழக்கத்திற்கு மாறான வடிவமைப்புகள் அல்லது அருமையான பின்னணியை விரைவாகவும் எளிதா...
24 மணி நேரத்திற்குள் பிளெண்டர் 3D ஐ எவ்வாறு கற்றுக்கொள்வது
கண்டுபிடி

24 மணி நேரத்திற்குள் பிளெண்டர் 3D ஐ எவ்வாறு கற்றுக்கொள்வது

மே 2024
டெஸ்க்டாப் ஹாலோகிராபி ஒரு நிஜமாக மாறும் நாள் வரை, 3D கிராபிக்ஸ் உலகின் முழு கிரெயிலாகவே இருக்கும். ஆனால் 3D மிகவும் தொழில்நுட்ப கைவினையாக இருக்கலாம். ஒவ்வொரு 3 டி புரோகிராமிற்கும் அதன் சொந்த தனித்துவங...
எல்லா காலத்திலும் 20 சிறந்த ஆல்பம் உள்ளடக்கியது
கண்டுபிடி

எல்லா காலத்திலும் 20 சிறந்த ஆல்பம் உள்ளடக்கியது

மே 2024
பல தலைமுறைகளாக, ஆல்பம் கலை இசையைக் கேட்பதில் இன்றியமையாத பகுதியாகும். ஊடகங்கள் வினைல் முதல் கேசட்டுகள் வரை குறுந்தகடுகளாக மாறியிருக்கலாம், பின்னர் சமீபத்தில் மீண்டும் வினைலுக்கு மாறியிருக்கலாம், ஆனால்...