假设您正在使用路线:
// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
...
在您的html中,您希望在单击按钮时导航到about页面.一种方法是
<a href="#/about">
...但似乎ng-click在这里也很有用.
<div ng-click="/about">
routes angularjs angularjs-routing angularjs-ng-click angularjs-ng-route
我期待在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: '/' });
}]);
现在,当我访问该页面时,这是我在网址中得到的内容:
当我点击Add quote按钮时,我得到了这个:
这可能是什么问题？感谢帮助
angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6
目前,当我从路线刷新页面时
它停留在同一条路线上.但我希望路由重定向到
我看到有人问过如何实现刷新以保持同一条路线.所以我猜,默认角度应该在浏览器刷新时重定向到主页.知道为什么我的角度默认项目会这样做吗？
下面是我的AppRoutingModule
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SmileyFeedbackComponent } from '../smiley-feedback/smiley-feedback.component';
import { FeedbackFormComponent } from '../feedback-form/feedback-form.component';
import { ThankYouComponent } from '../thank-you/thank-you.component';
const routes: Routes = [
{ path: '', redirectTo: '/smiley', pathMatch: 'full' },
{ path: 'smiley', component: SmileyFeedbackComponent },
{ path: 'feedback', component: FeedbackFormComponent },
{ path: 'thank-you', component: ThankYouComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: …我想要有两个不同的模板.一个是登出用户的登录页面,用于描述用户登录的业务和其他仪表板页面.
我在其他堆栈上阅读了如何使用UI路由器执行此操作.我想知道使用ngRoute做类似这样的事情的最佳做法？
下面设置的方式是"/ frontdesk"是仪表板,"/"是已注销用户的登录页面.但!我希望用户是在仪表板上还是注销并发送到登录页面的URL相同!我不想要"/ frontdesk",我希望"/"用于IndexController和FrontdeskController.
这是我的路由JS.
(function () {
'use strict';
angular
.module('resonanceinn.routes')
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/', { // This is the landing Page
controller: 'IndexController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/index.html'
})
.when('/frontdesk', { //This is logged in user that I want to become '/' as well
controller: 'FrontdeskController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
})
.when('/register', {
controller: 'RegisterController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/authentication/register.html'
})
.when('/login', {
controller: 'LoginController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/authentication/login.html '
}) …最近我注意到ngRoute在AngularJS应用程序中使用模块时,路由包含#!在URL中,之前就是#.
例如,www.webiste.com/#/login成为www.website.com/#!/login
我必须启用html5Mode并禁用requireBase使用代码整体删除基础,
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
并且URL更改www.website.com/login工作正常,但具有误导性,而不是Angular SPA URL的样子.
如果我没有启用html5Mode,则URL被编码,我无法解决它.所以www.website.com/#/login变成www.website.com/#!/#%2Flogin(注意后者/被编码为%2F).
这是开发人员针对某些特定目的实施的更改吗？它有什么不同？我需要对应用程序进行哪些更改才能使其正常运行？难道我做错了什么？
javascript angularjs single-page-application ngroute angularjs-ng-route
我发现了几个类似的问题,但没有一个答案有帮助.他们似乎都涉及某种类型的$location依赖,我无法正确注入.
我的代码如下:
(function() {
// App dependencies
var app = angular.module('portalExchange',
['ngRoute',
'app-products',
'app-manage',
'app-profile']);
// [ Main Controller ] : PortalController
app.controller('PortalController', function($scope) {
if ($('.top_link_dashboard').hasClass('unactive_top')) {
$('.top_link_dashboard').removeClass('unactive_top');
$('.top_link_dashboard').addClass('active_top');
}
});
// Controller for Dashboard
app.controller('DashboardController', function() {
});
// Controller for Developers
app.controller('DevelopersController', function($scope) {
// Page.setTitle('Developers');
});
// Controller for Quote
app.controller('QuoteController', function($scope) {
// Page.setTitle('Begin Quote');
});
// Directive for Header
app.directive('appHeader', function () {
// Type of Directive, E for element, …我正在尝试使用Node.js将AngularJS的Hello World构建推送到Heroku中.但有多个视图(部分).
我首先在不使用ngRoute的情况下部署了Hello World,这意味着:没有部分.那很好,很顺利.然后,我尝试推送2个简单的部分.但我认为问题是托管应用程序,同时要求部分.我知道这不是正确的方法,我想要你的建议.
这是我的index.html:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta name="name" content="something">
<title></title>
</head>
<body>
<section ng-view=""></section>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
angular.module('main', ['ngRoute'])
.config(['$routeProvider', '$http', function ($routeProvider, $http){
console.log('hola');
$routeProvider
.when('/', {
resolve: **??? I tried with templateUrl but did not work either**
,controller: 'indexCtrl'
})
.when('/second', {
resolve: **???**
,controller: 'secondCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.controller('indexCtrl', ['$scope', function ($scope){
$scope.helloWorld = "Hello World";
}])
.controller('secondCtrl', ['$scope', function ($scope){
$scope.helloWorld …我有(虽然是次要的)问题$routeProvider.
http:// localhost/thisapp /工作正常,并重定向到.otherwise()完美.但似乎一旦应用程序加载并登陆"home"url(http:// localhost/thisapp /#/)
然后就打破了.
如果我导航到http:// localhost/thisapp,则$location解析为http:// localhost/thisapp /#/
如果我刷新(因为你知道用户会这样做),那么代码就会中断
我尝试过使用$locationProvider但是更令人困惑.似乎我读的越多,我就越困惑,因为记录的内容似乎不起作用.(如果我取消注释下面的$locationProvider行,则不会生成任何内容).我已经查看了StackOverflow上的各种教程和问题,但是看起来并没有起到应有的作用.
这是我的配置代码:
myApp.config(function($routeProvider, $locationProvider) {
// commented cuz it's not working
// $locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'app2/components/templates/overview.html',
controller: 'overviewController'
})
.when('/all_overview', {
templateUrl: 'app2/components/templates/overview.html',
controller: 'overviewController'
})
.when('/all_procurement', {
templateUrl: 'app2/components/templates/procurement.html',
controller: 'procurementController'
})
.when('/all_social', {
templateUrl: 'app2/components/templates/social.html',
controller: 'socialController'
})
.when('/all_strengthening', {
templateUrl: 'app2/components/templates/strengthening.html',
controller: 'strengtheningController'
})
.when('/all_sales', {
templateUrl: …我不想从我的控制器/工厂/需要/温度打开以下网址？open = temperature,其中参数open = temperature是要求页面打开相关弹出窗口,代码如下:
$scope.openPageUrl = function (url) {
closePopover();
console.log("Open page url "+url);
$location.path(url);
};
<a ng-click="openPageUrl('/plant/needs/temperatures?open=temperatures')">Click to open</a>
不幸的是,我有这个网址#/工厂/需求/温度%3Fopen =温度要求,由%3F取代问号,防止页面打开.
有什么想法解决这个问题？
我刚开始使用 angular js，我尝试了路由并且工作得很好。问题是当我刷新页面时它显示 404 错误，因为它正在检查我的实际目录而不是检查路由。
这是完整的代码
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<base href="/" />
<a href="blue">blue</a>
<a href="green">green</a> //blue.html and green.html are in same directory as index.html
<p>Click on the links to load blue or green.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/blue/:name?", {
templateUrl: "blue.html",
controller: "blue_control"
})
.when("/green", {
templateUrl: "green.html",
controller: "green_control"
})
$locationProvider.html5Mode({
enabled: true
});
});
app.controller("blue_control", function($scope) {
$scope.msg = "this is blue";
}); …javascript http-status-code-404 angularjs ngroute angularjs-ng-route
angularjs ×9
javascript ×4
ngroute ×3
angular ×1
express ×1
heroku ×1
html ×1
node.js ×1
routes ×1
typescript ×1