Angular фреймворк

Сүүлийн жилүүдэд Angular, React, Vue гэх мэт Javascript сангуудын хөгжлөөр интернет програмчлалд динамик ажиллагаагтай сайт боловсруулах шинэ давалгаа үүссэн. Энэ нийтлэлээр Angular гэж юу вэ, юунд хэрэгтэй, ямар асуудлыг шийдэхэд бидэнд туслахыг тодруулъя. Angular бол Google компани боловсруулсан нээлттэй эх код бүхий JavaScript сан буюу фреймворк. Angular фреймворкийг ашиглан Single page application / нэг хуудас програм/ гэж нэрлэдэг динамик програмыг бүтээдэг. Энгийнээр хэлбэл Single page application гэдэг нь интернет дэх ердийн сайт боловч сайт ердөө нэг л хуудсаас бүрдэнэ. Энэ бол техникийн талаасаа ойлголт. Single page application хэрхэн ажилладаг, ердийн сайтуудаас ямар давуу талтайг Angular -ын албан ёсны веб сайтаас https://angular.io харж болно.

Сайтын ажиллагааг харвал хуудас хоорондын шилжилт ямар нэгэн дахин ачаалалтгүйгээр шууд шилжиж байгаа. Юуны ачаар ийм үр дүнд хүрч байна вэ гэвэл сайтын бүх код манай хөтөч дээр локал байдлаар байрлаж байгаад оршино. Гэхдээ бүх агуулга бидний хандсан URL -аас хамааран JavaScript -ээр динамикаар бүрдэж байгаа. Ингэснээр бид өөр өөр хуудсуудыг нэг сайт дээрээс хараад байгаа мэт сэтгэгдэл төрүүлнэ.
Энэ аргачлал стандарт аргачлалаас юугаар ялгаатай вэ гэвэл бид серверт илүү хүсэлтийг явуулахгүйд оршиж байгаа. Стандарт аргачлалд бид шинэ хуудаст шилжих хэрэгтэй болбол сонирхож буй цэсээ сонгоход шинэ URL бүрдүүлээд түүнийг серверт илгээн сервер талд шинэ хуудсын генерац /бүрдүүлэлт/ хийгдэн HTML хуудсыг хэрэглэгчид буцаадаг. Харин SPA -ны хувьд серверээс ямар нэгэн HTML хуудсыг авахгүй түүнийг JavaScript -ээр динамикаар бүрдүүлэн харуулдаг. Ингэснээр SPA серверт хүсэлт илгээх технологиос хамаагүй хурдан ажилладаг тул орчин үед сайт бүтээх ажиллагаанд маш хурдацтай тархах болсон. Ийм төрлийн програмыг амархан, хөнгөн зохион, дэмжлэг үзүүлэхэд Angular фреймворк бидэнд туслана.
Хувилбарын хувьд Google компани эхлээд Angular JS 1 -ийг зохиосон бөгөөд энэ хувилбар нилээд өргөн дэлгэрч түүн дээр олон сайтууд бичигдсэн. Харин 2016 онд Google компани өмнөх хувилбараасаа өөр хэл дээр, өөр паттернууд ашиглан бичигдсэн бүрэн шинэчлэгдсэн Angular JS 2 хувилбарыг танилцуулсан. Энд хувилбарын зөрчил бий болсон учраас эдгээрийн синхронизац хийх үүднээс Angular4 хувилбарыг гарган зүгээр Angular гэж нэрлэсэн. 2017 оны 11-р сард Google компани Angular5 хувилбарыг гаргасан бөгөөд хагас жил бүрд дараагийн шинэчилсэн хувилбарыг гаргахаар болсон. Түүнээс хойш фреймворкийг хөгжүүлснээрAngular8 хувилбар гараад байгаа. Ерөнхийдөө Angular JS 2 болон Angular4 ба түүнээс дээшхи хувилбаруудын API хооронд бараг ялгаа байхгүй ч хувилбар хоорондын өөрчлөлтийг албан ёсны сайтаас харж болно.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1124 Төлбөртэй

