️ 2023 में नया कोणीय 16 बड़ा हो रहा है: वह सब कुछ जो आपको जानना आवश्यक है

May 03 2023

एंगुलर एक बड़े मेकओवर से गुजर रहा है। Google द्वारा बनाया गया वेब फ्रेमवर्क और टाइपस्क्रिप्ट का उपयोग संस्करण 16 के लिए तैयार हो रहा है, जिसमें कई नई और रोमांचक चीजें होंगी।

एंगुलर एक बड़े मेकओवर से गुजर रहा है। Google द्वारा बनाया गया वेब फ्रेमवर्क और टाइपस्क्रिप्ट का उपयोग संस्करण 16 के लिए तैयार हो रहा है , जिसमें कई नई और रोमांचक चीजें होंगी। उदाहरण के लिए, यह सर्वर-साइड रेंडरिंग का उपयोग करना आसान बना देगा , जिसका अर्थ है तेज और आसान वेब पेज। इसमें बेहतर रनटाइम प्रदर्शन भी होगा, जिसका अर्थ है कम बग और क्रैश।

संस्करण 16 अभी बाहर नहीं आया है, लेकिन आप पहले रिलीज़ किए गए उम्मीदवार संस्करण को अभी आज़मा सकते हैं। इसमें किसी भी पिछले प्रमुख संस्करण की तुलना में अधिक परिवर्तन हैं ( कोणीय से कोणीय 2 की छलांग को छोड़कर )। कोणीय अधिक आधुनिक और शक्तिशाली होता जा रहा है, और संस्करण 16 तो बस शुरुआत है। इस रिलीज में आप कुछ अच्छी चीजों की उम्मीद कर सकते हैं।

संतुष्ट

संकेत: राज्य परिवर्तनों के प्रबंधन का एक नया तरीका
सर्वर-साइड रेंडरिंग: तेज़ और स्मूथ
डेवलपर अनुभव: बेहतर और आसान
आवश्यक घटक इनपुट
निर्भरता इंजेक्शन डीबगिंग एपीआई
स्टैंडअलोन घटकों के लिए बेहतर प्रलेखन और योजनाबद्ध
एंगुलर सीएलआई द्वारा बनाए गए जावास्क्रिप्ट बंडलों को बेहतर बनाने के लिए विकल्प तलाशना
अन्य सुविधाएँ और सुधार
टेलविंड सीएसएस के लिए समर्थन
सीएसएस अलगाव के लिए समर्थन
देशी विश्वसनीय प्रकार के लिए समर्थन
निष्कर्ष
और अधिक जानें

एंगुलर 16 की सबसे रोमांचक विशेषताओं में से एक सिग्नल की शुरुआत है, एंगुलर एप्लिकेशन में स्थिति परिवर्तन के प्रबंधन का एक नया तरीका। सिग्नलSolid.js एक रिएक्टिव यूआई लाइब्रेरी से प्रेरित हैं , जो रिएक्टिव वैल्यू ग्राफ बनाने के लिए पुश/पुल पैटर्न का उपयोग करता है।

सिग्नल ऐसे कार्य हैं जो एक मान ( get) लौटाते हैं और उन्हें एक नए मान ( set) के साथ कॉल करके अपडेट किया जा सकता है। सिग्नल अन्य संकेतों पर भी निर्भर हो सकते हैं, एक प्रतिक्रियाशील मूल्य ग्राफ बनाते हैं जो किसी भी निर्भरता में बदलाव होने पर स्वचालित रूप से अपडेट हो जाता है। संकेतों काRxJS उपयोग वेधशालाओं के साथ किया जा सकता है , जो शक्तिशाली और घोषणात्मक डेटा प्रवाह बनाने के लिए अभी भी Angular 16 में समर्थित हैं।

सिग्नल एंगुलर में पारंपरिक परिवर्तन पहचान तंत्र पर कई फायदे प्रदान करते हैं , जो Zone.jsबंदर-पैच ब्राउज़र एपीआई पर निर्भर करता है और विश्व स्तर पर परिवर्तन का पता लगाता है। सिग्नल आपको पूरे घटक पेड़ को पार किए बिना या उपयोग किए बिना केवल प्रभावित घटकों में परिवर्तन का पता लगाने की अनुमति देते हैं Zone.js। यह रनटाइम प्रदर्शन में सुधार करता है और जटिलता को कम करता है।

