Socket.io తో AngularJS సహకార బోర్డు

రచయిత: Peter Berry
సృష్టి తేదీ: 14 జూలై 2021
నవీకరణ తేదీ: 13 మే 2024
Anonim
Socket.io తో AngularJS సహకార బోర్డు - సృజనాత్మక
Socket.io తో AngularJS సహకార బోర్డు - సృజనాత్మక

విషయము

  • జ్ఞానం అవసరం: ఇంటర్మీడియట్ జావాస్క్రిప్ట్
  • అవసరం: Node.js, NPM
  • ప్రాజెక్ట్ సమయం: 2 గంటలు

బ్రౌజర్‌లో రిచ్ క్లయింట్-సైడ్ అనువర్తనాలను రూపొందించడానికి AngularJS ప్రత్యేకంగా సరిపోతుంది మరియు మీరు కొద్దిగా Socket.io ని మిక్స్‌లో చేర్చినప్పుడు, విషయాలు నిజంగా ఆసక్తికరంగా ఉంటాయి. ఈ వ్యాసంలో మేము క్లయింట్-సైడ్ అప్లికేషన్ కోసం AngularJS మరియు కనెక్ట్ చేసిన అన్ని క్లయింట్ల మధ్య స్థితిని పంచుకోవడానికి Socket.io ని ఉపయోగించే రియల్ టైమ్ సహకార బోర్డుని నిర్మించబోతున్నాము.

మేము ప్రారంభించడానికి ముందు కొంచెం హౌస్ కీపింగ్ చేద్దాం. నేను కోడ్ యొక్క ప్రతి చిన్న మూలను కవర్ చేయనందున మీకు HTML మరియు జావాస్క్రిప్ట్ యొక్క ప్రాథమిక పట్టు ఉందని నేను అనుకుంటాను. ఉదాహరణకు, క్రొత్త సమాచారం లేనందున నేను HTML ఫైల్ యొక్క తలపై చేర్చిన CSS మరియు జావాస్క్రిప్ట్ ఫైళ్ళను నేను పిలవడం లేదు.

అలాగే, అనుసరించడానికి నా GitHub ఖాతా నుండి కోడ్‌ను పట్టుకోవాలని నేను మిమ్మల్ని ప్రోత్సహిస్తున్నాను. నా మంచి స్నేహితుడు బ్రియాన్ ఫోర్డ్ కూడా ఒక అద్భుతమైన సాకెట్.యో సీడ్‌ను కలిగి ఉన్నాడు, ఇది నా అసలు ఆలోచనలపై ఆధారపడింది.

సహకార బోర్డులో మనకు కావలసిన నాలుగు ప్రధాన లక్షణాలు గమనికను సృష్టించడం, గమనికలను చదవడం, గమనికను నవీకరించడం, గమనికను తొలగించడం మరియు వినోదం కోసం, బోర్డుపై గమనికను తరలించడం. అవును, అది సరైనది, మేము ప్రామాణిక CRUD లక్షణాలపై దృష్టి పెడుతున్నాము. ఈ ప్రాథమిక లక్షణాలపై దృష్టి పెట్టడం ద్వారా, నమూనాలు ఉద్భవించటానికి మేము తగినంత కోడ్‌ను కవర్ చేస్తామని నేను నమ్ముతున్నాను, తద్వారా మీరు వాటిని తీసుకొని వాటిని వేరే చోట వర్తింపజేయవచ్చు.


01. సర్వర్

మేము మొదట Node.js సర్వర్‌తో ప్రారంభించబోతున్నాం, ఎందుకంటే ఇది మిగతావన్నీ నిర్మించబోతున్న పునాదిగా పనిచేస్తుంది.

మేము ఎక్స్‌ప్రెస్ మరియు సాకెట్.యోతో నోడ్.జెస్ సర్వర్‌ను నిర్మించబోతున్నాం. మేము ఎక్స్‌ప్రెస్‌ను ఉపయోగించటానికి కారణం, ఇది Node.js లో స్టాటిక్ అసెట్ సర్వర్‌ను సెటప్ చేయడానికి చక్కని యంత్రాంగాన్ని అందిస్తుంది. ఎక్స్‌ప్రెస్ నిజంగా అద్భుతమైన లక్షణాలతో వస్తుంది, అయితే, ఈ సందర్భంలో, సర్వర్ మరియు క్లయింట్ మధ్య అనువర్తనాన్ని శుభ్రంగా విభజించడానికి మేము దీనిని ఉపయోగించబోతున్నాము.

