AngularJS の基礎_AngularJS

angularJS の定義と機能

1.Google フロントエンド オープン ソース フレームワーク

2. MVVM (モデル ビュー ビューモデル) 設計パターン: Model は ($scope オブジェクトを通じて) ViewModel と対話し、Model の変更を監視します。これらは、HTML を使用してコードを表示し、View 経由で送信およびレンダリングできます

3. 便利な休憩

4. データ バインディングと依存関係の挿入

5. HTML を XML と同じように操作できます。AngularJS は独自のコンパイラーとディレクティブを通じて関連する設定を完了します。

6. テンプレートは DOM 要素として Angular コンパイラーに渡されます

7.AngularJS はディレクティブを通じて HTML を拡張し、式を通じてデータを HTML にバインドします。

angularJS アプリケーションをビルドする

Angular の を タグに追加します。

コードをコピーします コードは次のとおりです:

ng-app ディレクティブを タグに追加します

コードをコピーします コードは次のとおりです:

ng-app="ゲストライン"
ng-controller="メインコントローラー"
>


新しいディレクトリ スクリプトと app.js ファイルを作成し、app.js ですべてのモジュールと依存関係を定義および構成します

コードをコピーします コードは次のとおりです:

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

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

モジュール アプリでコントローラー、サービス、および命令を定義します

コードをコピーします コードは次のとおりです:

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

app.service( 'MainSevicel', function() {} ) //サービス
app.directive( 'dragToDismiss', function() {} ) //ディレクティブ

モジュールアプリでルートを定義する

コードをコピーします コードは次のとおりです:

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});
});



続きます。 。次のステップは、4.5 ステップとフィルターについて詳しく学ぶことです