Tag: angular度ui路由器

Angular UI路由器中的$ state.transitionTo（）和$ state.go（）之间的区别

在AngularJS中，有时我们使用$state.transitionTo() ，有时我们使用$state.go() 。 谁能告诉我他们有什么不同，什么时候应该使用另一个？

`ui-router` $ stateParams与$ state.params

使用ui-router ，可以将$state或$stateParams注入到控制器中以访问URL中的参数。 但是，通过$stateParams访问参数只会暴露属于由访问它的控制器pipe理的状态的参数及其父状态，而$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; // has id, anotherParam, and […]

AngularJS UI路由器 – 更改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(); 我正在考虑用ui-routerreplacerouteProvider来嵌套路由，但不能在ui-routerfind它。 是否有可能 – 与angular-ui-router ？ 为什么我需要这个？ 我举个例子来解释一下： clicking保存后，创build新类别的路线是/category/new我显示success-alert ，我想改变路线/category/new到/caterogy/23 （23 – 是存储在db中的新项目的id）

将$ state（ui-router）注入$ http拦截器会导致循环依赖

我正在努力实现的 如果$ http请求返回401错误，我想转换到某个状态（login）。 因此我创build了一个$ http拦截器。 问题 当我试图在拦截器中插入'$ state'时，我得到一个循环依赖。 为什么以及如何修复？ 码 //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); } else { return $q.reject(response); } } return function(promise) { return promise.then(success, error); } }]; $httpProvider.responseInterceptors.push(interceptor);

否则，在StateProvider上

使用angular-ui-router，我怎样才能使用$ stateProvider的其他方法 ，或者我怎样才能使用它呢？

使用带有Bootstrap-ui模式的ui路由器