(మీరు Node.js మరియు NPM ఇన్‌స్టాల్ చేశారనే under హలో నేను పనిచేస్తున్నాను. మీరు చేయకపోతే వీటిని ఎలా ఇన్‌స్టాల్ చేయాలో శీఘ్ర Google శోధన మీకు చూపుతుంది.)

02. ఎముకలు

కాబట్టి సర్వర్ యొక్క ఎముక ఎముకలను నిర్మించడానికి, మేము లేచి అమలు చేయడానికి రెండు పనులు చేయాలి.

// app.js

// ఎ .1
var ఎక్స్ప్రెస్ = అవసరం (’ఎక్స్ప్రెస్’),
app = ఎక్స్ప్రెస్ ();
సర్వర్ = అవసరం (’http’). క్రియేట్ సర్వర్ (అనువర్తనం),
io = required (’socket.io’). వినండి (సర్వర్);

// ఎ .2
app.configure (ఫంక్షన్ () {
app.use (express.static (__ dirname + ’/ public’));
});

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


A.1 మేము మా Node.js మాడ్యూళ్ళను డిక్లేర్ చేస్తున్నాము మరియు తక్షణం చేస్తున్నాము, తద్వారా వాటిని మా అప్లికేషన్‌లో ఉపయోగించుకోవచ్చు. మేము ఎక్స్‌ప్రెస్‌ను ప్రకటిస్తున్నాము, ఎక్స్‌ప్రెస్‌ను ఇన్‌స్టాంటియేట్ చేసి, ఆపై హెచ్‌టిటిపి సర్వర్‌ను సృష్టించి, ఎక్స్‌ప్రెస్ ఇన్‌స్టాన్స్‌లో పంపుతున్నాము. మరియు అక్కడ నుండి మేము 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. వైర్ అప్ సాకెట్.యో

అనువర్తనంలో మనకు కావలసిన ప్రధాన లక్షణాలను మేము ఇప్పటికే నిర్వచించాము మరియు అందువల్ల మేము సాకెట్.యో ఈవెంట్ శ్రోతలను మరియు ప్రతి ఆపరేషన్ కోసం ఈవెంట్‌ను నిర్వహించడానికి తగిన మూసివేతను ఏర్పాటు చేయాలి.

దిగువ కోడ్‌లో ఇది తప్పనిసరిగా ఈవెంట్ శ్రోతలు మరియు కాల్‌బ్యాక్‌ల కాన్ఫిగరేషన్ అని మీరు గమనించవచ్చు. మొదటి సంఘటన కనెక్షన్ ఈవెంట్, మూసివేతలో మా ఇతర సంఘటనలను తీర్చడానికి మేము ఉపయోగిస్తాము.

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. ముందుకు వెళ్ళే ముందు కొన్ని దాపరికం ఆలోచనలు

నేను ప్రధానంగా ఫ్రంటెండ్ డెవలపర్ మరియు నా అనువర్తనానికి నోడ్.జెస్ సర్వర్‌ను కట్టిపడేశారని నేను మొదట్లో కొంచెం భయపడ్డాను. AngularJS భాగం స్నాప్ కానీ సర్వర్ వైపు జావాస్క్రిప్ట్? భయానక చిత్రం నుండి గగుర్పాటు సంగీతాన్ని క్యూ చేయండి.

కానీ, నేను స్టాటిక్ వెబ్ సర్వర్‌ను కొన్ని పంక్తుల కోడ్‌లో సెటప్ చేయగలనని మరియు మరికొన్ని పంక్తులలో బ్రౌజర్‌ల మధ్య అన్ని సంఘటనలను నిర్వహించడానికి సాకెట్.యోని ఉపయోగిస్తానని తెలుసుకోవడానికి నేను పూర్తిగా ఫ్లోర్ అయ్యాను. మరియు ఇది ఇప్పటికీ జావాస్క్రిప్ట్ మాత్రమే! సమయస్ఫూర్తి కోసం, మేము కొన్ని లక్షణాలను మాత్రమే కవర్ చేస్తున్నాము, కాని వ్యాసం ముగిసే సమయానికి ఈత కొట్టడం సులభం అని మీరు చూస్తారని నేను ఆశిస్తున్నాను - మరియు పూల్ యొక్క లోతైన ముగింపు అంత భయానకంగా లేదు.

07. క్లయింట్

