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

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

Холбоотой материалууд
Динамик атрибутууд

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

Үйлдэл ба операторууд

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

Илэрхийлэл ба үйлдлүүд

JavaScript-д дараалсан үйлдлүүдийг гүйцэтгэн үр дүнг гаргах ажиллагааг илэрхийлэлээр удирдана. Илэрхийлэл бүр нь цэг таслалаар (;) төгсөнө. Хамгийн энгийн илэрхийллийн жишээ бол хувьсагчид утга олгох z = x + y; байж болно. Энэ жишээ нь x дээр y -г нэмсэн утгыг хувьсагч z –д олгоно. = оператор нь өөрийн баруун талд орших хэсгүүдэд хийгдсэн үйлдлүүдийн үр дүнг өөрийн зүүн талд байгаа хувьсагчид олгодог. Илэрхийлэлд байгаа хоосон зай, тав , мөр таслах тэмдэгтүүд хөрвүүлэх үед автоматаар хасагдана. Хааяа програмын кодыг уншихад эвтэйхэн болгох үүднээс логик холбоо бүхий илэрхийллүүдийг блок гэж нэрлэдэг багцанд оруулж өгдөг. Блок нь нээсэн их хаалтын ({) тэмдэг ба хаасан их хаалтын (}) тэмдэгүүдийн дунд байрлана. Блок доторх илэрхийлэл бүр нь (;) тэмдгээр төгсөх боловч хаасан их хаалтын (}) ард уг тэмдэгийг тавигддаггүй. Жишээ нь

Формын шалгалтын бэлтгэл

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

Формд төрөл бүрийн элементүүдийг оруулахыг өмнөх хичээлүүдэд үзсэн. Формтой ажиллах ажиллагааны бас нэгэн чухал хэсэг бол түүний validation буюу шалгалтын хэсэг байдаг. Vuejs фреймворк бүгдийг хэрэгцээтэй үед нь хэрэглэх гэсэн зарчмыг баримталдаг. Өөрөөр хэлбэл фреймворкийн үндсэн пакет хамгийн хэрэгтэй суурь зүйлүүдийг агуулаад бусад шаардлагатай хэсгийг нэмэлтээр суулган ашиглах гэсэн үг юм. Формын шалгалт хийх ажиллагаа Vuejs фреймворкийн үндсэн пакетад байдаггүй бөгөөд формд шалгалт хийх хэрэгтэй бол шаардлагатай пакетыг суулгах шаардлага гарна. Энэхүү зарчим нь програмын хэмжээ, ажиллагааны хурдад сайн нөлөө үзүүлдэг сайн аргачлал юм. Хичээлээр формын шалгалтын бэлтгэл болгоод цэвэр төслийг үүсгэе.

Интерсептор

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

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Өдрийн хуваарьт 5 хичээл ордог. Тэгвэл 11 хичээлээс зохиож болох хуваарийн хувилбарын тоог ол. Нэг хичээл өдөрт нэг удаа л орно.

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

 
Бодлого 16.042

y=8x3 ба y=8x функцуудын графикаар хязгаарлагдсан дүрсийн талбайг ол.

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

 
Бодлого 3.099

тэгшитгэлийн язгуурууд x1 , x2 , x3 бол

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

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