ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJs_AngularJS でルートを使用および構成する方法

AngularJs_AngularJS でルートを使用および構成する方法

WBOY
リリース: 2016-05-16 15:16:06
オリジナル
1240 人が閲覧しました

Angular は、Google によって開発されたシングルページ アプリケーション フレームワークであり、バックの MVC パターンを適用した、双方向のデータ バインディングなど、多くの強力な機能を備えています。 -エンドからフロントエンド、カスタマイズ手順など

単一ページのアプリケーションであるため、ページの切り替えは間違いなく不可欠です。まず angular のルーティングについて説明します。

angular はページ切り替えを実装するときにルートを使用します。

<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 より前にロードする必要があります。次に、それをアプリに登録します。

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 
ログイン後にコピー

登録後、ルートを設定する必要があります

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におけるルートの使い方と設定に関する知識であり、皆様のお役に立てば幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート