Angular は、Google によって開発されたシングルページ アプリケーション フレームワークであり、バックの MVC パターンを適用した、双方向のデータ バインディングなど、多くの強力な機能を備えています。 -エンドからフロントエンド、カスタマイズ手順など
単一ページのアプリケーションであるため、ページの切り替えは間違いなく不可欠です。まず angular のルーティングについて説明します。
angular はページ切り替えを実装するときにルートを使用します。
1 2 | <script src= "js/plugins/angular/angular.min.js" ></script>
<script src= "js/plugins/ui-router/angular-ui-router.min.js" ></script>
|
ログイン後にコピー
angular.min.js は angular-ui-router.min.js より前にロードする必要があります。次に、それをアプリに登録します。
1 2 3 4 5 | ( function () {
angular.module( 'demo' , [
'ui.router' ,
])
})();
|
ログイン後にコピー
登録後、ルートを設定する必要があります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function config( $stateProvider , $urlRouterProvider , $httpProvider ) {
$urlRouterProvider .otherwise( "/home/get" );
$stateProvider
.state( 'login' , {
url: "/login" ,
templateUrl: "../views/login.html" ,
})
.state( 'home' , {
abstract : true,
url: "/home" ,
templateUrl: "views/common/content.html" ,
})
.state( 'home.get' , {
url: "/get" ,
templateUrl: "views/get.html" ,
data: { pageTitle: 'Example view' }
})
.state( 'home.post' , {
url: "/post" ,
templateUrl: "views/post.html" ,
data: { pageTitle: 'Example view' }
});
}
app = angular.module( 'demo' );
app.config(config);
|
ログイン後にコピー
設定内の各状態はページを表すビューであり、対応する HTML ファイルは
に対応するファイル内にあります。
以上は編集者が共有したAngularJsにおけるルートの使い方と設定に関する知識であり、皆様のお役に立てば幸いです。