আমাকে এই বলে প্রবন্ধটি দেওয়া যাক, আমি ধরে নিচ্ছি যে আপনি এবং যে কেউ এটি পড়বেন তারা ইতিমধ্যে আঙ্গুলের 1 ( এখন অ্যাঙ্গুলারজেএস হিসাবে পরিচিত , নতুন সংস্করণগুলির জন্য কেবল কৌনিকের বিপরীতে ) আরামে রয়েছেন । বলা হচ্ছে, আসুন কৌনিক 2+ এর কিছু সংযোজন এবং মূল পার্থক্য।
- তারা একটি কৌণিক যুক্ত
cli।
আপনি চালিয়ে একটি নতুন প্রকল্প শুরু করতে পারেন ng new [app name]। আপনি ng serve
এখানে আরও শিখতে চালিয়ে আপনার প্রকল্পটি পরিবেশন করতে পারেন : https://github.com/angular/angular-cli
- আপনার কৌনিক কোডটি ES6 টাইপস্ক্রিপ্টে লেখা এবং এটি ব্রাউজারে জাভাস্ক্রিপ্ট থেকে রানটাইম সময়ে সংকলিত হয়।
এটি সম্পর্কে পুরোপুরি উপলব্ধি পেতে আমি আমার উত্তরের নীচে থাকা কিছু সংস্থান তালিকাটি পরীক্ষা করে দেখার পরামর্শ দিচ্ছি।
- প্রকল্পের কাঠামো
একটি মৌলিক কাঠামোতে, আপনার একটি app/tsফোল্ডার থাকবে যেখানে আপনি আপনার বেশিরভাগ কাজ করছেন এবং app/jsআপনি app/jsএকটি .js.mapএক্সটেনশন সহ ফোল্ডার ফাইলগুলিতে পাবেন । আপনার ব্রাউজার নেটিভ টাইপস্ক্রিপ্টটি পড়তে পারে না বলে তারা ডিবাগ করার জন্য আপনার ব্রাউজারে "আপনার" .ts "ফাইলগুলি" ম্যাপ করে।
আপডেট : এটি বিটার বাইরে। বেশিরভাগ ক্ষেত্রে প্রকল্পের কাঠামোটি কিছুটা বদলেছে এবং আপনি যদি কৌণিক ক্লিপ ব্যবহার করছেন তবে আপনি src/app/ফোল্ডারে কাজ করছেন
। একটি স্টার্টার প্রকল্পে, আপনি নিম্নলিখিত পাবেন।
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.componal.css : সিএসএস ফাইল আপনার নির্দিষ্ট ব্যবহার করা উচিতcomponent.html
app.componal.html : একটি দর্শন ( app.componal.js এ ভেরিয়েবল ঘোষিত)
app.componal.spec.ts : পরীক্ষার জন্য ব্যবহৃতapp.component.ts
app.componal.ts : আপনার কোড যা বাঁধেapp.component.html
app.module.ts : এটি আপনার অ্যাপ্লিকেশনটিকে কিক করে দেয় এবং যেখানে আপনি সমস্ত প্লাগইন, উপাদান, পরিষেবাদি ইত্যাদির সংজ্ঞা দেন এটি app.jsকৌনিক 1 এর সমতুল্য
index.ts প্রকল্প ফাইল সংজ্ঞায়িত বা রফতানি করতে ব্যবহৃত হয়
অতিরিক্ত তথ্য:
প্রো টিপ: আপনি ng generate [option] [name]নতুন পরিষেবাদি, উপাদান, পাইপ ইত্যাদি তৈরি করতে চালাতে পারেন
এছাড়াও tsconfig.jsonফাইল হিসাবে এটি আপনার প্রকল্পের জন্য হিজড়া কম্পাইল নিয়ম সংজ্ঞায়িত গুরুত্বপূর্ণ।
আপনি যদি ভাবছেন তবে আমাকে একটি সম্পূর্ণ নতুন ভাষা শিখতে হবে? ... উহু, টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্টের সুপারসেট। ভয় দেখাবেন না; এটি আপনার উন্নয়নকে আরও সহজ করার জন্য রয়েছে। আমি অনুভব করেছি যে এটির সাথে খেলে আমার কেবল কয়েক ঘন্টা পরে এটি ভালভাবে উপলব্ধি হয়ে গেছে এবং 3 দিন পরে এটি সমস্ত নিচে ফেলেছি।
- আপনি আপনার এইচটিএমএলের সাথে একইভাবে আবদ্ধ হন কীভাবে আপনি যদি এককুলার 1 নির্দেশিকায় থাকেন। সুতরাং মত পরিবর্তনশীল
$scopeএবং $rootScopeহ্রাস করা হয়েছে।
এটি আপনাকে বোঝানো হতে পারে। কৌণিক 2 এখনও একটি এমভি * তবে আপনি আপনার টেমপ্লেটগুলিতে কোড বেঁধে দেওয়ার উপায় হিসাবে ' উপাদানগুলি ' ব্যবহার করবেন, উদাহরণস্বরূপ, নিম্নলিখিতগুলি নিন
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
এখানে importবিবৃতিটিকে আপনার ভি 1 নিয়ন্ত্রণকারীর নির্ভরতা ইনজেকশন হিসাবে ভাবেন । আপনি এই ব্যবহার importকরতে আমদানির যেখানে, আপনার প্যাকেজগুলি import {Component}বলছেন আপনি একটি তৈরি করতে পারবে componentআপনি আপনার জুড়তে চাই HTML।
@Componentআপনার একটি selectorএবং সজ্জা সজ্জা লক্ষ্য করুন template। আপনি selectorযেমনটি আপনার যেমন $scopeব্যবহার করেন তেমন ভাবুন আপনি ভি 1 ব্যবহার করেন directivesযেখানে আপনার নামটি selectorযেমন আপনার এইচটিএমএলকে আবদ্ধ করতে ব্যবহার করেন
<my-app> </my-app>
<my-app>আপনার কাস্টম ট্যাগটির নাম কোথায় আপনি ব্যবহার করবেন যা আপনার টেম্পলেটটিতে যা ঘোষণা করা হয়েছে তার জন্য স্থানধারক হিসাবে কাজ করবে। ie) <h1> Hello World! </h1>। যদিও এটি ভি 1 এর নীচের মত দেখাবে:
এইচটিএমএল
<h1>{{hello}}</h1>
জাতীয়
$scope.hello = "Hello World!"
লোডিং বার্তা উত্পন্ন করতে আপনি এই ট্যাগগুলির মধ্যে কিছু যোগ করতে পারেন, যেমন:
<my-app> Loading... </my-app>
তারপরে এটি লোডিং বার্তা হিসাবে " লোডিং ... " প্রদর্শিত হবে ।
মনে রাখবেন যে যা আপনি ঘোষিত তা templateহ'ল পথ বা কাঁচা এইচটিএমএল যা আপনি HTMLআপনার selectorট্যাগটিতে ব্যবহার করবেন ।
কৌনিক 1 এর পূর্ণাঙ্গ বাস্তবায়ন আরও দেখতে এইরকম হবে:
এইচটিএমএল
<h1 ng-controller="myCtrl">{{hello}}</h1>
ভি 1 এ এটির মতো দেখতে হবে
জাতীয়
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
এটি আমি v2 সম্পর্কে সত্যিই পছন্দ করি। আমি খুঁজে পেলাম যে নির্দেশিকাটি আমার জন্য ভি 1 এ খাড়া শেখার বক্ররেখা ছিল এবং আমি যখন তাদের বের করেছিলাম তখনও আমি প্রায়শই CSSআমার উদ্দেশ্য কীভাবে তা রেন্ডার করিনি। আমি এটি সহজ উপায় খুঁজে।
ভি 2 আপনার অ্যাপ্লিকেশনটির আরও সহজ স্কেলিবিলিটি করার অনুমতি দেয় যেহেতু আপনি আপনার অ্যাপ্লিকেশনটিকে ভি 1-র তুলনায় আরও সহজ করতে পারেন break আমি এই পদ্ধতির পছন্দ করি কারণ আপনার একক ফাইলে আপনার সমস্ত কাজকর্ম অংশগুলি কৌণিক ভি 1-র বেশ কয়েকটি থাকার বিপরীতে থাকতে পারে।
আপনার প্রকল্পটি ভি 1 থেকে ভি 2 এ রূপান্তর করার বিষয়ে কী?
আমি কি উন্নয়ন দল থেকে শোনা করেছি আপনি v2 মাত্র মধ্য দিয়ে যাচ্ছে এবং অবচিত ব্লব মোছা এবং আপনার প্রতিস্থাপন হবেন আপনার v1 এ প্রকল্পের আপডেট করতে চাই থেকে $scopeসঙ্গে গুলি selectorগুলি। আমি এই ভিডিওটি সহায়ক বলে মনে করেছি। এটি আয়নিক দলের এমন কিছু দলের সাথে রয়েছে যারা কৌণিক দলের সাথে পাশাপাশি কাজ করছে যেহেতু ভি 2 এর মোবাইলের উপর আরও জোর দেওয়া হয়েছে https://youtu.be/OZg4M_nWuIk আশা করি এটি সাহায্য করবে।
আপডেট: আমি কৌনিক 2 এর আনুষ্ঠানিক বাস্তবায়নগুলি প্রকাশিত হওয়ায় উদাহরণগুলি যোগ করে আপডেট করেছি।
আপডেট 2: এটি এখনও একটি জনপ্রিয় প্রশ্ন বলে মনে হচ্ছে তাই আমি ভেবেছিলাম যে কৌনিক 2 দিয়ে কাজ শুরু করার সময় আমি খুব উত্সাহী কিছু উত্স পেয়েছি I'd
সহায়ক সংস্থানসমূহ:
ES6 এর জন্য আরও জানার জন্য, আমি দ্য বোস্টনের ECMAScript 6 / ES6 এর নতুন বৈশিষ্ট্য টিউটোরিয়ালগুলি পরীক্ষা করে দেখার পরামর্শ দিই - ইউটিউব প্লেলিস্ট
টাইপস্ক্রিপ্ট ফাংশন লিখতে এবং তারা জাভাস্ক্রিপ্টে কীভাবে সংকলন করে তা টাইপস্ক্রিপ্ট ভাষা খেলার মাঠ চেক করে দেখুন
কৌণিক 1 সমতুল্য কৌণিক 2 এ ফাংশন ভাঙ্গন দ্বারা কোন ক্রিয়াকলাপ দেখতে Angular.io দেখুন - কুকবুক -A1 এ 2 দ্রুত রেফারেন্স