【Angular路由ui-router配置详解】教程文章相关的互联网学习教程文章

javascript – 使用AngularJS模板和ui-router时,为不同的页面设置不同的正文背景【代码】

我有两页,我正在使用ui.router来跳转不同的页面.一个是登录页面,登录后,页面将跳转到主页.我想为登录页面设置一个正文背景颜色,但为另一个设置另一个正文背景颜色.如果我只是为模板div设置颜色,颜色将不会应用于正文背景,但如果将颜色直接设置为背景,则两个页面具有相同的颜色.我能做什么? HTML:<body><div ui-view="header"></div><div ui-view="content"></div><!-- build:js scripts/main.js --> </body>JS:angular.module('...

javascript – Angular UI-Router:$state.current有时是未定义的【代码】

我在我的角度应用程序中使用ui.router,在我的导航栏控制器(包含在多个模板中)中,我编写了一个简单的console.log($state.current)来测试它的行为. 我注意到,有时,在重新加载时,状态是未定义的:Object {name: "", url: "^", views: null, abstract: true}有时它被定义:Object {url: "/admin", templateUrl: "app/components/admin-dashboard/admin-dashboard.html", controller: "AdminCtrl", controllerAs: "vm", name: "admin-da...

javascript – 使用ui-router的AngularJS init变量【代码】

当我想在第一次启动控制器时初始化变量时,我在我的视图中执行此操作<div ng-controller="testCtrl" ng-init="<%some var from server %>"> <div>但是,我现在正在使用这样的ui-router:.state('index', {url: "/",templateUrl: "/register-form.html",controller: "testCtrl"})因为我不再渲染< div ng-controller = etc,所以我仍然初始化并传递我的<%some var from server%>从模板? register-form.html不再具有控制器标签,因为ui...

javascript – AngularJs与ui.router如何为其子项设置身份验证【代码】

我使用AngularJS和ui-router,这是我当前的app.js配置.'use strict';angular.module('nodeserverApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.bootstrap', 'ui.router' ]) .config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {$stateProvider.state('home', {url: '/',templateUrl: 'partials/user/main',controller: 'MainCtrl'}).state('dashboar...

javascript – Angular2:[routerLinkActive] =“[‘active’]”不在_router.navigate上更新【代码】

我有一个带有几个routerLinks的应用程序,我用[routerLinkActive] =“[‘active’]”设置它们.当我通过单击其中一个routerLinks导航时,一切正常.当我使用导航时: this._router.navigate([thisUrl],{queryParams:queryParams}); routerLinkActive停止工作.有谁知道如何解决这个问题? 我正在使用angular2 2.4.1解决方法:尝试this._router.navigate( [ thisUrl ], {queryParams: queryParams, relativeTo: this.route } );其中this....

javascript – Angular UI-Router仅在选择路由时加载控制器【代码】

假设我有两个页面,云和设置.我有以下代码设置:var routerApp = angular.module('APP', ['ui.router']);routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$locationProvider.html5Mode(true);$urlRouterProvider.otherwise('/cloud');$stateProvider.state('cloud', {url: '/cloud',templateUrl: 'pages/templates/cloud.html',controller: 'cloud',}).state('settings', {url: '/settings',te...

javascript – Angular 2 Routes – 是否可以使用ngFor从路由创建动态routerLinks?【代码】

我想在具有已定义路径的特定模块中获取所有路由,并使用ngFor循环遍历它们并在我的组件html中创建动态链接列表. ngFor示例(overview.component.html):<li *ngFor="let item of items; let i = index;"><a routerLink="/{route.path}">{route.path}</a> </li>模块示例(base.module.ts):...const routerConfig = [{path: '',component: BaseComponent,children: [{path: '',component: OverviewComponent},{path: 'group-one',compo...

javascript – AngularJS – 使用UI-Router进行动态路由【代码】

所以我在我的awhome angularjs驱动的单页面应用程序中拥有我的全功能静态路由器,现在我得到了使某些路由动态化的任务. 直到现在我说我有以下参数路径: > ^ / user /:userName> ^ / product /:productName> ^ / category /:categoryName 现在他们都需要响应路径^ /:slug,它会调用一些后端API来获取与该slug相对应的资源类型,最后将请求转发给具有特定解析的特定控制器templateUrl ,摘要和数据. 有什么想法吗? (编辑:我想相同...

javascript – 有条件地使用angular ui-router导航到状态【代码】

目前,我们有一个测试版的“投资组合”工具.一旦用户登录到主应用程序,如果他们已获得访问测试版的权限,他们可以直接导航到Portfolio工具,无需任何其他登录.如果没有,他们应该被重定向到一个投资组合登录页面(状态称为portfolio.login),他们可以在那里登录或联系支持/销售等.现在我在解决方案块中检查,但$state.go(‘投资组合.login’)似乎获取正确的部分,但不会在屏幕上呈现它们或导航到适当的URL. 码:angular.module('portfolio....

javascript – Angular ui-router将哈希添加到url【代码】

我正在为角度和角度ui路由器的应用程序设置脚手架.我有它的工作,但似乎是在我的网址中添加一个哈希(我在localhost上运行dev)localhost:9000 /#/ test.当我登陆主页面时,它只是localhost:9000,它仍然提供主视图内容.如果可能的话我想摆脱哈希. 所以这是我的设置: 在我的身体中的index.html中,我只有导航,然后是ui-view:<div class="row"><ul class="nav navbar-nav"><li><a ui-sref="index">Home</a></li><li><a ui-sref="test"...

javascript – Angular Material的md-nav-bar与ui-router无法正常工作【代码】

我正在玩角形材料和ui-router.这是pen. HTML:<md-nav-bar md-selected-nav-item="'browse'" nav-bar-aria-label="navigation links"><md-nav-item md-nav-sref="projects.browse" name="browse">Browse</md-nav-item><md-nav-item md-nav-sref="projects.settings" name="settings">Settings</md-nav-item> </md-nav-bar>问题是,尽管md-selected-nav-item =“’browse’”允许应用程序默认激活浏览选项卡,但它没有显示ui-router状...

javascript – router.navigate with query params Angular 5【代码】

我遇到了使用查询参数路由到路由的问题我有这样的功能goToLink(link) {this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]); }和这个功能sortParams(link) {let queryParams = url.split('?')[1];let params = queryParams.split('&');let pair = null;let data = {};params.forEach((d) => {pair = d.split('=');data[`${pair[0]}`] = pair[1];});return data; }好吧基本上发生了什么我有一...

javascript – AngularJS UI-Router – 无法获得嵌套状态来显示模板【代码】

我不知道我做错了什么,但这就是我想要的. 首先,这是我的身体:<body><div ng-app="testApp" ng-controller="MainController" class="container-fluid"><div ui-view class="row"></div></div></body>现在,在ui-view中,我想要一些内容,具体取决于URL.首先,将有包含其他州的家乡.- Home- Recent Studies- Studies- Map- Study为此,我正在尝试创建路由层次结构.这将是我的主页模板(home.html),一个抽象的模板,将在上面的ui视图中:<di...

javascript – 如何使用angular ui-router在状态之间传递数据?【代码】

我原本不打算用ui-router做这个项目(2天前就知道了),所以我对此很新. 我对这个问题的看法是: >用于图像列表的模板,使用ng-repeat显示,并从控制器中调用的服务获取img-src.该服务从json文件获取源. >图像编辑器的模板.此控制器应获取在图像列表中单击的图像的图像源. 如何将图像源从一个状态(图像列表)传递到另一个状态(图像编辑器)? 当我假设我不会使用ui-router及其状态时,我正在使用服务来做到这一点.我如何处理州?解决方法...