我正在构建我的第一个Angular.js应用程序,我正在使用Yeoman.
Yeoman使用Grunt允许您使用命令'grunt server'运行node.js connect服务器.
我正在以html5模式运行我的角度应用程序.根据angular docs,这需要修改服务器以将所有请求重定向到应用程序的根目录(index.html),因为角度应用程序是单页面ajax应用程序.
"使用[html5]模式需要在服务器端重写URL,基本上你必须重写你的应用程序入口点的所有链接(例如index.html)"
我试图解决的问题在这个问题中有详细说明.
如何修改我的grunt服务器以将所有页面请求重定向到index.html页面？
使用AngularJS应用程序提供正确404的最佳方法是什么？
一点背景:我正在构建一个Angular应用程序,并选择使用
$locationProvider.html5Mode(true);
因为我希望网址显得自然(并且与多页"传统"网络应用无法区分).
在服务器端(一个简单的Python Flask应用程序),我有一个全能的处理程序,可以将所有内容重定向到角度应用程序:
@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def index(path):
return make_response(open('Ang/templates/index.html').read())
现在,我正在试图弄清楚如何处理404错误.我见过的大多数Angular应用程序都执行以下操作:
.otherwise({ redirectTo: '/' })
这意味着他们无法提供适当的404.
但是,我更愿意返回一个正确的404,带有404状态代码(主要用于搜索引擎优化目的).
使用Angular处理404s的最佳方法是什么？我不应该担心它并坚持一个全能的？或者我应该删除catch-all并在服务器端提供正确的404？
编辑清楚
javascript flask http-status-code-404 angularjs angularjs-routing
加载Angular应用程序后,我需要一些离线可用的模板.
这样的事情是理想的:
$routeProvider
.when('/p1', {
controller: controller1,
templateUrl: 'Template1.html',
preload: true
})
在Angular 1.2中,ngRoute是一个单独的模块,因此您可以使用其他社区路由器ui.router.
我正在编写一个开源模块,旨在为多种不同的路由器实现工作.那么如何检查哪个路由器已加载或存在？
我正在我的模块中的工厂内执行以下操作,但它不能按照我期望的方式工作:
if (angular.module("ngRoute"))
// Do ngRoute-specific stuff.
else if (angular.module("ui.router"))
// Do ui.router-specific stuff.
对于未加载的模块,它会引发错误.例如,如果应用程序正在使用ui.router,则会为ngRoute检查引发以下错误:
未捕获错误:[$ injector:nomod]模块'ngRoute'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保将依赖项指定为第二个参数.
正如我们在http://docs.angularjs.org/tutorial/step_07中看到的,
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
建议使用e2e测试进行路由测试,
it('should redirect index.html to index.html#/phones', function() {
browser().navigateTo('../../app/index.html');
expect(browser().location().url()).toBe('/phones');
});
但是,我认为'$ routeProvider'配置是使用单个函数,函数($ routeProvider)完成的,我们应该能够在不涉及浏览器的情况下进行单元测试,因为我认为路由功能不需要浏览器DOM.
例如,
当url是/ foo时,templateUrl必须是/partials/foo.html,
当url是/ bar时,controller是FooCtrl ,templateUrl必须是/partials/bar.html,控制器是BarCtrl
它是一个简单的IMO函数,它也应该在一个简单的测试,单元测试中进行测试.
我用谷歌搜索并搜索了这个$ routeProvider单元测试,但还没有运气.
我想我可以从这里借一些代码,但还不能实现,https://github.com/angular/angular.js/blob/master/test/ng/routeSpec.js.
我正在使用AngularJS路由,我正在尝试查看如何使用查询字符串(例如, url.com?key=value).Angular不理解包含同名键值对的路由albums:
angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
['$routeProvider', function($routeProvider) {
$routeProvider.
when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
otherwise({redirectTo: '/home'});
}],
['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode = true;
}]
);
我正在开发一个AngularJS应用程序,该应用程序具有捕获所有路径(例如.when('/:slug', {...)),这是支持应用程序的先前(非角度)版本的遗留URL格式所必需的.响应catch的控制器都尝试拉动相关对象,如果没有找到,则使用该$location.path方法重定向到404页面.这有助于将用户带到404页面,但是当用户在浏览器中回击时,它会将他们带回到首先强制他们进入404页面的页面,并且他们最终无法逃脱循环.
我的问题是,是否存在1)处理这种情况的更好模式,或者2)是否有办法重新路由不会在浏览器中强制执行历史推送状态的用户？
故事形式:
我在这里寻找的是一个主要细节设置.主人是列表形式,当我点击链接(相对于特定的行/记录(或本例中的帐户))时,我想在主视图中查看详细信息(字面意思是"主要"视图:) <div class="container" ui-view="main"></div>.
我想这样做并维护我的URL结构(/accounts对于Account列表; /accounts/:id对于详细版本)但我希望详细视图使用列表正在使用的视图.
我现在有什么
的index.html
...
<div class="container" ui-view="main"></div>
...
accounts.js
$stateProvider
.state ('accounts', {
url: '/accounts',
views: {
'main': {
controller: 'AccountsCtrl',
templateUrl: 'accounts/accounts.tpl.html'
}
},
data: { pageTitle: 'Account' }
})
.state ('accounts.detail', {
url: '/:id',
views: {
'main': {
controller: 'AccountDetailCtrl',
templateUrl: 'accounts/detail.tpl.html'
}
},
data: { pageTitle: 'Account Detail' }
});
此时,/accounts路线按预期工作.它accounts/accounts.tpl.html在main视图中正确显示.因为html转发器中的每一行都将它链接到适当的/accounts/:idURL,我使用嵌套状态处理它accounts.detail.
对于比我更了解这一点的大多数人来说,如果模板中存在该命名视图 …
我正在使用Agnularjs和Ionic Framework.我试图实现嵌套状态,如下所示,
我的路线文件看起来像,
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.home.home1', {
url: "/home1",
views: {
'menuContent' :{
templateUrl: "home1.html"
}
}
})
.state('eventmenu.home.home2', {
url: "/home2",
views: {
'menuContent' :{
templateUrl: "home2.html"
}
}
})
.state('eventmenu.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('eventmenu.attendees', { …我正在使用UI路由器作为主菜单的选项卡以及其中一个状态(用户)内的链接.用户状态具有用户列表,当单击用户时,我想仅重新加载子状态,但它正在重新加载子状态和父状态(用户).
这是我的代码:
app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
abstract: true,
template: '<div ui-view=""></div>',
controller: 'HomeController as homeCtrl'
})
.state('users', {
parent: 'home',
url: '/users',
templateUrl: '/User/Index',
controller: 'UserController as userCtrl',
})
.state('users.createUser', {
templateUrl: '/User/CreateUser',
controller: 'CreateUserController as cuCtrl'
})
.state('users.editUser', {
templateUrl: '/User/EditUser',
controller: 'EditUserController as euCtrl',
resolve: {
userInfo: function (contextInfo, userData) {
return userData.get(contextInfo.getUserKey());
}
}
})
.state('users.addWebItemsForUser', {
templateUrl: '/User/AddWebItemsForUser',
controller: 'UserWebItemsController as uwiCtrl'
})
.state('users.addReportsForUser', {
templateUrl: '/User/AddReportsForUser',
controller: 'UserReportsController as …angularjs ×10
flask ×1
gruntjs ×1
jasmine ×1
javascript ×1
node.js ×1
offline ×1
unit-testing ×1
yeoman ×1