คำจำกัดความและคุณสมบัติของ AngularJS
1. GOOGLE Front-end Open Source Framework
2.MVVM (Model View View-Model Model) โหมด: โมเดลจะโต้ตอบกับ ViewModel (ผ่านวัตถุ $ SCOPE) และจะฟังการเปลี่ยนแปลงในโมเดล สิ่งเหล่านี้สามารถส่งและแสดงผลผ่านมุมมองและ HTML แสดงรหัสของคุณ
3. พักผ่อนสะดวก
4. การเชื่อมโยงข้อมูลและการฉีดพึ่งพา
5. คุณสามารถใช้งาน HTML เช่น XML AngularJs สามารถทำให้การตั้งค่าที่เกี่ยวข้องเสร็จสมบูรณ์ผ่านคอมไพเลอร์และคำสั่งของตัวเอง
6. เทมเพลตถูกส่งผ่านเป็นองค์ประกอบ DOM ไปยังคอมไพเลอร์ของ Angular
7. AngularJS ขยาย HTML ผ่านคำสั่งและผูกข้อมูลกับ HTML ผ่านนิพจน์
สร้างแอปพลิเคชัน AngularJS
เพิ่มแท็ก <Script> ของ Angular ของ Angular ลงในแท็ก <head>
การคัดลอกรหัสมีดังนี้:
<script src = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"> </script>
เพิ่มคำสั่ง ng-app ลงในแท็ก <body>
การคัดลอกรหัสมีดังนี้:
<ร่างกาย
ng-app = "guetonline"
ng-controller = "MainController"
-
สร้างไฟล์สคริปต์ไดเรกทอรีใหม่และแอพพลิเคชั่นกำหนดและกำหนดค่าโมดูลและการพึ่งพาทั้งหมดใน App.js
การคัดลอกรหัสมีดังนี้:
var app = angular.module ('guetonline', [
'ngroute',
'Mobile-Angular-ui'
'มือถือ-Angular-ui.gestures'
-
กำหนดคอนโทรลเลอร์บริการและคำแนะนำในแอพโมดูล
การคัดลอกรหัสมีดังนี้:
app.controller ('mainctrl', ฟังก์ชั่น ($ rootscope, $ scope, $ http) {}) // คอนโทรลเลอร์
app.service ('mainsevicel', function () {}) // บริการ
app.directive ('dragtodismiss', function () {}) // คำแนะนำ
กำหนดเส้นทางในแอพโมดูล
การคัดลอกรหัสมีดังนี้:
app.config (ฟังก์ชั่น ($ routeProvider) {
$ routeprovider.when ('/', {templateurl: 'ดัชนี/โฮม', reloadonsearch: false});
$ routeprovider.when ('/scroll', {templateurl: 'scroll.html', reloadonsearch: false});
$ routeprovider.when ('/toggle', {templateurl: 'toggle.html', reloadonsearch: false});
$ routeprovider.when ('/tabs', {templateurl: 'tabs.html', reloadonsearch: false});
$ routeprovider.when ('/หีบเพลง', {templateurl: 'accordion.html', reloadonsearch: false});
$ routeprovider.when ('/overlay', {templateurl: 'oulveray.html', reloadonsearch: false});
$ routeprovider.when ('/forms', {templateurl: 'forms.html', reloadonsearch: false});
$ routeprovider.when ('/dropdown', {templateurl: 'dropdown.html', reloadonsearch: false});
$ routeprovider.when ('/drag', {templateurl: 'drag.html', reloadonsearch: false});
$ routeprovider.when ('/carousel', {templateurl: 'carousel.html', reloadonsearch: false});
$ routeprovider.when ('/news/quality_view', {templateurl: '/news/quality_view', reloadonsearch: false});
-
จะดำเนินการต่อ - ขั้นตอนต่อไปคือการเรียนรู้ขั้นตอนเชิงลึกเพิ่มเติมและมีตัวกรอง