คำถามติดแท็ก angular-ui-router

UI-Router พัฒนาแนวคิดของ AngularJS Route ให้เป็นแนวคิดทั่วไปของ State สำหรับจัดการสถานะ UI ของแอปพลิเคชันที่ซับซ้อน โดยเฉพาะอย่างยิ่งอนุญาตให้มีลำดับชั้นของสถานะ / มุมมองที่ซ้อนกันและมุมมองที่มีชื่อหลายมุมมอง

15
ความแตกต่างระหว่างแองกูลาร์ - รูทและแองกูลาร์ - UI-router คืออะไร?
ฉันวางแผนที่จะใช้AngularJSในแอปพลิเคชันขนาดใหญ่ของฉัน ดังนั้นฉันจึงอยู่ในขั้นตอนหาโมดูลที่เหมาะสมที่จะใช้ ความแตกต่างระหว่างโมดูล ngRoute (angular-route.js)และui-router (angular-ui-router.js)คืออะไร? ในหลายบทความเมื่อngRouteจะใช้เส้นทางที่ถูกกำหนดค่าด้วย$ routeProvider แต่เมื่อนำมาใช้กับUI เตอร์เส้นทางการกำหนดค่ากับ$ stateProvider และ $ ฉันควรใช้โมดูลใดเพื่อความสามารถในการจัดการและการขยายที่ดีขึ้น

10
การรับรองความถูกต้องเข้าสู่ระบบ AngularJS ui-router
ฉันใหม่กับ AngularJS และฉันสับสนเล็กน้อยเกี่ยวกับวิธีใช้ angular- "ui-router" ในสถานการณ์ต่อไปนี้: ฉันกำลังสร้างโปรแกรมประยุกต์บนเว็บซึ่งประกอบด้วยสองส่วน ส่วนแรกคือหน้าแรกที่มีมุมมองเข้าสู่ระบบและการลงชื่อสมัครใช้และส่วนที่สองคือแผงควบคุม (หลังจากลงชื่อเข้าใช้สำเร็จ) ฉันสร้างส่วนindex.htmlสำหรับโฮมด้วยแอพเชิงมุมและตั้งค่าui-routerเพื่อจัดการ/loginและ/signupดูและมีไฟล์อีกส่วนdashboard.htmlสำหรับแผงควบคุมพร้อมแอพและกำหนดค่าui-routerเพื่อจัดการมุมมองย่อยมากมาย ตอนนี้ฉันเสร็จส่วนแดชบอร์ดและไม่ทราบวิธีรวมสองส่วนเข้ากับแอพเชิงมุมที่ต่างกัน ฉันจะบอกแอพโฮมให้เปลี่ยนเส้นทางไปยังแอปแดชบอร์ดได้อย่างไร