सिग्नल आपके कोड को अधिक अभिव्यंजक और तर्क करने में आसान बनाते हैं, क्योंकि आप स्पष्ट रूप से अपने मूल्यों की निर्भरता और अपडेट देख सकते हैं। सिग्नल ठीक-ठाक प्रतिक्रियाशीलता को भी सक्षम करते हैं, जिसका अर्थ है कि आप नियंत्रित कर सकते हैं कि आपके मूल्य कब और कैसे बदलते हैं।

यहाँ Angular 16 में संकेतों का उपयोग करने का एक संभावित उदाहरण दिया गया है:

// Import the createSignal function
import { createSignal } from '@angular/core';

// Create a component that uses signals
@Component({
  selector: 'app-counter',
  template: `
    <h1>{{ count }}</h1>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  // Create a signal instance for the count value
  count = createSignal(0);

  // Increment the count value by calling the next method on the signal
  increment() {
    this.count.next(this.count.value + 1);
  }

  // Decrement the count value by calling the next method on the signal
  decrement() {
    this.count.next(this.count.value - 1);
  }
}

एंगुलर 16 में एक और बड़ा सुधार गैर-विनाशकारी हाइड्रेशन के लिए समर्थन है , जो सर्वर-साइड रेंडरिंग (SSR) को तेज और स्मूथ बनाता है। SSR एक ऐसी तकनीक है जो आपके एप्लिकेशन को सर्वर पर प्रस्तुत करती है और HTML सामग्री को ब्राउज़र में भेजती है, जहां इसे जावास्क्रिप्ट व्यवहार और ईवेंट श्रोताओं को जोड़कर पूरी तरह से इंटरैक्टिव और कार्यात्मक वेब पेज में बदल दिया जाता है।

एसएसआर समय-से-संवादात्मक (टीटीआई) को कम करता है और एसईओ और पहुंच में सुधार करता है। SSR कुछ समय के लिए React या Next.js जैसे फ्रेमवर्क में उपलब्ध है, लेकिन इसे Angular में लागू करना आसान नहीं था। एंगुलर 16 में, SSR को बॉक्स से बाहर समर्थित किया जाएगा, जिससे SSR एप्लिकेशन तेज और स्मूथ हो जाएंगे।

गैर-विनाशकारी हाइड्रेशन का अर्थ है कि एप्लिकेशन को हाइड्रेट करते समय ब्राउज़र किसी भी मौजूदा HTML सामग्री या विशेषताओं को अधिलेखित या हटा नहीं देता है । यह किसी भी सर्वर-साइड अनुकूलन या अनुकूलन को सुरक्षित रखता है जिसे आपने अपनी HTML सामग्री पर लागू किया हो। गैर-विनाशकारी हाइड्रेशन सर्वर और क्लाइंट के बीच बेमेल HTML सामग्री से उत्पन्न होने वाले संभावित विरोधों या त्रुटियों से भी बचता है।

डेवलपर अनुभव: बेहतर और आसान

एंगुलर 16 कुछ नई सुविधाओं और सुधारों को भी पेश करता है जो एंगुलर अनुप्रयोगों के डेवलपर अनुभव और कोड गुणवत्ता को बढ़ाते हैं। इनमें से कुछ विशेषताएं हैं:

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

@Component({})
class HomeComponent {
  @Input({required: true}) someRequiredInput;
}

// Import the DebugInjector interface
import { DebugInjector } from '@angular/core';

// Inject the DebugInjector service in the constructor
constructor(private debugInjector: DebugInjector) {}
// Use the DebugInjector service to get information about the dependencies
ngOnInit() {
  // Get the provider for a token
  const provider = this.debugInjector.getProvider(MyService);
  // Get the injector for a token
  const injector = this.debugInjector.getInjector(MyService);
  // Get the scope for a token
  const scope = this.debugInjector.getScope(MyService);
  // Get the instance for a token
  const instance = this.debugInjector.getInstance(MyService);
  // Simulate a different scenario for a token
  this.debugInjector.simulate(MyService, {
    // Provide a different value for the token
    value: new MyService('test'),
    // Override the scope for the token
    scope: 'root',
    // Override the injector for the token
    injector: this.debugInjector.createInjector([MyService])
  });
  // Reset the simulation for a token
  this.debugInjector.reset(MyService);
}

स्टैंडअलोन घटकों के लिए बेहतर प्रलेखन और योजनाएँ : यह सुविधा कोणीय अनुप्रयोगों में स्टैंडअलोन घटकों को बनाने के लिए दस्तावेज़ीकरण और योजनाबद्धता में सुधार करती है। स्टैंडअलोन घटक ऐसे घटक होते हैं जो किसी भी मॉड्यूल से संबंधित नहीं होते हैं और आपके एप्लिकेशन में कहीं भी उपयोग किए जा सकते हैं। पुन: प्रयोज्य UI तत्वों या पुस्तकालयों को बनाने के लिए स्टैंडअलोन घटक उपयोगी होते हैं।
एंगुलर सीएलआई द्वारा बनाए गए जावास्क्रिप्ट बंडलों को बेहतर बनाने के लिए विकल्पों की खोज : यह सुविधा एंगुलर सीएलआई द्वारा बनाए गए जावास्क्रिप्ट बंडलों को अनुकूलित करने के लिए विभिन्न विकल्पों की पड़ताल करती है, जैसे ईएस मॉड्यूल, ट्री-शेकिंग, कोड-स्प्लिटिंग या डिफरेंशियल लोडिंग का उपयोग करना। इन विकल्पों का उद्देश्य बंडल आकार को कम करना और कोणीय अनुप्रयोगों के लोडिंग प्रदर्शन में सुधार करना है।

कोणीय 16 कुछ अन्य विशेषताओं और सुधारों को भी जोड़ता है जो ढांचे की कार्यक्षमता और उपयोगिता को बढ़ाता है। इनमें से कुछ विशेषताएं हैं:

टेलविंड सीएसएस के लिए समर्थन : टेलविंड सीएसएस एक लोकप्रिय उपयोगिता-प्रथम सीएसएस ढांचा है जो आपको कस्टम सीएसएस लिखने के बजाय अपने घटकों को कक्षाओं के साथ शैलीबद्ध करने देता है। Tailwind CSS कई लाभ प्रदान करता है जैसे तेज़ विकास, सुसंगत डिज़ाइन, उत्तरदायी डिज़ाइन, अनुकूलन और विस्तारणीयता। एंगुलर 16बॉक्स से बाहर टेलविंड सीएसएस का समर्थन करता है, जिससे आपके एंगुलर प्रोजेक्ट्स में उपयोग करना आसान हो जाता है।
CSS आइसोलेशन के लिए समर्थन : CSS आइसोलेशन एक ऐसी सुविधा है जो आपको अपनी घटक शैलियों को लीक होने या अन्य शैलियों के साथ विरोध करने से रोकने के लिए दायरे की अनुमति देती है। CSS आइसोलेशन को शैडो DOM या एमुलेटेड इनकैप्सुलेशन का उपयोग करके प्राप्त किया जा सकता है। कोणीय 16 दोनों विकल्पों का समर्थन करता है और आपको वह चुनने देता है जो आपकी आवश्यकताओं के अनुरूप हो।

// Import the ViewEncapsulation enum
import { Component, ViewEncapsulation } from '@angular/core';

// Create a component that uses shadow DOM for CSS isolation
@Component({
  selector: 'app-shadow',
  template: `
    <h1>Shadow DOM</h1>
    <p>This component uses shadow DOM for CSS isolation.</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `],
  // Set the encapsulation property to ViewEncapsulation.ShadowDom
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowComponent {}
// Create a component that uses emulated encapsulation for CSS isolation
@Component({
  selector: 'app-emulated',
  template: `
    <h1>Emulated Encapsulation</h1>
    <p>This component uses emulated encapsulation for CSS isolation.</p>
  `,
  styles: [`
    h1 {
      color: red;
    }
  `],
  // Set the encapsulation property to ViewEncapsulation.Emulated (default value)
  encapsulation: ViewEncapsulation.Emulated
})
export class EmulatedComponent {}

देशी विश्वसनीय प्रकारों के लिए समर्थन : विश्वसनीय प्रकार एक ब्राउज़र सुविधा है जोसंवेदनशील संदर्भों में स्ट्रिंग्स का उपयोग करने के तरीके पर सख्त नियम लागू करके क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों को रोकने में मदद करती है। विश्वसनीय प्रकार दुर्भावनापूर्ण कोड को असुरक्षित स्ट्रिंग्स को साफ या अस्वीकार करके निष्पादित होने से रोक सकते हैं। कोणीय 16 देशी विश्वसनीय प्रकारों का समर्थन करता है और स्वचालित रूप से उन्हें आपके टेम्पलेट्स और अभिव्यक्तियों पर लागू करता है।

// Import the createTrustedHTML function
import { createTrustedHTML } from '@angular/core';

// Create a component that uses Trusted Types
@Component({
  selector: 'app-hello',
  template: `
    <div [innerHTML]="message"></div>
  `
})
export class HelloComponent {
  // Create a trusted HTML value using the createTrustedHTML function
  message = createTrustedHTML('<h1>Hello, world!</h1>');
  // Alternatively, use the safevalues library to create trusted values
  // import { createHtml } from 'safevalues/implementation/html_impl';
  // message = createHtml('<h1>Hello, world!</h1>');
}

उदाहरण के लिए, इसे लिखने के बजाय:

// Import the ActivatedRoute service
import { ActivatedRoute } from '@angular/router';

// Inject the ActivatedRoute service in the constructor
constructor(private route: ActivatedRoute) {}

// Use the ActivatedRoute service to get the router data
ngOnInit() {
  // Get the route params
  this.route.params.subscribe(params => {
    // Do something with params
  });

  // Get the route data
  this.route.data.subscribe(data => {
    // Do something with data
  });

  // Get the query params
  this.route.queryParams.subscribe(queryParams => {
    // Do something with queryParams
  });

  // Get the fragment
  this.route.fragment.subscribe(fragment => {
    // Do something with fragment
  });

  // Get the url
  this.route.url.subscribe(url => {
    // Do something with url
  });
}

// Define the component inputs for the router data
@Input() params: Params;
@Input() data: Data;
@Input() queryParams: Params;
@Input() fragment: string;
@Input() url: UrlSegment[];

// Use the component inputs to get the router data
ngOnInit() {
  // Do something with params
  // Do something with data
  // Do something with queryParams
  // Do something with fragment
  // Do something with url
}

// Import the RouterModule and Routes
import { RouterModule, Routes } from '@angular/router';

// Define the routes for the application
const routes: Routes = [
  // Use dynamic imports to load modules lazily
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
  }
];

// Import the modules for the application
@NgModule({
  imports: [
    // Use the RouterModule.forRoot method to register the routes and enable bindToComponentInputs option
    RouterModule.forRoot(routes, { bindToComponentInputs: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

निष्कर्ष

एंगुलर 16 एक बहुत बड़ा अपडेट है जो फ्रेमवर्क में कई सुधार और नई सुविधाएँ लाता है। कोणीय 16 संकेतों के साथ राज्य प्रबंधन में क्रांति लाने के लिए तैयार है। बेहतर डेवलपर अनुभव और सर्वर-साइड रेंडरिंग एप्लिकेशन के प्राकृतिक हाइड्रेशन के साथ, डेवलपर्स के पास आकर्षक यूजर इंटरफेस बनाने के लिए अधिक लचीलापन होगा।

एंगुलर 16 के लिए Google द्वारा उद्धृत अन्य विशेषताओं में एंगुलर के रिएक्टिविटी मॉडल को फिर से देखना और रनटाइम प्रदर्शन में सुधार के लिए वैकल्पिक बनाना, डिपेंडेंसी इंजेक्शन डीबगिंग एपीआई की शुरुआत, स्टैंडअलोन घटकों के लिए प्रलेखन और योजनाबद्धता में सुधार करना, एंगुलर सीएलआई द्वारा बनाए गए जावास्क्रिप्ट बंडलों को बेहतर बनाने के लिए विकल्पों की खोज करना और दस्तावेज़ शामिल हैं। रीफैक्टरिंग।Zone.js

️ 2023 में नया कोणीय 16 बड़ा हो रहा है: वह सब कुछ जो आपको जानना आवश्यक है

संतुष्ट

डेवलपर अनुभव: बेहतर और आसान

निष्कर्ष

और अधिक जानें