Asas AngularJS_AngularJS

takrifan dan ciri angularJS

1. rangka kerja sumber terbuka bahagian hadapan google

2. Corak reka bentuk MVVM (model paparan model): Model akan berinteraksi dengan ViewModel (melalui objek $scope) dan akan memantau perubahan dalam Model. Ini boleh dihantar dan diberikan melalui View, menggunakan HTML untuk memaparkan kod anda

3. REHAT yang Mudah

4. Pengikatan data dan suntikan kebergantungan

5. Anda boleh mengendalikan HTML seperti XML yang melengkapkan tetapan berkaitan melalui penyusun dan arahannya sendiri

6. Templat diserahkan kepada pengkompil Sudut sebagai elemen DOM

7.AngularJS memanjangkan HTML melalui arahan dan mengikat data kepada HTML melalui ungkapan.

Bina aplikasi angularJS

Tambahkan teg Angular pada teg

Salin kod Kod adalah seperti berikut:

Tambahkan arahan ng-app pada

Salin kod Kod adalah seperti berikut:

ng-app="guetonline"
ng-controller="MainController"
>


Buat skrip direktori baharu dan fail app.js, tentukan dan konfigurasikan semua modul dan kebergantungan dalam app.js

Salin kod Kod adalah seperti berikut:

var app = angular.module('guetonline', [

'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);

Tentukan pengawal, perkhidmatan dan arahan dalam apl modul

Salin kod Kod adalah seperti berikut:

app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Controller

app.service( 'MainSevicel', function() {} ) //Service
app.directive( 'dragToDismiss', function() {} ) //Arahan

Tentukan laluan dalam apl modul

Salin kod Kod adalah seperti berikut:

app.config(function($routeProvider) {

$routeProvider.when('/', {templateUrl: 'index/home', 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('/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});
});



Bersambung. . Langkah seterusnya ialah untuk mengetahui lebih lanjut tentang 4.5 langkah dan penapis