3
วิธีการส่งพารามิเตอร์โดยใช้ ui-sref ใน ui-router ไปยังตัวควบคุม
ฉันต้องผ่านและรับพารามิเตอร์สองตัวในสถานะที่ฉันต้องการใช้เพื่อขนส่งui-srefของใช้ui-router สิ่งที่ต้องการใช้ลิงก์ด้านล่างเพื่อเปลี่ยนสถานะเป็นhomeด้วยfooและbarพารามิเตอร์: <a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a> การรับfooและbarค่าในคอนโทรลเลอร์: app.controller('SomeController', function($scope, $stateParam) { //.. var foo = $stateParam.foo; //getting fooVal var bar = $stateParam.bar; //getting barVal //.. }); ฉันจะได้รับundefinedสำหรับ$stateParamในการควบคุม มีใครช่วยให้ฉันเข้าใจว่าทำอย่างไรให้สำเร็จ แก้ไข: .state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: …

18
วิธีโหลดสถานะปัจจุบันใหม่ได้อย่างไร
ฉันใช้ Angular UI Router และต้องการโหลดสถานะปัจจุบันอีกครั้งและรีเฟรชข้อมูลทั้งหมด / เรียกใช้งานคอนโทรลเลอร์อีกครั้งสำหรับสถานะปัจจุบันและเป็นพาเรนต์ ฉันมี 3 ระดับรัฐ: directory.organisations.details directory.organisationsมีตารางพร้อมรายการองค์กร คลิกที่รายการในตารางโหลดdirectory.organisations.detailsกับ $ StateParams ผ่าน ID ของรายการ ดังนั้นในสถานะรายละเอียดฉันโหลดรายละเอียดสำหรับรายการนี้แก้ไขจากนั้นบันทึกข้อมูล ทั้งหมดก็ดี ตอนนี้ฉันต้องโหลดสถานะนี้ใหม่และรีเฟรชข้อมูลทั้งหมด ฉันเหนื่อย: $state.transitionTo('directory.organisations'); ซึ่งไปสู่สถานะผู้ปกครอง แต่ไม่โหลดตัวควบคุมอีกครั้งฉันเดาว่าเนื่องจากเส้นทางไม่เปลี่ยนแปลง เป็นการดีที่ฉันแค่อยากอยู่ในdirectory.organisations.detailsและรีเฟรชข้อมูลทั้งหมดในพาเรนต์ด้วย ฉันได้ลองด้วย: $state.reload() ฉันเห็นสิ่งนี้ใน API WIKI สำหรับ $ state.reload "(ข้อผิดพลาดกับตัวควบคุมคืนค่าตอนนี้กำลังแก้ไขในไม่ช้า)" ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม?


14
Angular - ui-router รับสถานะก่อนหน้า
มีวิธีรับสถานะก่อนหน้าของสถานะปัจจุบันหรือไม่ ตัวอย่างเช่นฉันต้องการทราบว่าสถานะก่อนหน้านี้คืออะไรก่อนสถานะปัจจุบัน B (โดยที่สถานะก่อนหน้านี้จะเป็นสถานะ A) ฉันไม่สามารถหามันได้ในหน้า ui-router github doc

2
เราเตอร์ AngularJS ui ส่งผ่านข้อมูลระหว่างรัฐที่ไม่มี URL
ฉันกำลังประสบปัญหานี้ในการส่งผ่านข้อมูลระหว่างสองสถานะโดยไม่เปิดเผยข้อมูลใน URL มันเหมือนว่าผู้ใช้ไม่สามารถลงจอดบนสถานะนี้ ตัวอย่างเช่น. ฉันมีสองสถานะคือ "A" และ "B" ฉันกำลังเรียกเซิร์ฟเวอร์ในสถานะ "A" และผ่านการตอบสนองของการเรียกไปยังสถานะ "B" การตอบสนองของการเรียกเซิร์ฟเวอร์เป็นข้อความสตริงซึ่งค่อนข้างยาวดังนั้นฉันไม่สามารถเปิดเผยสิ่งนั้นใน URL ได้ ดังนั้นมีวิธีใดในเราเตอร์ ui เชิงมุมเพื่อส่งผ่านข้อมูลระหว่างอเมริกาโดยไม่ใช้ url params?

9
AngularJS UI Router - เปลี่ยน url โดยไม่ต้องโหลดซ้ำ
ขณะนี้โครงการของเราใช้ค่าเริ่มต้น$routeProviderและฉันใช้ "แฮ็ก" นี้เพื่อเปลี่ยนurlโดยไม่ต้องโหลดหน้าซ้ำ: services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) { $location.skipReload = function () { var lastRoute = $route.current; var un = $rootScope.$on('$locationChangeSuccess', function () { $route.current = lastRoute; un(); }); return $location; }; return $location; }]); และใน controller $locationEx.skipReload().path("/category/" + $scope.model.id).replace(); ผมคิดว่าการเปลี่ยนrouteProviderกับui-routerเส้นทางทำรัง ui-routerแต่ลาดเทพบนี้ เป็นไปได้ - ทำเช่นเดียวกันกับangular-ui-router? ทำไมฉันถึงต้องการสิ่งนี้? ให้ฉันอธิบายด้วยตัวอย่าง: …

14
จะส่งและดึงข้อมูลพารามิเตอร์โดยใช้ $ state.go toParams และ $ stateParams ได้อย่างไร
ฉันใช้ AngularJS v1.2.0-rc.2 กับ ui-router v0.2.0 ฉันต้องการที่จะผ่านรัฐอ้างอิงไปยังรัฐอื่นดังนั้นผมจึงใช้toParamsของ$state.goชอบโดย: $state.go('toState', {referer: $state.current.name}); ตามที่เอกสารนี้ควรเติม$stateParamsในtoStateการควบคุม undefinedแต่มันเป็น ฉันขาดอะไรไป? ฉันได้สร้างกองพลเพื่อสาธิต: http://plnkr.co/edit/ywEcG1

