我一直在撞墙,试图找出为什么angularJS路由不能在我的phonegap中工作.我已正确设置所有文件,我没有收到任何错误.我正在尝试直接从angular使用$ location.url服务更改网址.因此,当您点击div时,控制器将具有$ location.url("profile"),例如,什么都不会发生.我尝试了这个stackoverflow中找到的解决方案,但这对我不起作用.我做错了什么,或者有更好的方法来接近这个？以下是我设置的路由
var app = angular.module("App", ["hmTouchevents"])
.config(function($routeProvider) {
$routeProvider
.when("/index.html", {
templateUrl: "/views/login.html",
controller: "loginCtlr"
})
.when("/landing", {
templateUrl: "/views/landing.html",
controller: "landingCtlr"
})
.when("/single-view/:id", {
templateUrl: "/views/single-view.html",
controller: "singleViewCtlr"
})
.when("/restaurant", {
templateUrl: "/views/restaurant-info.html",
controller: "restaurantCtlr"
})
.when("/profile/:id", {
templateUrl: "/views/profile.html",
controller: "profileCtlr"
})
.when("/lists/:list", {
templateUrl: "/views/lists.html",
controller: "listsCtlr"
})
.when("/follow/:type", {
templateUrl: "/views/follow.html",
controller: "followCtlr"
});
});
样本控制器将是:
app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){
$scope.goTo("profile");
}]);
一如往常,任何帮助都非常感谢.
我正在登录页面,成功后,它重定向到主页.默认情况下,我显示登录页面此代码:
app.run(function($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function() {
$location.url("/login");
});
});
然后在验证后端的用户/传递详细信息后,我将用户带到主页:
$scope.login = function() {
if ($scope.username === 'admin' && $scope.password === 'pass') {
console.log('successful')
$rootScope.$on('$routeChangeSuccess', function() {
$location.url("/home")
});
$location.url("/blah");
} else {
$scope.loginError = "Invalid username/password combination";
console.log('Login failed..')
};
};
如果我在语句$location.url的else部分之前删除第二个,重定向似乎不起作用if.然而/blah,它没有使用那个url(),它去了home.但是如果blah删除了url ,则重定向逻辑不起作用.
我似乎无法理解为什么我必须使用两个$location.url().如果有人能帮助我理解这个重定向系统是如何工作的,我会觉得有用吗？
这可能不是最好的做法,我愿意接受如何改进的建议,这里是Plunker的例子
我正在开发一个带有AngularJS的Web应用程序用于前端,我正在尝试设置路由并显示视图,到目前为止,即使是ng-include和其他东西也适合我,但不是ng-view我正在开发Visual Studio当我运行应用程序时,它使用的是本地服务器(localhost)
这是我的目录结构
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
这是mi index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" …html javascript angularjs angular-routing angularjs-directive
我有一个可以有许多可选查询参数的路由:
$stateProvider.state("directory.search", {
url: '/directory/search?name&email',
templateUrl: 'view.html',
controller: 'controller'
当用户填写表单以搜索目录时,函数会$scope更改导致控制器重新加载的状态:
$scope.searchDirectory = function () {
$state.go('directory.search', {
name: $scope.Model.Query.name,
email: $scope.Model.Query.email
}, { reload: true });
};
在controller我有一个条件:if($state.params){return data}指示我的服务是否将被查询.
除非用户点击浏览器的前进和/或后退按钮,否则此功能非常有效.在这两种情况下,状态(路由)都会正确更改查询参数,但不会重新加载controller.
根据我的阅读,只有在实际路线发生变化时才会重新加载控制器.反正有没有让这个例子只使用查询参数工作,还是我必须使用不断变化的路线？
我在应用程序中有2个警卫,AuthGuard和AccessGuard.AuthGuard按名称建议保护所有页面,并将会话对象存储在GlobalService中,AccessGuard依赖于AuthGuard在GlobalService中存储的会话对象中的一些访问数据.
当AuthGuard返回Observable然后同时执行AccessGuard以检查尚未到达的会话对象并且代码中断时,会出现问题.有没有其他方法可以限制AccessGuard的执行,直到会话对象到达或任何其他工作来打破这种竞争条件？
#Note我没有将AccessGuard逻辑合并到AuthGuard,因为只有部分路由需要检查才能访问,而所有其他需要身份验证.例如,"用户管理"和"仪表板"之外的所有人都可以访问"帐户"页面和"数据库"页面,这些参数需要来自会话对象的外部访问参数
export const routes: Routes = [
{
path: 'login',
loadChildren: 'app/login/login.module#LoginModule',
},
{
path: 'logout',
loadChildren: 'app/logout/logout.module#LogoutModule',
},
{
path: 'forget',
loadChildren: 'app/forget/forget.module#ForgetModule',
},{
path: 'reset',
loadChildren: 'app/reset/reset.module#ResetModule',
},
path: 'pages',
component: Pages,
children: [
{ path: '', redirectTo: 'db', pathMatch: 'full' },
{ path: 'db', loadChildren: 'app/pages/db/db.module#DbModule' },
{ path: 'bi', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule', canActivate:[AccessableGuard] },
{ path: 'account', loadChildren: 'app/pages/account/account.module#AccountModule' },
{ path: 'um', loadChildren: 'app/pages/um/um.module#UserManagementModule', canActivate:[AccessableGuard] },
],
canActivate: [AuthGuard]
}
];
export …使用此代码：
this.router.navigateByUrl('/login');
我收到以下警告：从navigationbyurl返回的promise被忽略。我想在何时何地兑现承诺？
PS我正在AuthGuard的中使用它canActivate。
Angular 5是否可以加载在编译时未知但在运行时动态的模块/组件？
我想这可能无法使用webpack但可能使用system.js？
编辑:
整个想法是构建一个基于插件的应用程序,其中单个插件被放入插件文件夹中,angular将自动选择它,而无需重新编译和部署整个角度应用程序.插件是独立的功能.当然有路线导航等.意味着一旦角度理解有一个新的插件,它应该添加一些动态导航,以便用户将能够导航到插件等.
我正在尝试在Angular 7中建立一个简单的canDeactivate保护，并且我尝试了许多在线教程中的代码，但是它们都产生相同的错误：
“类型'CanDeactivate'不是通用的。”
我究竟做错了什么？除了出现相同问题的另一个2年未解答的问题，我什至在任何Google匹配中都找不到此错误。
在这里查看代码：
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CanDeactivate } from '@angular/router/src/utils/preactivation';
export interface CanDeactivateComponent {
canDeactivate: () => Observable<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {
canDeactivate(component) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
I have some specific requirement in that have to work with Existing URL. Existing URL's are already well indexed and used for promotions and many campaigns so no chance to modify it.
Existing URLs is like - www.xyz.com/search//65.5445/-122.56454/Listing-name/All
While In Angular defining URL like
const routes: Routes = [
{ path: '', component: SearchpagesComponent ,
children: [
{
path: 'search/:schkey/:lat/:lng/:name/:filter', loadChildren: './search/search.module#SearchModule',
// here schkey is optinal just required blank slashes
}
]
}
];
and in Router link
<a …我有一个显示 API 查询结果的组件。我想添加一个下拉框，以便可以过滤列表，但当 url 查询参数更改时，我似乎无法重新加载页面。
<div>
<H2>Products</H2>
<form>
Filter By Manufacturer
<select (change)="onManufacturerChange($event.target.value)">
<option value="">All</option>
<option [value]="m" *ngFor="let m of manufacturers">{{m}}</option>
</select>
</form>
<ul>
<li *ngFor="let p of products"><B>{{p.manufacturer}}</B> - {{p.name}}</li>
</ul>
</div>
和打字稿
export class ProductListComponent implements OnInit {
public products: Array<object> = [];
public manufacturers: any = [];
public manufacturer: string = "";
public search: string = "";
constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
console.log(params);
if('manufacturer' in params){ …angular-routing ×10
angular ×6
angularjs ×4
angular5 ×2
angular-ui ×1
cordova ×1
html ×1
javascript ×1
promise ×1
redirect ×1
systemjs ×1
webpack ×1