AngularJSの定義と機能
1.Googleフロントエンドのオープンソースフレームワーク
2.MVVM(Model View View-Model)設計モード:モデルはViewModel($ Scopeオブジェクトを介して)と対話し、モデルの変更を聞きます。これらはビューを通して送信およびレンダリングすることができ、HTMLはコードを表示します
3.便利な休息
4。データの拘束力と依存関係の注入
5. XMLなどのHTMLを操作できます。 AngularJは、独自のコンパイラとディレクティブを通じて関連する設定を完了できます。
6.テンプレートは、AngularのコンパイラのDOM要素として渡されます
7。AngularJSは、ディレクティブを通じてHTMLを拡張し、式を介してデータをHTMLに結合します。
AngularJSアプリケーションを構築します
Angular's <script>タグを<head>タグに追加します
コードコピーは次のとおりです。
<スクリプト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ファイルを作成し、app.jsですべてのモジュールと依存関係を定義および構成します
コードコピーは次のとおりです。
var app = angular.module( 'guetonline'、[
「ngroute」、
'Mobile-Angular-ui'、
'Mobile-Angular-ui.gestures'
]);
モジュールアプリのコントローラー、サービス、および指示を定義します
コードコピーは次のとおりです。
App.Controller( 'MainCtrl'、function($ rotscope、$ scope、$ http){})//コントローラー
app.service( 'mainsevicel'、function(){})// service
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( '/gulgle'、{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/why _view'、{templateurl: '/news/why _view'、reloadonsearch:false});
});
つづく。 。次のステップは、より詳細なステップを学ぶことです。フィルターがあります