ఇప్పుడు మా సర్వర్‌తో మా దృ foundation మైన పునాది ఉంది, నా అభిమాన భాగానికి - క్లయింట్‌కు వెళ్దాం! మేము 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 అనువర్తనం = angular.module (’అనువర్తనం’, []);

మేము కొన్ని ఖాళీ ప్లేస్‌హోల్డర్‌లను ప్రకటించబోతున్నాము అనువర్తనం తో ప్రారంభమయ్యే మాడ్యూల్ MainCtrl క్రింద.మేము ఇవన్నీ తరువాత నింపుతాము కాని ప్రారంభం నుండి ప్రాథమిక నిర్మాణాన్ని వివరించాలనుకుంటున్నాను.

app.controller (’MainCtrl’, ఫంక్షన్ ($ స్కోప్) {});

మేము సాకెట్.యో కార్యాచరణను కూడా a లో చుట్టబోతున్నాము సాకెట్ సేవ కాబట్టి మేము ఆ వస్తువును చుట్టుముట్టవచ్చు మరియు దానిని గ్లోబల్ నేమ్‌స్పేస్‌లో తేలుతూ ఉండకూడదు.

app.factory (’సాకెట్’, ఫంక్షన్ ($ rootScope) {});

మేము దాని వద్ద ఉన్నప్పుడు, మేము ఒక ఆదేశాన్ని ప్రకటించబోతున్నాము అంటించే నోటు లో స్టికీ నోట్ కార్యాచరణను చుట్టుముట్టడానికి మేము ఉపయోగించబోతున్నాం.

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {});

కాబట్టి మనం ఇప్పటివరకు ఏమి చేసామో సమీక్షిద్దాం. మేము ఉపయోగించి అప్లికేషన్‌ను బూట్‌స్ట్రాప్ చేసాము ng-app మరియు మా అప్లికేషన్ కంట్రోలర్‌ను HTML లో ప్రకటించింది. మేము అనువర్తన మాడ్యూల్‌ను కూడా నిర్వచించాము మరియు సృష్టించాము MainCtrl నియంత్రిక, ది సాకెట్ సేవ మరియు అంటించే నోటు డైరెక్టివ్.

09. స్టికీ నోట్‌ను సృష్టించడం

ఇప్పుడు మనకు AngularJS అప్లికేషన్ యొక్క అస్థిపంజరం ఉన్నందున, మేము సృష్టి లక్షణాన్ని రూపొందించడం ప్రారంభిస్తాము.

