プログラミング angular-routing

22

AngularJS部分ビューに基づいてヘッダーを動的に変更するにはどうすればよいですか？

AngularJSの部分ビューを含めるためにng-viewを使用しており、含まれているビューに基づいてページタイトルとh1ヘッダータグを更新したいと思います。ただし、これらは部分的なビューコントローラーの範囲外であるため、コントローラーのデータセットにバインドする方法を理解できません。 ASP.NET MVCの場合、@ ViewBagを使用してこれを行うことができますが、AngularJSで同等のものを知りません。共有サービス、イベントなどについて検索しましたが、まだ機能していません。それが機能するように私の例を変更する方法は大歓迎です。私のHTML： <html data-ng-app="myModule"> <head>  <title></title> </head> <body> <h1></h1> <div data-ng-view></div> </body> </html> 私のJavaScript： var myModule = angular.module('myModule', []); myModule.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}). when('/test2', {templateUrl: …

411 javascript angularjs templates partial-views angular-routing

24

ページをリロードすると、AngularJS HTML5モードで誤ったGETリクエストが発生する

アプリでHTML5モードを有効にしたい。ここに示すように、私は構成のために次のコードを入れました： return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix = '!'; $routeProvider.when('/', { templateUrl: '/views/index.html', controller: 'indexCtrl' }); $routeProvider.when('/about',{ templateUrl: '/views/about.html', controller: 'AboutCtrl' }); ご覧のとおり、私はを使用し、$locationProvider.html5modeですべてのリンクを変更してng-hrefを除外しました/#/。問題現時点でlocalhost:9000/は、インデックスページに移動して確認し、などの他のページに移動できますlocalhost:9000/about。しかし、localhost:9000/aboutページを更新すると問題が発生します。次の出力が表示されます。Cannot GET /about ネットワーク呼び出しを見ると： Request URL:localhost:9000/about Request Method:GET 一方、最初に移動しlocalhost:9000/、次に移動するボタンをクリックすると、次のようになります/about。 Request URL:http://localhost:9000/views/about.html これはページを完全にレンダリングします。更新時に角度を有効にして正しいページを取得するにはどうすればよいですか？

193 angularjs html angular-routing

19

Angular 5でURLからクエリパラメータを取得するにはどうすればよいですか？

Angular 5.0.3を使用していますが、のような一連のクエリパラメータでアプリケーションを起動したいと思います/app?param1=hallo&param2=123。Angular 2でURLからクエリパラメータを取得する方法で与えられたすべてのヒント？私にはうまくいきません。クエリパラメータを機能させる方法はありますか？ private getQueryParameter(key: string): string { const parameters = new URLSearchParams(window.location.search); return parameters.get(key); } このプライベート関数はパラメーターを取得するのに役立ちますが、新しいAngular環境では適切な方法ではないと思います。 [更新：]私のメインアプリは次のようになります @Component({...}) export class AppComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { // would like to get query parameters here... // this.route... } }

180 angular typescript angular-routing

4

$ location / html5とハッシュバングモードの切り替え/リンクの書き換え

Angularがtempaltes内のアンカータグのhref属性に表示されるURLを書き換えて、html5モードでもハッシュバングモードでも機能するように見えました。位置情報サービスのドキュメントには、 HTMLリンクの書き換えによってハッシュバングの状況が処理されると記載されているようです。したがって、HTML5モードでない場合はハッシュが挿入され、HTML5モードの場合は挿入されないことを期待します。ただし、書き換えは行われていないようです。次の例では、モードを変更することはできません。アプリケーションのすべてのリンクは手動で書き換える必要があります（または実行時に変数から派生させる必要があります。モードに応じてすべてのURLを手動で書き換える必要がありますか？ Angular 1.0.6、1.1.4、1.1.3でクライアント側のURLの書き換えが行われていないようです。すべてのhref値の先頭に、ハッシュバングモードの場合は＃/、html5モードの場合は/を付ける必要があるようです。書き換えを発生させるために必要な設定はありますか？ドキュメントを読み違えていますか？他にばかげたことをしていますか？ここに小さな例があります： <head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script> </head> <body> <div ng-view></div> <script> angular.module('sample', []) .config( ['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { //commenting out this line (switching to hashbang mode) breaks the app //-- unless # is added to the templates $locationProvider.html5Mode(true); $routeProvider.when('/', { template: 'this is home. …

179 angularjs angular-routing

5

angularjs 1.6.0（最新）ルートが機能しない

Stackoverflowでこの質問が表示されることを期待していましたが、表示されませんでした。どうやら私はこの問題を抱えているのは私だけで、非常に一般的だと思われます。私が取り組んでいる基本的なプロジェクトがありますが、これまでに行ったすべてが正しいように見えても、ルートが機能していないようです。私のindex.htmlファイルにこのhtmlの一部が含まれています。 <html> <head ng-app="myApp"> <title>New project</title> <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script> <script src="app.js"></script> </head> <body> <a href="#/add-quote">Add Quote</a> <div ng-view ></div> </body> </html> そしてこれが私のapp.jsです： var app = angular.module('myApp', ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/add-quote', { templateUrl: 'views/add_quote.html', controller: 'QuoteCtrl' }) .otherwise({ redirectTo: '/' }); }]); ページにアクセスしただけの場合、URLには次のようになります。 http：// localhost：8000 …

98 angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6

12

子ルートから親ルートに移動するにはどうすればよいですか？

私の問題は非常に古典的です。の背後にあるアプリケーションのプライベート部分がありますlogin form。ログインが成功すると、管理アプリケーションの子ルートに移動します。私の問題はglobal navigation menu、ルーターが私のAdminComponent代わりに私のでルーティングしようとするため、を使用できないことAppCompomentです。だから私のナビゲーションは壊れています。もう1つの問題は、誰かがURLに直接アクセスしたい場合、親の「ログイン」ルートにリダイレクトしたいということです。しかし、私はそれを機能させることはできません。これらの2つの問題は似ているように私には思えます。それをどのように行うことができるか考えていますか？

94 angular angular-routing angular-router

5

角度4ユニットテストエラー `TypeError：ctorはコンストラクターではありません`

ルートリゾルバーをテストしようとしていますが、テスト中にTypeError: ctor is not a constructor、typescriptのコンパイル時にエラーが発生しない理由がわかりません。 TypeError: ctor is not a constructor TypeError: ctor is not a constructor at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42355:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42362:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:43401:16) at TestBed.webpackJsonp../node_modules/@angular/core/@angular/core/testing.es5.js.TestBed.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:48412:47) at http://localhost:9877/_karma_webpack_/vendor.bundle.js:48418:61 at Array.map (native)

90 angular karma-runner angular-routing

タグ付けされた質問 「angular-routing」

タグ付けされた質問「angular-routing」