3
การใส่ $ state (ui-router) ลงใน $ http interceptor ทำให้เกิดการพึ่งพาแบบวงกลม
สิ่งที่ฉันพยายามบรรลุ ฉันต้องการเปลี่ยนเป็นสถานะบางสถานะ (เข้าสู่ระบบ) ในกรณีที่คำขอ $ http ส่งกลับข้อผิดพลาด 401 ฉันจึงสร้างตัวดักจับ $ http ปัญหา เมื่อฉันพยายามแทรก '$ state' ลงใน interceptor ฉันจะได้รับการพึ่งพาแบบวงกลม ทำไมและฉันจะแก้ไขได้อย่างไร? รหัส //Inside Config function var interceptor = ['$location', '$q', '$state', function($location, $q, $state) { function success(response) { return response; } function error(response) { if(response.status === 401) { $state.transitionTo('public.login'); return $q.reject(response); } …

6
จะส่งวัตถุเข้าสู่สถานะโดยใช้เราเตอร์ UI ได้อย่างไร
ฉันต้องการเปลี่ยนสถานะและส่งผ่านวัตถุโดยพลการโดยใช้ ui-router ฉันทราบว่าโดยปกติ$stateParamsจะใช้ แต่ฉันเชื่อว่าค่านี้ถูกแทรกลงใน URL และฉันไม่ต้องการให้ผู้ใช้สามารถบุ๊กมาร์กข้อมูลนี้ได้ ฉันต้องการทำสิ่งนี้ $state.transitionTo('newState', {myObj: {foo: 'bar'}}); function myCtrl($stateParams) { console.log($stateParams.myObj); // -> {foo: 'bar'} }; มีวิธีดำเนินการโดยไม่เข้ารหัสค่าลงใน URL หรือไม่

8
วิธีการใช้งาน RouteReuseStrategy shouldDetach สำหรับเส้นทางเฉพาะใน Angular 2
ฉันมีโมดูล Angular 2 ที่ฉันใช้งานการกำหนดเส้นทางและต้องการให้รัฐเก็บไว้เมื่อนำทาง ผู้ใช้ควรจะสามารถ: ค้นหาเอกสารโดยใช้ 'สูตรการค้นหา' ไปที่ผลลัพธ์อย่างใดอย่างหนึ่ง กลับไปที่ 'searchresult' - โดยไม่ต้องสื่อสารกับเซิร์ฟเวอร์ RouteReuseStrategyนี้เป็นไปได้รวมถึง คำถามคือ ฉันจะนำเอกสารนั้นไปใช้งานได้อย่างไร? ดังนั้นเส้นทางเส้นทาง "สถานะของเอกสาร" ควรถูกจัดเก็บและไม่ควรจัดเก็บสถานะเส้นทาง "เอกสาร /: id"?

7
`ui-router` $ stateParams กับ $ state.params
ด้วยui-routerสามารถฉีดอย่างใดอย่างหนึ่ง$stateหรือ$stateParamsลงในคอนโทรลเลอร์เพื่อเข้าถึงพารามิเตอร์ใน URL อย่างไรก็ตามการเข้าถึงพารามิเตอร์ผ่าน$stateParamsจะเปิดเผยเฉพาะพารามิเตอร์ที่เป็นของสถานะที่จัดการโดยคอนโทรลเลอร์ที่เข้าถึงและสถานะหลักในขณะที่$state.paramsมีพารามิเตอร์ทั้งหมดรวมถึงพารามิเตอร์ในสถานะย่อยด้วย ด้วยรหัสต่อไปนี้หากเราโหลด URL โดยตรงhttp://path/1/paramA/paramBนี่คือวิธีที่จะดำเนินการเมื่อตัวควบคุมโหลด: $stateProvider.state('a', { url: 'path/:id/:anotherParam/', controller: 'ACtrl', }); $stateProvider.state('a.b', { url: '/:yetAnotherParam', controller: 'ABCtrl', }); module.controller('ACtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id and anotherParam } module.controller('ABCtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; …

7
การใส่ขอบเขต $ ลงในฟังก์ชันบริการเชิงมุม ()
ฉันมีบริการ: angular.module('cfd') .service('StudentService', [ '$http', function ($http) { // get some data via the $http var path = 'data/people/students.json'; var students = $http.get(path).then(function (resp) { return resp.data; }); //save method create a new student if not already exists //else update the existing object this.save = function (student) { if (student.id …

2
ความแตกต่างระหว่าง $ state.transitionTo () และ $ state.go () ใน Angular ui-router
ใน AngularJS ผมเห็นบางครั้งที่เราใช้และบางครั้งที่เราใช้$state.transitionTo() $state.go()ใครช่วยบอกหน่อยได้ไหมว่ามันแตกต่างกันอย่างไรและควรใช้เมื่อใด

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.