この記事では主に、ui-route を使用して多層ネストされたルーティングを実装する AngularJS の例を紹介し、参考として提供します。
この記事では、ui-route を使用して多層のネストされたルーティングを実装する例を紹介します。詳細は次のとおりです。
1. 期待される実装効果:
//liyuan-meng.github.io/ uiRouter-app/index.html
(プロジェクトアドレス: https://github.com/liyuan-meng/uiRouter-app)
2 番目に、質問の要件を分析し、依存関係を確認し、プロジェクトをビルドします
1. サービス:
(1) 条件に基づいて人物データ checkPeople.service をクエリするか、条件が指定されていない場合はすべてをクエリします。
(2) ルーティング情報getStateParams.serviceを取得します。
2. コンポーネント:
(1) hello モジュール: ボタン ボタンをクリックしてコンテンツを変更します。
(2) peopleList モジュール: 人物リストを表示します。人物をクリックすると人物の詳細が表示されます。 checkPeople.service モジュールに依存します。
(3) peopleDetail モジュール: 人物の詳細を表示し、checkPeople.service モジュールと getStateParams.service モジュールに依存します。
3. プロジェクトをビルドします:
図に示すように、コンポーネント ディレクトリはすべてのサービス モジュールとビジネス モジュールの保存に使用され、lib ディレクトリは外部参照の保存に使用されます (私は angular.js1 を使用します)。 5.8 および ui-route0.2.18) では、app.config.js ファイルがルーティングの構成に使用され、index.html がエントリ ファイルとして使用されます。
3. この例を実装します
1. ホームページindex.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/angular.js"></script> <script src="./lib/angular-ui-route.js"></script> <script src="./app.config.js"></script> <script src="./components/core/people/checkPeople.service.js"></script> <script src="./components/core/people/getStateParams.service.js"></script> <script src="./components/hello/hello.component.js"></script> <script src="./components/people-list/people-list.component.js"></script> <script src="./components/people-detail/people-detail.component.js"></script> </head> <body ng-app="helloSolarSystem"> <p> <a ui-sref="helloState">Hello</a> <a ui-sref="aboutState">About</a> <a ui-sref="peopleState">People</a> </p> <ui-view></ui-view> </body> </html>
(1) lib内のファイルと、使用されるすべてのサービスおよびコンポーネントのサービスファイルをインポートします。
(2) ng-app="helloSolarSystem" は、解析が helloSolarSystem モジュールから開始されることを指定します。
(3) ビュー
2. ルーティングを構成します app.config.js
'use strict';
angular.module("helloSolarSystem", ['peopleList', 'peopleDetail', 'hello','ui.router']).
config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('helloState', {
url: '/helloState',
template:'<hello></hello>'
}).state('aboutState', {
url: '/about',
template: '<h4 id="Its-nbsp-the-nbsp-UI-Router-nbsp-Hello-nbsp-Solar-nbsp-System-nbsp-app">Its the UI-Router Hello Solar System app!</h4>'
}).state('peopleState', {
url: '/peopleList',
template:'<people-list></people-list>'
}).state('peopleState.details', {
url:'/detail/:id',
template: '<people-detail></people-detail>'
})
}
]);(1) モジュール名: helloSolarSystem
(2) 'peopleList を挿入します。 '、'peopleDetail'、'hello'、'ui.router' モジュール。
(3) helloState という名前の最初のビュー コントローラーなど、stateProvider サービスのビュー コントロールを構成します。ui-sref == "helloState" の場合、ルートは URL #/helloState および
(4) ネストされたルーティングの実装: peopleState という名前のビュー コントローラーが親ルートです。 peopleState.details という名前のビュー コントローラーは子ルートです。これは相対ルーティング方法です。親ルートは.../index.html#/peopleState/ に一致し、子ルートは.../index.html#/peopleState/detail/x に一致します (x は /detail/)。 :id ) の id の値。絶対ルーティングに変更する場合は、url:'^/detail/:id' と記述するだけで、サブルートは.../index.html#/detail/x に一致します (x は /detail/ にあります)。 :id) ID 値)。
4. checkPeople.serviceの実装（条件に基づいて人物を検索）
checkPeople.sercice.js
'use strict';
//根据条件（参数）查找信息。
angular.module('people.checkPeople', ['ui.router']).
factory('CheckPeople', ['$http', function ($http) {
return {
getData: getData
};
function getData(filed) {
var people;
var promise = $http({
method: 'GET',
url: './data/people.json'
}).then(function (response) {
if (filed) {
people = response.data.filter(function (value) {
if (Number(value.id) === Number(filed)) {
return value;
}
})
} else {
people = response.data;
}
return people;
});
return promise;
}
}]);(1) getData関数では人物情報を保存するために配列を返したいのですが、 $http( ).then() サービス、これは非同期リクエストです。リクエストがいつ終了するかわからないため、people 配列を返すときに問題が発生します。 $http().then() が Promise オブジェクトであることに気付きました。そのため、このオブジェクトを直接返すことを考えることができます。これにより、「function.then(function(data)) の結果」を使用して非同期リクエストを取得できます。来るデータデータ。
3. getStateParams.service の実装 (ルーティング情報の取得)
getStatePatams.service.js
"use strict";
angular.module("getStateParams", ['ui.router']).
factory("GetStateParams", ["$location", function ($location) {
return {
getParams: getParams
};
function getParams() {
var partUrlArr = $location.url().split("/");
return partUrlArr[partUrlArr.length-1];
}
}]);(1) ここでの getParams 関数は、ルーティング情報の最後のデータ、つまりユーザーの ID を返します。このサービスは少し特殊です。 、汎用性が十分ではないため、より合理的にするために最適化する必要があるかもしれません。しかし、それは私たちのニーズには影響しません。
4. hello モジュールを実装します
hello.template.html
<p> <p ng-hide="hideFirstContent">hello solar sytem!</p> <p ng-hide="!hideFirstContent">whats up solar sytem!</p> <button ng-click="ctlButton()">click</button> </p>
hello.component.js
'use strict';
angular.module("hello", [])
.component('hello', {
templateUrl: './components/hello/hello.template.html',
controller: ["$scope",
function HelloController($scope) {
$scope.hideFirstContent = false;
$scope.ctlButton = function () {
this.hideFirstContent = !this.hideFirstContent;
};
}
]
});5. peopleList モジュールを実装します:
peopleList.template.html
<p>
<ul>
<a ng-repeat="item in people" ui-sref="peopleState.details({id:item.id})">
<li>{{item.name}}</li>
</a>
</ul>
<ui-view></ui-view>
</p> (1) ここに
'use strict';
angular.module("peopleList", ['people.checkPeople'])
.component('peopleList', {
templateUrl: './components/people-list/people-list.template.html',
controller: ['CheckPeople','$scope',
function PeopleListController(CheckPeople, $scope) {
$scope.people = [];
CheckPeople.getData().then(function(data){
$scope.people = data;
});
}
]
});のサブコンポーネントpepleDetailを表示するために使用されますpeopleDetail.template.html<ul ng-repeat="item in peopleDetails track by $index">
<li>名字： {{item.name}}</li>
<li>介绍： {{item.intro}}</li>
</ul>peopleDetail.component.js'use strict';
angular.module("peopleDetail", ['people.checkPeople', 'getStateParams'])
.component('peopleDetail', {
templateUrl: './components/people-detail/people-detail.template.html',
controller: ['CheckPeople', 'GetStateParams', '$scope',
function peopleDetailController(CheckPeople, GetStateParams, $scope) {
$scope.peopleDetails = [];
CheckPeople.getData(GetStateParams.getParams()).then(function(data){
$scope.peopleDetails = data;
});
}
]
}); 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 関連記事:
JSスクリプトを使用してロード後に対応するコールバック関数を実装する方法
vue+webpackを使用してパッケージ化されたファイルの404ページ空白の問題を解決する方法
デバッグとWebpack プロジェクト ファイルによる独立したパッケージング構成 (詳細なチュートリアル)
vue-cli+webpack プロジェクトを通じてプロジェクト名を変更する方法
vue コンポーネントでグローバル登録とローカル登録を実装する方法
以上がui-route を使用して AngularJS でマルチレイヤーのネストされたルーティングを実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AMはじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか
node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AMnode.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます
Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AMPythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。
JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AMJavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。
舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AMJavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。
PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AMPythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。
Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AMはい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7864
15164914140752130125124329