การเขียนโปรแกรม angular-routing

22

วิธีการเปลี่ยนส่วนหัวแบบไดนามิกตามมุมมองบางส่วนของ AngularJS ได้อย่างไร

ฉันใช้มุมมอง ng เพื่อรวมมุมมองบางส่วนของ AngularJS และฉันต้องการอัปเดตชื่อหน้าและแท็กส่วนหัว 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> …

411 javascript angularjs templates partial-views angular-routing

24

การโหลดหน้าซ้ำให้คำขอ GET ไม่ถูกต้องด้วยโหมด AngularJS HTML5

ฉันต้องการเปิดใช้งานโหมด 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

วิธีรับพารามิเตอร์ข้อความค้นหาจาก URL ใน Angular 5

ฉันใช้เชิงมุม 5.0.3 ฉันต้องการเริ่มต้นแอปพลิเคชันของฉันด้วยพารามิเตอร์การสืบค้นจำนวน/app?param1=hallo&param2=123มากเช่น ทุกเคล็ดลับที่ให้ไว้ในHow to รับพารามิเตอร์ params จาก url ใน Angular 2 ไม่ได้ผลสำหรับฉัน แนวคิดใดที่จะทำให้พารามิเตอร์เคียวรีทำงาน private getQueryParameter(key: string): string { const parameters = new URLSearchParams(window.location.search); return parameters.get(key); } ฟังก์ชั่นส่วนตัวนี้ช่วยให้ฉันรับพารามิเตอร์ของฉัน แต่ฉันไม่คิดว่ามันเป็นวิธีที่เหมาะสมในสภาพแวดล้อมเชิงมุมใหม่ [อัพเดต:] แอพหลักของฉันดูเหมือน @Component({...}) export class AppComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { // would like to get …

181 angular typescript angular-routing

4

$ location / การสลับระหว่าง html5 และ hashbang mode / link rewriting

ฉันรู้สึกว่า Angular จะเขียน URL ที่ปรากฏในแอตทริบิวต์ href ของ anchor tags ภายใน tempaltes เพื่อให้ทำงานได้ไม่ว่าจะอยู่ในโหมด html5 หรือโหมด hashbang เอกสารสำหรับการให้บริการสถานที่ดูเหมือนว่าจะบอกว่า HTML การเชื่อมโยงการเขียนใหม่จะดูแลสถานการณ์ hashbang ฉันคาดหวังว่าเมื่อไม่ได้อยู่ในโหมด HTML5 จะมีการแทรกแฮชและในโหมด HTML5 พวกเขาจะไม่ อย่างไรก็ตามดูเหมือนว่าไม่มีการเขียนใหม่เกิดขึ้น ตัวอย่างต่อไปนี้ไม่อนุญาตให้ฉันเพียงแค่เปลี่ยนโหมด ลิงก์ทั้งหมดในแอปพลิเคชันจะต้องเขียนใหม่ด้วยมือ (หรือได้มาจากตัวแปรตอนรันไทม์ฉันต้องเขียน URL ทั้งหมดด้วยตนเองขึ้นอยู่กับโหมดหรือไม่? ฉันไม่เห็นการเขียน url ฝั่งไคลเอ็นต์ที่เกิดขึ้นใน Angular 1.0.6, 1.1.4 หรือ 1.1.3 ดูเหมือนว่าค่า href ทั้งหมดจะต้องได้รับการเติมด้วย # / สำหรับโหมด hashbang และ / สำหรับโหมด html5 จำเป็นต้องกำหนดค่าบางอย่างเพื่อทำให้เกิดการเขียนใหม่หรือไม่? …

179 angularjs angular-routing

5

angularjs 1.6.0 (ล่าสุดตอนนี้) เส้นทางไม่ทำงาน

ฉันคาดว่าจะเห็นคำถามนี้ใน Stackoverflow แต่ไม่เห็น เห็นได้ชัดว่าฉันเป็นคนเดียวที่มีปัญหานี้ซึ่งดูเหมือนว่าฉันจะเป็นเรื่องธรรมดามาก ฉันมีโปรเจ็กต์พื้นฐานที่กำลังทำอยู่ แต่ดูเหมือนว่าเส้นทางต่างๆจะใช้ไม่ได้แม้ว่าทุกอย่างที่ฉันทำจนถึงตอนนี้ดูเหมือนจะถูกต้องก็ตาม ฉันมี html ชิ้นนี้ในindex.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: …

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

12

ฉันจะนำทางไปยังเส้นทางหลักจากเส้นทางลูกได้อย่างไร

ปัญหาของฉันค่อนข้างคลาสสิก ฉันมีส่วนส่วนตัวของแอปพลิเคชันซึ่งอยู่เบื้องหลังไฟล์login form. เมื่อการเข้าสู่ระบบสำเร็จระบบจะไปยังเส้นทางลูกสำหรับแอปพลิเคชันผู้ดูแลระบบ ปัญหาของฉันคือฉันไม่สามารถใช้งานได้global navigation menuเนื่องจากเราเตอร์พยายามกำหนดเส้นทางในฉันAdminComponentแทนที่จะเป็นAppCompomentไฟล์. ดังนั้นการนำทางของฉันเสีย ปัญหาอีกประการหนึ่งคือหากมีผู้ต้องการเข้าถึง URL โดยตรงฉันต้องการเปลี่ยนเส้นทางไปยังเส้นทาง "เข้าสู่ระบบ" หลัก แต่ฉันไม่สามารถทำให้มันทำงานได้ สำหรับฉันแล้วดูเหมือนว่าสองประเด็นนี้จะคล้ายกัน มีความคิดว่าจะทำได้อย่างไร?

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