我知道这已经被覆盖了很多次，大多数的文章引用了这个代码： 在AngularJS中使用自定义URL的Modal窗口 但我只是不明白。 我根本不觉得这是非常清楚的。 我也发现这个jsfiddle这实际上是伟大的，非常有帮助，除了这不添加url，并允许我使用后退button来closures模式。 编辑：这是我需要帮助。 所以让我试着解释我想要达到的目标。 我有一个表单来添加一个新的项目，我有一个链接“添加新项目”。 我想当我点击“添加新项目”模式popup与我已经创build的“add-item.html”的forms。 这是一个新的状态，所以url更改为/ add-item。 我可以填写表格，然后select保存或closures。 closures，closures模态：p（奇怪）。 但是我也可以点击回到closures模式，并返回到前一页（状态）。 在这一点上，我不需要关于Close的帮助，因为我仍然在努力实现模态的工作。 这是我的代码，因为它代表： 导航控制器:( 这是甚至正确的地方把模式function？） angular.module('cbuiRouterApp') .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) { $scope.menu = [{ 'title': 'Home', 'link': '/' }]; $scope.open = function(){ // open modal whithout changing url $modal.open({ templateUrl: 'components/new-item/new-item.html' }); // I need to open popup via $state.go […]

有用的ui路由器unit testing（状态到url）

我有一些麻烦的unit testing我的应用程序，这是build立在Angular UI路由器的路由器。 我想testing的是状态转换是否适当地改变URL（稍后会有更复杂的testing，但这是我开始的地方）。 以下是我的应用程序代码的相关部分： angular.module('scrapbooks') .config( function($stateProvider){ $stateProvider.state('splash', { url: "/splash/", templateUrl: "/app/splash/splash.tpl.html", controller: "SplashCtrl" }) }) 和testing代码： it("should change to the splash state", function(){ inject(function($state, $rootScope){ $rootScope.$apply(function(){ $state.go("splash"); }); expect($state.current.name).to.equal("splash"); }) }) 在Stackoverflow（和官方的UI路由器testing代码）类似的问题build议包装在$应用$ state.go调用应该是足够的。 但是我做到了，国家还没有更新。 $ state.current.name保持为空。

Angular UI-Router $ urlRouterProvider .when不工作*不再*

问题：为什么我的$urlRouterProvider .when()不再工作？ 我拿起了一个相当强大的angular度的应用程序。 我一直试图解决的最近的问题是“页面刷新丢失的用户凭据”问题。 这个项目的authentication服务没有什么意义，当我把它拿起来，经过挖掘，我知道它是从一些随机的代码页面放在一起。 它也没有完全工作，所以我研究了不同的来源，并决定完全实现其中的一个（ angular度 – 客户端 – authentication ） 现在，我所实现的auth服务/控制器基本上与angular-client-side-auth中的一样 ，但是我正在使用的站点使用基于令牌的身份validation。 令牌function已经基本就位，所以我没有任何麻烦让它工作。 在这一点上，我已经让用户保持login刷新，路由与他们的身份validation一起工作（之前使用庞大的代码来禁用视图中的元素）。但是，现在$urlRouterProvider .when()被打破。 他们以前工作得很好，所以我知道我所做的一切都是错误的 – 但是我不能简单地撤消我已经实施的东西！ 所以这是我使用的$ urlRouterProvider代码。 值得一提的是，我已经包含/需要.when() ，而angular度客户端authentication似乎并没有使用它们。 我期望他们可以用这个代码来实现，但是也许有些东西会使.when()的function.when() 。 我不这么认为。 也可以澄清，我还没有使用.rule或$httpProvider.interceptors 。 我已经尝试使用这些实现的网站，但他们似乎没有什么区别。 $urlRouterProvider .when('/myState/group', ['$state', 'myService', function ($state, myService) { $state.go('app.myState.group.id', {id: myService.Params.id}); }]) .otherwise('/'); 所以基本上，如果用户或站点将用户引导到/myState/group ，他们实际上应该最终在状态app.myState.group.id url？ 他们虽然没有，我不明白为什么。 有关使用urlRouterProvider的问题没有太多的。 会发生什么？ 那么/myState/group的视图加载正常，在它的<ui-view>是一个生成的id列表。 你可以点击一个ID，调用一个设置ID的函数，然后执行$state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); […]

Angular和UI-Router，如何设置一个dynamic的templateUrl

我怎么能使用从我的数据库中获取的名称作为templateUrl文件名？ 我试过这个： $stateProvider.state('/', { url: '/', views: { page: { controller: 'HomeCtrl', templateProvider: function($templateFactory, $rootScope) { console.log("$rootScope.template") return $templateFactory.fromUrl('/templates/' + $rootScope.template); } } } }); 如果我的$ rootScope.template来自数据库查询，这似乎不工作。 不知道为什么，但它不起作用。 如果在我的控制器中，我做$ rootScope.template =“whatever.html”一切正常，但如果我从数据库中查询模板什么都没有发生。 console.log（“$ rootScope.template”）在templateProvider没有给我什么（查询本身工作得很好）。 查询是否花了太长时间，因此没有为路由器准备好，或者这里发生了什么？ 我做错了，我该如何解决？

Angularjs ui-router没有到达子控制器

我有一个configurationfunction： function config($stateProvider,$locationProvider) { $locationProvider.html5Mode(true); $stateProvider .state('projectsWs.tasks', { url: "/tasks", views: { "mainView": { templateUrl: "/app/projects/templates/index.php" }, "innerView": { templateUrl: "/app/projects/templates/tasks.php", controller: tasksCtrl, controllerAs:'tasks' } } }) .state('projectsWs.tasks.detail', { url: "/:taskId", views: { "mainView@": { templateUrl: "/app/projects/templates/index.php" }, "innerView@mainView": { templateUrl: "/app/projects/templates/tasks.php", controller: function($stateParams) { console.log('innerViewCtrl', $stateParams); } } } });} InnerView在mainView中。 当我得到像/projects-ws/tasks这样的url时， tasksCtrl函数按预期工作。 但是，当我有一个ID的url，即/projects-ws/tasks/32 […]