Програмчлалын хэлүүдийг хамгийн сайн, хүчирхэг гэх мэтээр рейтенг гарган сургалтад ашиглах гээд байх шиг харагддаг. Эрэлт өндөртэй хэлүүдийг сургалтын суурь болгон ашиглах ёстой. Гэхдээ юунаас эхлэх, ямар програмаар яван хир бэлтгэгдсэн мэрэгжилтэн гаргах төлөвлөгөөтэй байхгүй бусдын жишгээр эсхүл моод хөөцөлдвөл ямарч чадваргүй мэргэжилтэнээр л дүүрэх байх. Гол анхаарах зүйл бол ямар хэлийг эзэмшсэн мэрэгжилтэн өндөр эрэлттэй, цалин хөлс сайтай, ирээдүйтэй вэ гэдгийг л сайн ажиглаж байх хэрэгтэй. Сүүлийн жилүүдэд програм зохиох технологид олон зүйлүүд шинээр орон ирснээр frontend програм зохиогчидын эрэлт тасралтгүй нэмэгдсээр байгаа. Энэ бол та javascript хэлийг судлах ёстойг зааж буй чиг. Иймээс сайтын javascript хэлний хичээлүүдийг үзэхийг санал болгоё.

Хуудас дээрх формоос хэрэглэгч жагсаалтаас сонголт хийн ажиллах тохиолдол олон. Иймээс энэ хичээлээр формын бас нэгэн чухал элемент болох сонголтын select тегийг

<template>
  <div>
    <h2>Form inputs</h2>
    <select>
      <option v-for="s in socialsList"> {{ s }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      socialsList: ['instagram', 'twitter', 'facebook']
    }
  }
}
</script>

жишээгээр авч үзье.

  Нээгдсэн тоо: 2677 Нийтийн

Хичээлүүдийг үзэхэд таньд текст засварлагч Notepad ++ тэгээд интернет хөтөч байхад л хангалттай.  Хичээлийн бүх жишээг өөрөө бичин туршин үзээрэй.

JavaScript-ийн бичлэгийн дүрэм

JavaScript –ийг үзэж эхлэхийн өмнө түүнийг бичлэгийн үндсэн дүрмүүдийг мэдэх хэрэгтэй. JavaScript ба Java -гийн бичлэгийн дүрэм C болон C++ ийнхтай адилхан. Хэрвээ та C-гийн төрлийн ямар нэгэн хэлийг мэддэг бол Javascript -ийг сурахад их амархан.    
Үндсэн дүрмүүдээс дурдвал

  Нээгдсэн тоо: 1171 Төлбөртэй

Промисүүдийн ашиглалтыг илүү тод харуулахын тулд алслагдсан сервэрийг ашиглах жишээг харцгаая. Алслагдсан сервертэй ажиллахад хөнгөн болгох үүднээс төсөлд jquery санг суулгая. Үүний тулд терминалыг нээгээд

npm i -s jquery командыг өгөхөд npm пакет төсөлд jquery санг суулгана. Төслийн package.json файлын dependencies талбарт "jquery": "^3.3.1" хамаарал нэмэгдэн орж ирнэ. Одоо төсөлд jquery санг ашиглах боломжтой болсон тул кодоо бичье.

  Нээгдсэн тоо: 793 Бүртгүүлэх

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 345

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 438

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 408

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 484

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 559

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 548

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 670

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 790

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 804

 
Энэ долоо хоногт

Нээгдсэн тоо : 1622

 

[-252; 299) завсарт орших 18 -д үлдэгдэлгүй хуваагдах тоонуудын нийлбэрийг ол.

Нээгдсэн тоо : 1055

 

тэгшитгэлийг бод.

Нээгдсэн тоо : 275