Angularjsルーティングメカニズム

12399 ワード

前言
AngularJSルーティングには主にngRouteとngRouteに基づいて開発されたサードパーティルーティングモジュールui-routerが内蔵されており、内蔵されたngRouteは開発ニーズを満たす場合があり、ui-routerを使用すると多くのオリジナルngRouteの不足を解決することができます.AngularJSのルーティングは実際には純粋なフロントエンドの解決策であり,urlを要求するとルーティングに基づいてこのurlを構成し,テンプレートフラグメントを要求してng-viewに挿入することを本質とする.AngularJSのルーティングはurlを変更することによってページのローカルリフレッシュを行う傾向がある.

1 ngRoute
ngRouteを使用するには、次のようなモジュールファイルを追加でロードする必要があります.

モジュールにngRouteへのもするがあります.

var app = angular.module('MyApp', ['ngRoute']);

ngRouteをすると、のがまれます.

する

ngView
directive
なるルーティングテンプレートでされたビューレイヤを
$routeProvider
provider
ルーティングの
$route
service
ルーティングをするためのurl,view,controllerの
$routeParams
service
りルーティングにまれるパラメータの

$routeProviderは、ルーティングテーブルをするサービスをします.2つのコアメソッドがあります.1.when(path,route)path:stringタイプで、このルーティングルールがするパスをします. :パスにするパラメータがな、pathパスが:/show/:nameのように、アドレスバーが:/show/lydiaの、ここのnameおよびする lydiaは$routeParamsサービスにされ、$routeParamsをするがあります. をします.route:objectタイプ. のをします.
コンフィギュレーション

controller
コントローラ
controllerAs
コントローラにをける
template
パスにするページテンプレートがng-viewにされます
templateUrl
テンプレートへのパス
resolve
このプロパティは、キーオブジェクトので、ルーティングにするコントローラにサービスまたはをバインドします.そしてしたまたはするサービスリファレンスをコントローラにする.resolveがpromiseオブジェクトである、コントローラにされるまでがするのをっています.この、コントローラはresolveのをっています.
redirectTo
リダイレクトアドレス
reloadOnSearch
アドレスのみするテンプレートをロードするかどうかをします.searchとparamsのではテンプレートはロードされません.デフォルトはtrueです.$locationです.search()がするとルーティングがロードされます.
caseInsensitiveMatch
パスのとの
2.otherwise(params)は、パスマッチングがれたにする.

ステップ1:htmlページをし、ローカルリフレッシュがなでng-viewをします.

<body ng-app="routeApp">
<div ng-view>div>


<script src="bower_components/angular/angular.js">script>
<script src="scripts/app.js">script>
<script src="scripts/controllers/main.js">script>
body>

ステップ2:controllerルーティングの

var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
      $routeProvider
      .when('/list', {
        templateUrl: 'views/route/list.html',
        controller: 'RouteListCtl'
      })
      .when('/list/:id', {
          templateUrl: 'views/route/detail.html',
          controller: 'RouteDetailCtl'
      })
      .otherwise({
        redirectTo: '/list'
      });
}]);

コントロールを2つ

routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
});

のでは,パラメータきurlとパラメータなしurlのルーティングとをにするだけで, なhtmlページとはされない.
resolveのい
$routeProviderの2 のパラメータは、ルーティングののです.ここにはresolveというながあります.resolveのは、このルーティングにるにresolveのデータのりをたなければならないことをします.すなわち、ターゲットルーティングをスキップするに、データのロードにのをい、データのがであるにのみ、ターゲットルーティングのテンプレートとするcontrollerをロードします.

$routeProvider
    .when("/news", {
        templateUrl: "newsView.html",
        controller: "newsController",
        resolve: {
            message: function(messageService){
                return messageService.getMessage();
        }
    }
})

のでは、htmlページとjsはmessageにがあるにのみロードされます.ルーティングがジャンプするに、resolveののすべてのpromiseがトリガーされ、すべてのpromiseがしいresolveになったにのみルーティングがわれ、$routeは$route ChangeSuccessのイベントをし、しいresolveにされていない、$routeは$route ChangeErrorのイベントをし、ルーティングのりえをします.

ui-router
ui-routerはngRouteにべて、1ページにのビューをネストしたり、ネストされたされたビューをしたり、のビューで1つのビューをしたりすることができるなどのがあります.インストール:

npm install angular-ui-router --save

にプロジェクトに :

するコントローラにui-routerのをします.

angular.module('myApp', ['ui.router']);

ui-routerにまれるはngRouteにており、クラスをうことができます.
ngRoute
ui-router
ng-view
ui-view
$routeProvider
$stateProvider
$routeParams
$stateParams
$route
$state
1.$state パラメータ
パラメータ

url
のパス(^でまるのはパス)
views
viewsのサブビューには、のテンプレート、コントローラ、プリロードデータがまれます.
abstract
テンプレートはアクティブにできません
template
HTML またはHTML をす
:htmlページ:

<body>
  <div>
  <div ui-view="filters">div>
  <div ui-view="mailbox">div>
  <div ui-view="priority">div>
div>
body>

js:

angular.module('myApp').config(['$stateProvider',function($stateProvider) {
$stateProvider
  .state('report',{
    views: {
      'filters': {
        template: 'Filter inbox
',
        controller: function($scope) {}
      },
      'mailbox': {
        templateUrl: 'partials/mailbox.html'
      },
      'priority': {
        template: 'Priority inbox
',
        resolve: {
          facebook: function() {
            return FB.messages();
          }
        }
      }
    }
  }).state('blog',{
        url:'/blog',
        views:{
            'container':{templateUrl:'templates/blog/layout.html'}
        }
    })

abstract テンプレートテンプレートはアクティブできませんが、そのサブテンプレートはアクティブできます. テンプレートは、、$scope ドメインをサブテンプレートにしたり、じurlでカスタムデータやプリロードのをしたりするくのビューをむテンプレートをします. のようになります.

$stateProvider
  .state('admin', {
    abstract: true,
    url: '/admin',
    template: ''
  })
  .state('admin.index', {
    url: '/index',
    template: 'Admin index
'
  })
  .state('admin.users', {
    url: '/users',
    template: '

...'
});
2.$stateParams$stateparamsをしてurl のなるパラメータをします.urlがそうである :

'/inbox/:inboxId/messages/{sorted}?from&to'

ユーザがアクセスすると、されたurlはのようになります.

'/inbox/123/messages/ascending?from=10&to=20'

$stateParamsオブジェクトのはのとおりです.

{inboxId: '123', sorted: 'ascending', from: 10, to: 20}

3.$urlRouterProvider$urlRouterProviderはngRouteとにwhen()とotherwise()の2つのいがあります.それにもrule()メソッドがあり、urlのマッチングをえたり、のルーティングのにルーティングをしたりして、はなパスのをします.

app.config(function($urlRouterProvider){
    //   url    
    $urlRouterProvider.rule(function ($injector, $location) {
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) 
            return normalized;
    });
})

ルーティングのマッチング

url:"/user/:id" 
url:"/user/{id}"

の2つのきはじです.

//      contactId  1 8    
url: "/contacts/{contactId:[0-9]{1,8}}"

できますか?をして、のようなクエリー・パラメータをします.

url: "/contacts?myParam"     //   "/contacts?myParam=value"

url: "/contacts?myParam1&myParam2"
//    "/contacts?myParam1=value1&myParam2=wowcool"

:https://www.cnblogs.com/lyy-2016/p/8762999.html

Qtcreatorコンパイルのプログラムに管理者権限を持たせる

IDEAがmavenプロジェクトを実行して遭遇したピット