app.controller (’MainCtrl’, ఫంక్షన్ ($ స్కోప్, సాకెట్) {// B.1
$ scope.notes = []; // బి .2

// ఇన్కమింగ్
socket.on (’onNoteCreated’, ఫంక్షన్ (డేటా) {// B.3
$ scope.notes.push (డేటా);
});

// అవుట్గోయింగ్
$ scope.createNote = ఫంక్షన్ () {// B.4
var గమనిక = {
id: క్రొత్త తేదీ (). getTime (),
శీర్షిక: ’క్రొత్త గమనిక’,
శరీరం: ’పెండింగ్’
};

$ scope.notes.push (గమనిక);
socket.emit (’createNote’, గమనిక);
};

B.1 AngularJS లో డిపెండెన్సీ ఇంజెక్షన్ ఫీచర్ ఉంది, కాబట్టి మేము ఇంజెక్ట్ చేస్తాము a ope స్కోప్ వస్తువు మరియు సాకెట్ సేవ. ది ope పరిధి ఆబ్జెక్ట్ వ్యూమోడల్‌గా పనిచేస్తుంది మరియు ప్రాథమికంగా జావాస్క్రిప్ట్ ఆబ్జెక్ట్, రెండు-మార్గం డేటాబైండింగ్‌ను ప్రారంభించడానికి దానిలో కాల్చిన కొన్ని సంఘటనలు ఉన్నాయి.

B.2 మేము వీక్షణను బంధించడానికి ఉపయోగించే శ్రేణిని ప్రకటిస్తున్నాము.

B.3 మేము వినేవారిని జోడిస్తున్నాము onNoteCreated ఈవెంట్ సాకెట్ సేవ మరియు ఈవెంట్ పేలోడ్ను నెట్టడం ope స్కోప్.నోట్స్ అమరిక.

B.4 మేము ప్రకటించాము a createNote అప్రమేయాన్ని సృష్టించే పద్ధతి గమనిక వస్తువు మరియు దానిని నెట్టివేస్తుంది ope స్కోప్.నోట్స్ అమరిక. ఇది కూడా ఉపయోగిస్తుంది సాకెట్ విడుదల చేసే సేవ createNote ఈవెంట్ మరియు పాస్ క్రొత్త గమనిక ఆబ్జెక్ట్ వెంట.

కాబట్టి ఇప్పుడు మనకు గమనికను సృష్టించడానికి ఒక పద్ధతి ఉంది, దానిని ఎలా పిలుస్తాము? అది మంచి ప్రశ్న! HTML ఫైల్‌లో, మేము అంతర్నిర్మిత AngularJS ఆదేశాన్ని జోడిస్తాము ng క్లిక్ చేయండి బటన్కు ఆపై జోడించండి createNote పద్ధతి విలువగా పద్ధతి కాల్.

button id = "createButton" ng-click = "createNote ()"> గమనిక / బటన్ సృష్టించు>

మేము ఇప్పటివరకు చేసిన వాటిని శీఘ్రంగా సమీక్షించే సమయం. మేము దీనికి శ్రేణిని జోడించాము ope స్కోప్ లో వస్తువు MainCtrl ఇది అప్లికేషన్ కోసం అన్ని గమనికలను కలిగి ఉంటుంది. మేము కూడా జోడించాము createNote పద్ధతి ope పరిధి క్రొత్త స్థానిక గమనికను సృష్టించడానికి ఆబ్జెక్ట్ చేసి, ఆ గమనికను ఇతర ఖాతాదారులకు ప్రసారం చేయండి సాకెట్ సేవ. మేము ఈవెంట్ వినేవారిని కూడా చేర్చుకున్నాము సాకెట్ సేవ కాబట్టి ఇతర క్లయింట్లు గమనికను సృష్టించినప్పుడు మేము తెలుసుకోవచ్చు, కనుక దాన్ని మా సేకరణకు జోడించవచ్చు.

10. స్టికీ నోట్లను ప్రదర్శించడం

మనకు ఇప్పుడు గమనిక వస్తువును సృష్టించగల సామర్థ్యం ఉంది మరియు దానిని బ్రౌజర్‌ల మధ్య పంచుకోవచ్చు, కాని దాన్ని వాస్తవంగా ఎలా ప్రదర్శిస్తాము? ఇక్కడే ఆదేశాలు వస్తాయి.

ఆదేశాలు మరియు వాటి చిక్కులు చాలా విస్తృతమైన విషయం, కానీ చిన్న సంస్కరణ ఏమిటంటే అవి కస్టమ్ కార్యాచరణతో అంశాలు మరియు లక్షణాలను విస్తరించడానికి ఒక మార్గాన్ని అందిస్తాయి. HTML లో మీ అప్లికేషన్ చుట్టూ మొత్తం DSL (డొమైన్ స్పెసిఫిక్ లాంగ్వేజ్) ను సృష్టించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది కాబట్టి డైరెక్టివ్స్ సులభంగా AngularJS గురించి నాకు ఇష్టమైన భాగం.

మా సహకార బోర్డు కోసం మేము స్టిక్కీ నోట్లను సృష్టించబోతున్నాం కాబట్టి మనం సృష్టించాలి అంటించే నోటు డైరెక్టివ్. మీరు ప్రకటించాలనుకుంటున్న మాడ్యూల్‌పై డైరెక్టివ్ పద్ధతిని పిలవడం ద్వారా మరియు డైరెక్టివ్ డెఫినిషన్ ఆబ్జెక్ట్‌ను తిరిగి ఇచ్చే పేరు మరియు ఫంక్షన్‌లో పంపించడం ద్వారా డైరెక్టివ్‌లు నిర్వచించబడతాయి. డైరెక్టివ్ డెఫినిషన్ ఆబ్జెక్ట్ దానిపై మీరు నిర్వచించగలిగే అనేక లక్షణాలను కలిగి ఉంది, కాని మేము ఇక్కడ మా ప్రయోజనాల కోసం కొన్నింటిని ఉపయోగించబోతున్నాము.

డైరెక్టివ్ డెఫినిషన్ ఆబ్జెక్ట్‌లో మీరు నిర్వచించగల లక్షణాల మొత్తం జాబితాలను చూడటానికి మీరు AngularJS డాక్యుమెంటేషన్‌ను చూడాలని నేను సిఫార్సు చేస్తున్నాను.

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {
var లింకర్ = ఫంక్షన్ (స్కోప్, ఎలిమెంట్, అట్టర్స్) {};

var కంట్రోలర్ = ఫంక్షన్ (ope స్కోప్) {};

తిరిగి {
పరిమితం చేయండి: ’A’, // C.1
లింక్: లింకర్, // సి .2
నియంత్రిక: నియంత్రిక, // C.3
పరిధి: {// 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 = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (గమనిక)"
> {{note.body} text / textarea>
/ div>

యొక్క అందం ng- రిపీట్ అంటే మీరు ప్రవేశించే ఏ శ్రేణికి అయినా కట్టుబడి ఉంటుంది మరియు మీరు శ్రేణికి ఒక అంశాన్ని జోడించినప్పుడు, మీ DOM మూలకం స్వయంచాలకంగా నవీకరించబడుతుంది. మీరు దీన్ని ఒక అడుగు ముందుకు వేసి, ప్రామాణిక DOM మూలకాలను మాత్రమే కాకుండా ఇతర అనుకూల ఆదేశాలను కూడా పునరావృతం చేయవచ్చు. అందుకే మీరు చూస్తారు అంటించే నోటు మూలకంపై లక్షణంగా.

కస్టమ్ కోడ్ యొక్క మరో రెండు బిట్స్ స్పష్టత అవసరం. మేము పరిధిని వేరుచేసాము స్టికీ నోట్స్ రెండు లక్షణాలపై నిర్దేశకం. మొదటిది బైండింగ్ నిర్వచించిన వివిక్త స్కోప్ గమనిక ఆస్తి. దీని అర్థం పేరెంట్ స్కోప్‌లో నోట్ ఆబ్జెక్ట్ మారినప్పుడల్లా, అది డైరెక్టివ్‌లో సంబంధిత నోట్ ఆబ్జెక్ట్‌ను స్వయంచాలకంగా అప్‌డేట్ చేస్తుంది మరియు దీనికి విరుద్ధంగా ఉంటుంది. ఇతర నిర్వచించిన వివిక్త పరిధి ondelete గుణం. దీని అర్థం ఏమిటంటే ondelete డైరెక్టివ్‌లో పిలుస్తారు, ఇది ఏ వ్యక్తీకరణలోనైనా పిలుస్తుంది ondelete డైరెక్టివ్‌ను తక్షణం చేసే DOM మూలకంపై లక్షణం.

డైరెక్టివ్ తక్షణం చేయబడినప్పుడు అది DOM కు జోడించబడుతుంది మరియు లింక్ ఫంక్షన్ అంటారు. మూలకంపై కొన్ని డిఫాల్ట్ DOM లక్షణాలను సెట్ చేయడానికి ఇది సరైన అవకాశం. మేము ప్రయాణిస్తున్న మూలకం పరామితి వాస్తవానికి ఒక j క్వెరీ వస్తువు మరియు అందువల్ల మేము దానిపై j క్వెరీ ఆపరేషన్లను చేయవచ్చు.

(AngularJS వాస్తవానికి దానిలో నిర్మించిన j క్వెరీ యొక్క ఉపసమితితో వస్తుంది, కానీ మీరు ఇప్పటికే j క్వెరీ యొక్క పూర్తి వెర్షన్‌ను చేర్చినట్లయితే, AngularJS దీనికి వాయిదా వేస్తుంది.)

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {
var లింకర్ = ఫంక్షన్ (స్కోప్, ఎలిమెంట్, అట్టర్స్) {
// మంచిగా చేయడానికి కొన్ని DOM దీక్ష
element.css (’left’, ’10px’);
element.css (’top’, ’50px’);
element.hide (). ఫేడ్ఇన్ ();
};
});

పై కోడ్‌లో మనం స్టిక్కీ నోట్‌ను వేదికపై ఉంచాము మరియు దానిని మసకబారుతున్నాము.

11. స్టికీ నోట్‌ను తొలగించడం

కాబట్టి ఇప్పుడు మనం అంటుకునే గమనికను జోడించి ప్రదర్శించగలము, అంటుకునే గమనికలను తొలగించే సమయం ఆసన్నమైంది. స్టికీ నోట్ల సృష్టి మరియు తొలగింపు అనేది గమనికలకు కట్టుబడి ఉన్న శ్రేణి నుండి అంశాలను జోడించడం మరియు తొలగించడం. ఆ శ్రేణిని నిర్వహించడం పేరెంట్ స్కోప్ యొక్క బాధ్యత, అందువల్ల మేము నిర్దేశకం నుండి తొలగింపు అభ్యర్థనను ఉద్భవించాము, కాని తల్లిదండ్రుల పరిధి అసలు హెవీ లిఫ్టింగ్ చేయనివ్వండి.

అందువల్ల మేము డైరెక్టివ్‌పై వ్యక్తీకరణ నిర్వచించిన వివిక్త పరిధిని సృష్టించే అన్ని ఇబ్బందులను ఎదుర్కొన్నాము: కాబట్టి డైరెక్టివ్ తొలగింపు ఈవెంట్‌ను అంతర్గతంగా స్వీకరించి ప్రాసెసింగ్ కోసం దాని తల్లిదండ్రులకు పంపగలదు.

డైరెక్టివ్ లోపల HTML ను గమనించండి.

button type = "button" ng-click = "deleteNote (note.id)"> × / button>

నేను చెప్పబోయే తదుపరి విషయం చాలా దూరం ఉన్నట్లు అనిపించవచ్చు కాని మనం ఒకే వైపు ఉన్నామని గుర్తుంచుకోండి మరియు నేను వివరించిన తర్వాత అది అర్ధమవుతుంది. స్టిక్కీ నోట్ యొక్క కుడి ఎగువ మూలలో ఉన్న బటన్ క్లిక్ చేసినప్పుడు మేము పిలుస్తున్నాము deleteNote డైరెక్టివ్ యొక్క నియంత్రికపై మరియు ప్రయాణిస్తున్నప్పుడు note.id విలువ. అప్పుడు నియంత్రిక కాల్ చేస్తుంది ondelete, ఇది మేము దానికి వైర్డు చేసిన వ్యక్తీకరణను అమలు చేస్తుంది. ఇంతవరకు అంతా బాగనే ఉంది? మేము నియంత్రికపై స్థానిక పద్ధతిని పిలుస్తున్నాము, అది ఏకాంత పరిధిలో నిర్వచించబడిన వ్యక్తీకరణకు కాల్ చేయడం ద్వారా దాన్ని అప్పగిస్తుంది. తల్లిదండ్రులను పిలిచే వ్యక్తీకరణ అప్పుడే పిలువబడుతుంది deleteNote అలాగే.

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {
var కంట్రోలర్ = ఫంక్షన్ (ope స్కోప్) {
$ scope.deleteNote = ఫంక్షన్ (id) {
$ scope.ondelete ({
నేను చేశాను
});
};
};

తిరిగి {
పరిమితం చేయండి: ’ఎ’,
లింక్: లింకర్,
నియంత్రిక: నియంత్రిక,
పరిధి: {
గమనిక: ’=’,
ondelete: ’&’
}
};
});

(వ్యక్తీకరణ-నిర్వచించిన వివిక్త పరిధిని ఉపయోగిస్తున్నప్పుడు, పారామితులు ఆబ్జెక్ట్ మ్యాప్‌లో పంపబడతాయి.)

మాతృ పరిధిలో, deleteNote అని పిలుస్తారు మరియు ఉపయోగించి చాలా ప్రామాణిక తొలగింపు చేస్తుంది angular.forEach గమనికల శ్రేణిపై మళ్ళించడానికి యుటిలిటీ ఫంక్షన్. ఫంక్షన్ దాని స్థానిక వ్యాపారాన్ని నిర్వహించిన తర్వాత, అది ముందుకు సాగుతుంది మరియు మిగిలిన ప్రపంచం తదనుగుణంగా స్పందించడానికి ఈవెంట్‌ను విడుదల చేస్తుంది.

app.controller (’MainCtrl’, ఫంక్షన్ ($ స్కోప్, సాకెట్) {
$ scope.notes = [];

// ఇన్కమింగ్
socket.on (’onNoteDeleted’, ఫంక్షన్ (డేటా) {
$ scope.deleteNote (data.id);
});

// అవుట్గోయింగ్
$ scope.deleteNote = ఫంక్షన్ (id) {
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- మార్పు.

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body} text / textarea>

ఉపయోగించడం పైకి ng- మార్పు స్థానిక పరివర్తన ఇప్పటికే జరిగింది మరియు సందేశాన్ని ప్రసారం చేయడానికి మేము మాత్రమే బాధ్యత వహిస్తాము. నియంత్రికలో, updateNote అంటారు మరియు అక్కడ నుండి మేము విడుదల చేయబోతున్నాము updateNote మా సర్వర్ ఇతర క్లయింట్‌లకు ప్రసారం చేయడానికి ఈవెంట్.

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {
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 కిడ్డీ పూల్ చుట్టూ ల్యాప్ చేసాము మరియు జీవితం బాగుంది! మీ స్నేహితులను ఆకట్టుకోవడానికి పార్లర్ ట్రిక్ కోసం, మేము స్క్రీన్‌పై గమనికలను తరలించే సామర్థ్యాన్ని మరియు నిజ సమయంలో కోఆర్డినేట్‌లను నవీకరించగల సామర్థ్యాన్ని జోడించబోతున్నాము. భయపడవద్దు - ఇది మరికొన్ని కోడ్ పంక్తులు. ఈ కృషి అంతా ఫలితం ఇవ్వబోతోంది. నేను ప్రమాణం చేస్తున్నాను!

మేము ప్రత్యేక అతిథి, j క్వెరీయూఐని పార్టీకి ఆహ్వానించాము మరియు లాగగలిగే వాటి కోసం మేము ఇవన్నీ చేసాము. స్థానికంగా గమనికను లాగగల సామర్థ్యాన్ని జోడించడం వల్ల ఒక లైన్ కోడ్ మాత్రమే పడుతుంది. మీరు జోడిస్తే element.draggable (); మీ లింకర్ ఫంక్షన్‌కు మీరు సర్వైవర్ చేత ‘టైగర్ ఐ’ వినడం ప్రారంభిస్తారు ఎందుకంటే మీరు ఇప్పుడు మీ గమనికలను చుట్టూ లాగవచ్చు.

లాగడం ఎప్పుడు ఆగిపోయిందో తెలుసుకోవాలనుకుంటున్నాము మరియు కొత్త కోఆర్డినేట్‌లను దాటవేయండి. jQueryUI చాలా తెలివైన వ్యక్తులచే నిర్మించబడింది, కాబట్టి లాగడం ఆగినప్పుడు మీరు స్టాప్ ఈవెంట్ కోసం బ్యాక్ ఫంక్షన్‌ను నిర్వచించాలి. మేము పట్టుకుంటాము note.id స్కోప్ ఆబ్జెక్ట్ మరియు ఎడమ మరియు ఎగువ CSS విలువలను ui వస్తువు. ఆ జ్ఞానంతో మనం అన్నిటినీ చేస్తున్నాం: ఉద్గారము!

app.directive (’stickyNote’, ఫంక్షన్ (సాకెట్) {
var లింకర్ = ఫంక్షన్ (స్కోప్, ఎలిమెంట్, అట్టర్స్) {
element.draggable ({
ఆపండి: ఫంక్షన్ (ఈవెంట్, ui) {
socket.emit (’moveNote’, {
id: 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 ని ఇన్‌స్టాల్ చేయండి.

అప్పుడు మీరు కమాండ్ లైన్ నుండి లాగిన్ అవ్వాలి $ జిట్సు లాగిన్ మరియు మీ ఆధారాలను నమోదు చేయండి.

మీరు నేరుగా మీ అనువర్తనంలో ఉన్నారని నిర్ధారించుకోండి, టైప్ చేయండి $ జిట్సు మోహరించు మరియు ప్రశ్నల ద్వారా అడుగు పెట్టండి. నేను సాధారణంగా సాధ్యమైనంతవరకు డిఫాల్ట్‌గా వదిలివేస్తాను, అంటే నేను నా అప్లికేషన్‌కు పేరు ఇస్తాను కాని సబ్డొమైన్ మొదలైనవి కాదు.

మరియు, నా ప్రియమైన మిత్రులారా, దానికి అంతా ఉంది! సర్వర్ అమలు చేసిన తర్వాత మీరు మీ అప్లికేషన్‌కు URL ను అందుకుంటారు మరియు అది సిద్ధంగా ఉంది.

15. తీర్మానం

మేము ఈ వ్యాసంలో చాలా AngularJS మైదానాన్ని కవర్ చేసాము మరియు ఈ ప్రక్రియలో మీరు చాలా ఆనందించారని నేను నమ్ముతున్నాను. సుమారు 200 పంక్తుల కోడ్‌లో మీరు AngularJS మరియు Socket.io తో సాధించగలిగేది నిజంగా చక్కగా ఉందని నేను భావిస్తున్నాను.

ప్రధాన అంశాలపై దృష్టి పెట్టడం కోసం నేను కవర్ చేయని కొన్ని విషయాలు ఉన్నాయి, కాని మూలాన్ని తీసివేసి, అనువర్తనంతో ఆడుకోవాలని నేను మిమ్మల్ని ప్రోత్సహిస్తున్నాను. మేము బలమైన పునాదిని నిర్మించాము, కానీ మీరు జోడించగల లక్షణాలు ఇంకా చాలా ఉన్నాయి. హ్యాకింగ్ పొందండి!

లుకాస్ రూబెల్కే సాంకేతిక ప్రియుడు మరియు మానింగ్ పబ్లికేషన్స్ కోసం యాంగ్యులర్ జెఎస్ యాక్షన్ లో సహ రచయిత. అతడికి ఇష్టమైన విషయం ఏమిటంటే, అతను కొత్త టెక్నాలజీ గురించి ప్రజలను ఉత్సాహపరుస్తాడు. అతను ఫీనిక్స్ వెబ్ అప్లికేషన్ యూజర్ గ్రూప్‌ను నడుపుతున్నాడు మరియు నేరంలో తన తోటి భాగస్వాములతో పలు హాకథాన్‌లను హోస్ట్ చేశాడు.

దీన్ని ఇష్టపడ్డారా? వీటిని చదవండి!

  • అనువర్తనాన్ని ఎలా తయారు చేయాలి
  • మా అభిమాన వెబ్ ఫాంట్‌లు - మరియు వాటికి ఒక్క పైసా కూడా ఖర్చవుతుంది
  • ఆగ్మెంటెడ్ రియాలిటీ కోసం తదుపరి ఏమిటో కనుగొనండి
  • ఉచిత అల్లికలను డౌన్‌లోడ్ చేయండి: అధిక రిజల్యూషన్ మరియు ఇప్పుడు ఉపయోగించడానికి సిద్ధంగా ఉంది
మునుపటి ఆర్టికల్

యానిమేషన్ నుండి ఇలస్ట్రేషన్‌కు ఎలా వెళ్లాలి
తదుపరి వ్యాసం

స్కిన్ టోన్లను చిత్రించడానికి 10 చిట్కాలు
పబ్లికేషన్స్
‘ఫోటో రీటూచింగ్ సెలబ్రిటీలను అందంగా తీర్చిదిద్దడం గురించి కాదు’
ఇంకా చదవండి

‘ఫోటో రీటూచింగ్ సెలబ్రిటీలను అందంగా తీర్చిదిద్దడం గురించి కాదు’

మే 2024
ప్రపంచ ప్రఖ్యాత ఫోటో రీటౌచర్ నటాలియా టాఫారెల్ ఈ వారం UK లో ట్రైన్ టు క్రియేట్ అనే శీర్షికతో ఉన్నారు, ఇది ఫ్యాషన్ మరియు అందం పరిశ్రమలో (శుక్రవారం 23-ఆదివారం 25 మే) ఫోటో రీటూచింగ్ చుట్టూ కేంద్రీకృతమై ఉం...
కంప్యూటర్ ఆర్ట్స్ కవర్ పోటీ: టాప్ 30 ఎంట్రీలు వెల్లడయ్యాయి
ఇంకా చదవండి

కంప్యూటర్ ఆర్ట్స్ కవర్ పోటీ: టాప్ 30 ఎంట్రీలు వెల్లడయ్యాయి

మే 2024
ఈ నెల ప్రారంభంలో, కంప్యూటర్ ఆర్ట్స్ D & AD న్యూ బ్లడ్‌లోని మా స్నేహితులతో జతకట్టింది, జూలై చివరిలో అమ్మకానికి రాబోయే మా రాబోయే న్యూ టాలెంట్ స్పెషల్ కోసం కవర్‌ను రూపొందించడానికి ఒక ప్రత్యేకమైన అవకా...
వెబ్ డిజైన్‌లో 6 తెలివైన ఒప్పించే పద్ధతులు
ఇంకా చదవండి

వెబ్ డిజైన్‌లో 6 తెలివైన ఒప్పించే పద్ధతులు

మే 2024
వెబ్ రూపకల్పనలో శాశ్వతమైన సవాలు వినియోగదారు అవసరాలను వ్యాపార అవసరాలతో సమతుల్యం చేస్తుంది. మీ డిజైన్ ఎల్లప్పుడూ రెండు మార్గాల ఖండనకు సేవలు అందించాలి.గొప్ప వెబ్‌సైట్ బిల్డర్‌ను ఎంచుకోవడానికి ఇక్కడ కొంత ...