Angular UI Routerの詳細

Posted on by admin

Angular UI Routerはangular jsのルーティングフレームワークです。

Angular JSはすでにルーティング用のngRouteモジュールを提供しています。 これは基本的なルーティングlibであり、任意のルートに対して一つのビューとコントローラを指定できます。 NgRouteを介してネストされたビューを実現することはできません。 私たちはUI Routerを使用しています。

intexにAngularを含めた後にライブラリを含めることができます。html

<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">

UIルータパッケージは、node package managerであるnpmを使用して配布されます。

npm install --save angular-ui-router

UI Routerに依存関係を追加する

アプリケーションを設定するには、依存関係（ui。ルータ）をメインモジュールに。

angular.module('myApp', )

コンポーネント

UIルータには一連のコンポーネントがあります。

state stateProvider:
状態はアプリケーション内の場所に対応します。 状態は、コントローラ、テンプレート、およびビューのプロパティを介して記述されます。
移行関連のイベントやコールバックをトリガーします。 ターゲット状態の依存関係を解決し、現在の状態を反映するようにlocation locationを更新します。 Urlがあり、automatically urlRouterProviderに自動的に登録されている状態。

ui-sref:ui-srefはアンカータグのhrefと同等です。

ui-view:現在の状態で定義されたビューをレンダリングします。

初期状態

を設定して、使用できる状態を定義します。configメソッドこのconfigメソッドでは、モーダルごとにいくつかの状態を定義できます。

.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})

上記の行では、homeという名前の状態を作成しました。 状態がアクティブになると、テンプレートは自動的にui-viewに挿入されます。

ui-viewディレクティブの定義

UI Routerはui-viewというディレクティブを使用します。 ui-viewは、状態テンプレートをロードする必要があると判断します。 インデックスにui-viewディレクティブを含めます。html

<!doctype html>
<html>
<head>
<title>UI Router for Angular JS</title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>

Template

特定の状態のテンプレートを定義するには、さまざまな方法があります。
template:htmlコンテンツの文字列、またはhtmlを返す関数。
templateUrl:テンプレートへのurlパスを含む文字列、またはurlパス文字列を返す関数。

コントローラ

状態にコントローラを割り当てることができます。 モジュール

using functionsで既にコントローラを定義している場合は、functionまたはcontroller nameを使用してコントローラを定義できます:

$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})

コントローラを使用して:

$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})

抽象状態

抽象状態は、複数の状態に共通の情報を共有するために使用されます。 それは子の状態を持っており、それ自体を活性化することはできません。 抽象状態は、その子状態のいずれかがアクティブ化されます。

$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})

状態パラメータ

url stateParamsサービスは、urlがassets/js/appの場合、urlに関する情報を格納できるオブジェクトです。js”を発表した。 これらのurlパラメータのいずれかをobject stateParamsオブジェクトに渡すことができ、この情報を別の状態に使用します。

$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})

ネストされた状態

互いに入れ子にすることができる状態は、子の状態が親の状態を持つuiビュー内にレンダリングされることを意味します。

$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})

Resolve

Resolveは、ルートのデータを事前にロードするオプションです。上記のコードでは、userオブジェクトはuserをロードし、次にtaskオブジェクトをロードしますが、ユーザーがtaskを持つことができる場合のみです。 ルートは、すべての解決が成功した場合にのみロードされます。 最初の解決が失敗した場合、2番目の解決は試行されません。

コメントを残す

メールアドレスが公開されることはありません。