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 хооронд бараг ялгаа байхгүй ч хувилбар хоорондын өөрчлөлтийг албан ёсны сайтаас харж болно.

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

Холбоотой материалууд
ErrorBoundary

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

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

Өөрчлөлтийг watch -аар судлах

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

Хэрэглэгч талын хуудасны боловсруулалтад javascript дэвшилтэд буюу реактив фреймворкуудыг ашиглах нь улам өргөн болж байгаа тул ойрын жилүүдэд энэ чиглэлийн програм зохиогчдын эрэлт өндөр болох нь гарцаагүй. Иймээс програмчлалын мэрэгжлээр суралцаж байгаа болоод ажиллаж буй залуучууд Angular, React, Vue зэрэг фреймворкуудын ажиллагааг судлан суралцахыг зөвлөе. Фреймворкуудийн ажиллагаанууд өөр өөрийн онцлогтой хэдий ч ерөнхий зарчим бараг ижил тул аль нэгийг нь сурсан байхад бусдыг нь амархан сурна. VueJs -ийн бусдаасаа ялгарах онцлог гэвэл суурь пакет жижигхэн, суралцахад хөнгөнд оршино. Энэ нь фреймворкийн функционал муу гэсэн үг биш гэдгийг сануулъя.VueJs -ээр хамгийн өндөр шаардлага тавьдаг хэрэглэгчийн хэрэгцээг ч хангах програмыг төвөггүй боловсруулж чадна.

Өгөгдлийн төрлийг хувиргах

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

Javascript өгөгдлийн төрөлд нилээд чөлөөт байдлыг олгодог нь зарим тооцоололд хүндрэл, үл ойлгогдох байдлыг үүсгэх тал байдаг. Иймд программд өгөгдлийн төрлүүдийг автоматаар хөрвүүлэхдээ ямар дүрэмтэй байдгийг мэдэж байх нь чухал. Энэ хичээлээр өгөгдлийн төөрлийг хувиргар талаар авч үзэх болно.

Тоон дээр мөрийг нэмэх гэвэл яах вэ

Дараах кодыг авч үзье.

Интерполяц

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

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello {{ name }}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name: 'Vue !!!'
                }
            })
        </script>        
    </body>
</html>

кодыг авч үзье.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

KLM суурьтай, KL=1, KK1=d талтай KLL1K1 тэгш өнцөгт хажуу бүхий KLMK1L1M1 призм өгөгджээ. KL_|_KM, LMM1 , KMM1 хавтгайнуудын хоорондын өнцөг 60°, бол утганд призмд түүний бүх талыг шүргэх шаарыг багтааж болно.

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

 
Бодлого 2.035

тоонд хуваахад гарах тооны аравтын бичлэгт "0" цифр хэдэн удаа орох вэ?

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

 
Бодлого 6.022

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195