విషయము
- 01. సంస్కరణ తనిఖీని అమలు చేయండి
- 02. కోణీయ ఇన్‌స్టాల్ చేయండి
- 03. ప్రాజెక్ట్ అస్థిపంజరం సృష్టించండి
- 04. జీను అవకలన లోడింగ్
- 05. ... మరియు ఫలితాలను చూడండి
- 06. వెబ్ వర్కర్‌ను పుట్టించండి
- 07. కోడ్‌ను అన్వేషించండి
- 08. పరంజాను ఏర్పాటు చేయండి
- 09. కన్స్ట్రక్టర్ లేకపోవడం గురించి చింతించకండి
- 10. చిన్న కంపైల్ రన్ అమలు చేయండి
- 11. ... మరియు అవుట్పుట్ను కనుగొనండి
- 12. పని పొందండి
- 13. ఐవీని అన్వేషించండి
- 14. సవరించిన ng ప్రాసెసింగ్ ప్రయత్నించండి
- 15. మెరుగైన వలసలను ఆస్వాదించండి
- 16. కార్యస్థల నియంత్రణను అన్వేషించండి
- 17. ప్రక్రియను వేగవంతం చేయండి
- 18. వాకింగ్ డెడ్ మానుకోండి
- 19. మార్పు లాగ్ చూడండి
కోణీయ 8 అనేది గూగుల్ యొక్క కోణీయ తాజా వెర్షన్ - చుట్టూ ఉన్న ఉత్తమ జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లలో ఒకటి. ఈ వ్యాసంలో, మేము కోణీయ 8 యొక్క ప్రత్యేకమైన వాటి ద్వారా నడుస్తాము మరియు ఎలా ప్రారంభించాలో మీకు చూపుతాము. మొదట, ఇప్పటివరకు ఫ్రేమ్‌వర్క్‌తో ఏమి జరిగిందో క్లుప్తంగా చూడండి.
కోణీయ పరిచయం వెబ్ అభివృద్ధిలో ఒక నమూనా మార్పుకు దారితీసింది: చాలా లైబ్రరీలు సాపేక్షంగా పరిమితమైన నిర్మాణ ప్రభావంతో డెవలపర్‌లకు మద్దతు ఇవ్వడానికి తమను తాము పరిమితం చేయగా, కోణీయ డెవలపర్ బృందం ఇతర దిశలో వెళ్ళింది. వారి ఉత్పత్తి ఒక నిర్దిష్ట నిర్మాణాన్ని ఉపయోగించమని మిమ్మల్ని బలవంతం చేస్తుంది, విచలనాలు కష్టతరమైనవి నుండి వాణిజ్యపరంగా అర్ధం లేనివి. వాస్తవానికి, చాలా కోణీయ కోడ్ బ్రౌజర్‌ను తాకడానికి ముందే సాపేక్షంగా సంక్లిష్టమైన ట్రాన్స్పిలేషన్ టూల్‌చెయిన్ ద్వారా నడుస్తుంది.
గూగుల్ ఇంక్ లోపల మరియు వెలుపల కోణీయ యొక్క అపారమైన విజయం కారణంగా, అభివృద్ధి - ద్వారా మరియు పెద్దదిగా - స్థిరీకరించబడింది. దీని అర్థం బ్రేకింగ్ కోడ్ మార్పులు చాలా తక్కువ, సెమీ వార్షిక నవీకరణలు వెబ్ బ్రౌజింగ్ ల్యాండ్‌స్కేప్‌లోని మార్పులకు ఫ్రేమ్‌వర్క్‌ను స్వీకరించడంపై దృష్టి సారించాయి.
ఉదాహరణకు, కోణీయ 8 విషయంలో, కొత్త జావాస్క్రిప్ట్ కంపైలర్ అమర్చబడింది (ఇప్పటికీ ప్రయోగాత్మకంగా ఉన్నప్పటికీ). ఇది పాత బ్రౌజర్‌ల ఖర్చుతో ఉత్పత్తి చేయబడిన అనుకూలత కోడ్‌ను గణనీయంగా చిన్నదిగా మరియు వేగంగా ఉండేలా చేస్తుంది. ఇంకా, కోణీయ ప్రాసెసింగ్ సామర్థ్యాన్ని పెంచడానికి వెబ్ వర్కర్ మద్దతు విలీనం చేయబడింది. సంక్షిప్తంగా, చూడటానికి చాలా ఉంది - కాబట్టి మనం లోపలికి ప్రవేశిద్దాం.
మీరు కోడ్ లేకుండా సైట్‌ను డిజైన్ చేయాలనుకుంటే, ఈ సులభమైన వెబ్‌సైట్ బిల్డర్లలో ఒకదాన్ని ప్రయత్నించండి. మరియు విషయాలు మరింత సున్నితంగా ఉండేలా చేయడానికి, మీ వెబ్ హోస్టింగ్ సేవను సరిగ్గా పొందండి.
01. సంస్కరణ తనిఖీని అమలు చేయండి
కోణీయ టూల్‌చెయిన్ నోడ్జెఎస్ వాతావరణంలో నివసిస్తుంది. ఈ రచన ప్రకారం, Node.js 10.9 లేదా అంతకన్నా మంచిది అవసరం - మీరు పాత సంస్కరణలో మిమ్మల్ని కనుగొంటే, Node.js వెబ్‌సైట్‌ను సందర్శించండి మరియు అప్‌గ్రేడ్ పొందండి. దిగువ కోడ్ ఈ మెషీన్‌లో సంస్కరణ స్థితిని చూపుతుంది.
tamhan @ TAMHAN18: $ ode node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. కోణీయ ఇన్‌స్టాల్ చేయండి
కోణీయ టూల్‌చెయిన్ అనే కమాండ్ లైన్ యుటిలిటీలో నివసిస్తుంది ng. దీనిని బాగా తెలిసిన ఎన్‌పిఎం ద్వారా ఇన్‌స్టాల్ చేయవచ్చు.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ g ng వెర్షన్
దిగువ చిత్రంలో చూపిన ప్రశ్నకు సమాధానం ఇవ్వడానికి జాగ్రత్తగా ఉండండి.
సాధనం నుండి సంస్కరణ సమాచారాన్ని పొందడం చాలా కష్టం - వాక్యనిర్మాణం ప్రత్యేకమైనది మాత్రమే కాదు, అవుట్పుట్ కూడా వెర్బోస్ (క్రింద ఉన్న చిత్రాన్ని చూడండి).
03. ప్రాజెక్ట్ అస్థిపంజరం సృష్టించండి
ng మాకు కోణీయ పరంజాను ఉత్పత్తి చేస్తుంది. కింది దశలలో, మేము రౌటింగ్‌ను జోడించాలనుకుంటున్నాము మరియు CSS ట్రాన్స్పిలేషన్ కోసం సాస్‌ను ఉపయోగిస్తాము. కొన్ని కారణాల వల్ల విస్తరణ విఫలమైతే, వర్కింగ్ డైరెక్టరీని ఖాళీ చేసి, పున art ప్రారంభించండి ng సూపర్ యూజర్ హక్కులతో.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ d cd angularspace / tamhan @ TAMHAN18: ~ / angularspace new ng కొత్త వర్క్‌టెస్ట్
04. జీను అవకలన లోడింగ్
కోణీయ యొక్క క్రొత్త సంస్కరణ తగ్గిన ప్రభావం కోసం వెనుకబడిన అనుకూలత కోడ్‌ను ఆప్టిమైజ్ చేస్తుంది - ఫైల్ అని పిలుస్తారు బ్రౌజర్‌లిస్ట్ ఏ బ్రౌజర్‌లకు మద్దతు ఇవ్వాలో నిర్ణయించడానికి మిమ్మల్ని అనుమతిస్తుంది. తెరవండి బ్రౌజర్‌లిస్ట్ మరియు పదాన్ని తొలగించండి కాదు IE 9 నుండి IE11 ముందు.
. . . > 0.5% చివరి 2 వెర్షన్లు ఫైర్‌ఫాక్స్ ESR చనిపోలేదు IE 9-11 # IE 9-11 మద్దతు కోసం, ‘కాదు’ తొలగించండి.
05. ... మరియు ఫలితాలను చూడండి
ప్రాజెక్ట్ యొక్క కంపైల్ను ఆర్డర్ చేయండి, పంపిణీ ఫోల్డర్లోకి మార్చండి మరియు అనవసరమైన మ్యాప్ ఫైళ్ళను ప్రక్షాళన చేయండి.
tamhan @ TAMHAN18: ang / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ang / angularspace / workertest / dist / workertest $ ls
ఫలితాలను చూడటానికి చెట్టును ప్రారంభించండి - ng వివిధ కోడ్ ఫైళ్ళ యొక్క బహుళ సంస్కరణలను సృష్టిస్తుంది (క్రింద ఉన్న చిత్రాన్ని చూడండి).
06. వెబ్ వర్కర్‌ను పుట్టించండి
వెబ్ వర్కర్లు జావాస్క్రిప్ట్ స్థానిక అనువర్తనాల చివరి సరిహద్దులోకి ప్రవేశించడానికి అనుమతిస్తారు: పనుల యొక్క సమాంతర ప్రాసెసింగ్. కోణీయ 8 తో, వెబ్ వర్కర్‌ను సౌకర్యం నుండి సృష్టించవచ్చు ng కమాండ్ లైన్ యుటిలిటీ.
tamhan @ TAMHAN18: ang / angularspace / workertest $ sudo ng వెబ్ వర్కర్ మైవర్కర్‌ను సృష్టించండి tsconfig.worker.json (212 బైట్లు) సృష్టించండి src / app / myworker.worker.ts (157 బైట్లు) సృష్టించండి tsconfig.app.json (236 బైట్లు) ) UPDATE angular.json (3640 బైట్లు)
07. కోడ్‌ను అన్వేషించండి
ngయొక్క అవుట్పుట్ మొదటి చూపులో భయపెట్టేదిగా కనిపిస్తుంది. ఫైల్‌ను తెరుస్తోంది src / app / myworker.worker.ts ఎంపిక కోడ్ ఎడిటర్‌లో మీరు బాగా తెలుసుకోవలసిన కోడ్‌ను వెల్లడిస్తుంది వెబ్‌వర్కర్ స్పెసిఫికేషన్. సూత్రప్రాయంగా, కార్మికుడు సందేశాలను స్వీకరిస్తాడు మరియు అవసరమైన విధంగా వాటిని ప్రాసెస్ చేస్తాడు.
/// రిఫరెన్స్ lib = "వెబ్‌వర్కర్" /> addEventListener (’message’, ({data}) => {const response = `{{data to` కు కార్మికుల ప్రతిస్పందన; postMessage (ప్రతిస్పందన);});
08. పరంజాను ఏర్పాటు చేయండి
కోణీయ అనువర్తనాలు భాగాలను కలిగి ఉంటాయి. మా వెబ్ వర్కర్‌ను తొలగించడం ఉత్తమంగా జరుగుతుంది AppComponent, ఇది వినేవారిని చేర్చడానికి విస్తరించబడింది OnInit ఈవెంట్. ప్రస్తుతానికి, ఇది స్థితి సమాచారాన్ని మాత్రమే విడుదల చేస్తుంది.
’@ కోణీయ / కోర్’ నుండి {భాగం, OnInit import దిగుమతి చేయండి; P కాంపొనెంట్ ({..}) ఎగుమతి తరగతి AppComponent OnInit {title = ’workertest’; ngOnInit () so console.log ("AppComponent: OnInit ()"); }}
09. కన్స్ట్రక్టర్ లేకపోవడం గురించి చింతించకండి
అనుభవజ్ఞులైన టైప్‌స్క్రిప్ట్ డెవలపర్లు ప్రోగ్రామింగ్ భాష అందించిన కన్స్ట్రక్టర్‌ను మా కోడ్ ఎందుకు ఉపయోగించలేదని తమను తాము ప్రశ్నించుకుంటారు. దానికి కారణం అది ngOnInit ఒక ప్రారంభ సంఘటన జరిగినప్పుడల్లా తొలగించబడే జీవితచక్ర సంఘటన - ఇది తరగతి ఆహ్వానంతో సంబంధం కలిగి ఉండవలసిన అవసరం లేదు.
10. చిన్న కంపైల్ రన్ అమలు చేయండి
ఈ సమయంలో, ప్రోగ్రామ్ అమలు చేయడానికి సిద్ధంగా ఉంది. మేము లోపల సర్వర్ నుండి అమలు చేస్తాము ng, దీనిని సర్వ్ కమాండ్ ద్వారా ప్రారంభించవచ్చు. ఈ విధానం యొక్క చక్కని అంశం ఏమిటంటే, ప్రోగ్రామ్ మార్పులను గుర్తించి, ఫ్లైలో ప్రాజెక్ట్ను తిరిగి కంపైల్ చేస్తుంది.
tamhan @ TAMHAN18: ang / angularspace / workertest $ sudo ng సర్వ్
దిగువ చిత్రంలో ఇది చర్యలో చూడటానికి బొమ్మను చూడండి.
11. ... మరియు అవుట్పుట్ను కనుగొనండి
సర్వ్ చేయండి సాధారణంగా దాని స్థానిక వెబ్ సర్వర్ యొక్క చిరునామాను ఉంచుతుంది http: // localhost: 4200 /. స్థితి అవుట్పుట్ను చూడటానికి వెబ్ పేజీని తెరిచి డెవలపర్ సాధనాలను తెరవండి. అది గుర్తుంచుకోండి console.log డేటాను బ్రౌజర్ కన్సోల్‌కు అందిస్తుంది మరియు నోడ్జెఎస్ ఉదాహరణ యొక్క కన్సోల్‌ను తాకకుండా వదిలివేస్తుంది.
12. పని పొందండి
ఈ సమయంలో, మేము కార్మికుడి యొక్క ఒక ఉదాహరణను సృష్టించి, దానికి సందేశాన్ని అందిస్తాము. దీని ఫలితాలు బ్రౌజర్ కన్సోల్‌లో చూపబడతాయి.
if (typeof Worker! == ’undefined’) {// క్రొత్త const కార్మికుడిని సృష్టించండి = క్రొత్త కార్మికుడు (’./ myworker.worker’, {type: ’module’}); workers.onmessage = ({data}) => {console.log (’పేజీకి సందేశం వచ్చింది: $ {డేటా }’); }; వర్కర్.పోస్ట్ మెసేజ్ (’హలో’); } else {console.log ("కార్మికుల మద్దతు లేదు"); }
13. ఐవీని అన్వేషించండి
కోణీయ భవిష్యత్ సంస్కరణలు మరింత అధునాతన కంపైలర్‌ను ఉపయోగిస్తాయి, ఇది మరింత చిన్న వీక్షణలకు దారితీస్తుంది. ఉత్పత్తి ఇంకా పూర్తి కాలేదు, ఐవీ-ఎనేబుల్డ్ అస్థిపంజరం ద్వారా పుట్టుకొస్తుంది కొత్త ఐవీ-ప్రాజెక్ట్ - ఎనేబుల్-ఐవీ. ప్రత్యామ్నాయంగా, స్నిప్పెట్‌లో చూపిన విధంగా కంపైలర్ సెట్టింగులను మార్చండి.
"angularCompilerOptions": {"enableIvy": true}
హెచ్చరిక యొక్క పదం: ఐవీ అద్భుతమైన పరిమాణ తగ్గింపులకు దారితీస్తుంది, కానీ ఇది ఉచితం కాదు. ఉత్పత్తి ఇంకా స్థిరీకరించబడలేదు, కాబట్టి ఉత్పాదక వాతావరణంలో దీనిని ఉపయోగించడం సిఫారసు చేయబడలేదు.
14. సవరించిన ng ప్రాసెసింగ్ ప్రయత్నించండి
కోణీయ ng కమాండ్ లైన్ సాధనం కొంతకాలం పిల్లల స్క్రిప్ట్‌లను అంతర్గతంగా ఉపయోగించింది. కోణీయ 8 అప్స్ మీరు ఇప్పుడు కూడా, మీ అప్లికేషన్ సమావేశమై సంకలనం చేయబడినందున మీ స్వంత పనులను అమలు చేయడానికి ఈ సదుపాయాన్ని ఉపయోగించవచ్చు.
"ఆర్కిటెక్ట్": {"బిల్డ్": {"బిల్డర్": "@ కోణీయ-దేవ్కిట్ / బిల్డ్-కోణీయ: బ్రౌజర్",
యొక్క ఒక చక్కని అప్లికేషన్ ng స్క్రిప్ట్‌లలో క్లౌడ్ సేవలకు నేరుగా అనువర్తనాలను అప్‌లోడ్ చేయడం ఉంటుంది. Git రిపోజిటరీ మీ పనిని ఫైర్‌బేస్ ఖాతాకు అప్‌లోడ్ చేసే ఉపయోగకరమైన స్క్రిప్ట్‌ను అందిస్తుంది.
15. మెరుగైన వలసలను ఆస్వాదించండి
కోణీయ 1.x నుండి వలస వెళ్ళే డెవలపర్లు, AngularJS అని కూడా పిలుస్తారు, నావిగేటర్‌ను ‘కంబైన్డ్’ అనువర్తనాల్లో సరిగ్గా పని చేయడంలో సమస్యల యొక్క సరసమైన వాటా ఉంది. కొత్త యూనిఫైడ్ లొకేషన్ సర్వీస్ ఈ ప్రక్రియను సున్నితంగా మార్చాలని లక్ష్యంగా పెట్టుకుంది.
16. కార్యస్థల నియంత్రణను అన్వేషించండి
వర్క్‌స్పేస్ నిర్మాణాన్ని డైనమిక్‌గా మార్చగల సామర్థ్యం నుండి పెద్ద ప్రాజెక్టులు ప్రయోజనం పొందుతాయి. కోణీయ 8.0 లో ప్రవేశపెట్టిన కొత్త వర్క్‌స్పేస్ API ద్వారా ఇది జరుగుతుంది - ఈ దశతో కూడిన స్నిప్పెట్ ప్రవర్తన యొక్క శీఘ్ర అవలోకనాన్ని అందిస్తుంది.
async ఫంక్షన్ ప్రదర్శిస్తుంది () {const host = వర్క్‌స్పేస్‌లు. createWorkspaceHost (క్రొత్త NodeJsSyncHost ()); const workspace = వర్క్‌స్పేస్‌ల కోసం వేచి ఉండండి. readWorkspace (’path / to / workspace / directory /’, host); const project = workspace.projects. పొందండి (’నా-అనువర్తనం’); const buildTarget = project.targets. get (’build’); buildTarget.options.optimization = నిజం; workspaces.writeWorkspace (వర్క్‌స్పేస్, హోస్ట్) కోసం వేచి ఉండండి; }
17. ప్రక్రియను వేగవంతం చేయండి
పెద్ద జావాస్క్రిప్ట్ కోడ్ స్థావరాలను నిర్మించడం శ్రమతో కూడుకున్నది. AngularJS యొక్క భవిష్యత్తు సంస్కరణలు ఈ ప్రక్రియను వేగవంతం చేయడానికి Google యొక్క బాజెల్ నిర్మాణ వ్యవస్థను ఉపయోగిస్తాయి - పాపం, వ్రాసే సమయంలో ఇది ప్రైమ్‌టైమ్‌కి సిద్ధంగా లేదు.
18. వాకింగ్ డెడ్ మానుకోండి
కోడ్‌ను విచ్ఛిన్నం చేయకుండా గూగుల్ తీవ్ర శ్రద్ధ వహిస్తున్నప్పటికీ, కొన్ని లక్షణాలు ఇకపై అవసరం లేనందున వాటిని తొలగించాల్సిన అవసరం ఉంది. నివారించాల్సిన లక్షణాల గురించి మరింత తెలుసుకోవడానికి ఈ తరుగుదల జాబితాను తనిఖీ చేయండి.
19. మార్పు లాగ్ చూడండి
ఎప్పటిలాగే, ఒక వ్యాసం మొత్తం విడుదలకు న్యాయం చేయలేము. అదృష్టవశాత్తూ, ఈ మార్పు లాగ్ అన్ని మార్పుల యొక్క వివరణాత్మక జాబితాను అందిస్తుంది - ఒకవేళ మీకు ఎప్పుడైనా ప్రియమైన లక్షణం యొక్క నాడిని తనిఖీ చేయాలని మీకు అనిపిస్తే.
మీ సైట్‌కు అప్‌లోడ్ చేయడానికి చాలా ఫైల్‌లు సిద్ధంగా ఉన్నాయా? అత్యంత విశ్వసనీయ క్లౌడ్ నిల్వలో వాటిని బ్యాకప్ చేయండి.
ఈ వ్యాసం మొదట క్రియేటివ్ వెబ్ డిజైన్ మ్యాగజైన్‌లో ప్రచురించబడింది వెబ్ డిజైనర్.
