Definisi dan fitur AngularJS
1.Google Front-End Open Source Framework
2.MVVM (Model View View-Model) Mode Desain: Model akan berinteraksi dengan ViewModel (melalui objek $ SCOPE) dan akan mendengarkan perubahan dalam model. Ini dapat dikirim dan diberikan melalui tampilan, dan HTML menunjukkan kode Anda
3. Istirahat yang nyaman
4. Injeksi pengikatan data dan ketergantungan
5. Anda dapat mengoperasikan HTML seperti XML. AngularJS dapat menyelesaikan pengaturan yang relevan melalui kompiler dan arahannya sendiri.
6. Templat dilewatkan sebagai elemen DOM ke kompiler Angular
7. AngularJS memperluas HTML melalui arahan dan mengikat data ke HTML melalui ekspresi.
Bangun aplikasi AngularJS
Tambahkan tag <script> Angular ke tag <head>
Salinan kode adalah sebagai berikut:
<skrip src = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"> </script>
Tambahkan NG-APP Directive ke <dod> Tag
Salinan kode adalah sebagai berikut:
<Tubuh
ng-app = "guetonline"
ng-controller = "MainController"
>
Buat skrip direktori baru dan file app.js, tentukan dan konfigurasikan semua modul dan dependensi di app.js
Salinan kode adalah sebagai berikut:
var app = angular.module ('guetonline', [
'ngroute',
'Mobile-Angular-UI',
'Mobile-Angular-ui.gestures'
]);
Tentukan pengontrol, layanan, dan instruksi dalam aplikasi modul
Salinan kode adalah sebagai berikut:
app.controller ('mainctrl', fungsi ($ rootscope, $ scope, $ http) {}) // controller
app.service ('Mainsevicel', function () {}) // layanan
app.directive ('dragtodismiss', function () {}) // instruksi
Tentukan rute dalam aplikasi modul
Salinan kode adalah sebagai berikut:
app.config (function ($ routeProvider) {
$ routeProvider.when ('/', {templateUrl: 'index/home', reloadonSearch: false});
$ routeProvider.when ('/gulir', {templateUrl: 'scroll.html', reloadonSearch: false});
$ routeProvider.when ('/toggle', {templateUrl: 'toggle.html', reloadonSearch: false});
$ routeProvider.when ('/tab', {templateUrl: 'tabs.html', reloadonSearch: false});
$ routeProvider.when ('/Accordion', {TemplateUrl: 'Accordion.html', ReloadonSearch: false});
$ routeProvider.when ('/overlay', {templateUrl: 'overlay.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/official_view', {templateUrl: '/news/official_view', reloadonSearch: false});
});
untuk dilanjutkan. . Langkah selanjutnya adalah mempelajari lebih banyak langkah mendalam, dan ada filter