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

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

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

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

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