我需要能够为不同的路由指定不同的布局,最好我希望能够在路由配置中的对象中定义布局和其他参数,并让它们在路由更改时传播.
我希望在运行实际路由代码之前触发route.resolve方法.不幸的是,在下面的代码中,prime()被调用,但是它被异步调用,并且在素数完成之前调用路由代码.我认为路由的解决方法是在加载路由之前完成的？
(function () {
'use strict';
var app = angular.module('app');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
routes.forEach(function (r) {
setRoute(r.url, r.config)
});
$routeProvider.otherwise({ redirectTo: '/' });
function setRoute(url, definition) {
//set resolvers for all of the routes
//by extending any existing resolvers (or creating a new one)
definition.resolve = angular.extend(definition.resolve || {}, {
prime: prime
});
$routeProvider.when(url, definition);
return $routeProvider;
}
}
prime.$inject = ['datacontext'];
function …我想使用Angularjs从URL中删除#hash $locationProvider.html5Mode(true).
示例:显示地址栏http://localhost/shop而不是http://localhost/#/shop.
一切都运作良好,直到刷新页面.如果我刷新,则会加入以下Laravel路由(在routes.php中定义)
Route::resource('shop', 'ShoppingController')
不是AngularJS路线(在app.js中定义)
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
我的代码:
routes.php(Laravel Routes)
Route::get('/', function() {
return View::make('index');
});
Route::resource('shop', 'ShoppingController');
app.js(AngularJS路线)
var app = angular.module('shoppingApp',['ngRoute','SharedServices']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/shop', {
templateUrl: 'templates/shop.html',
controller: 'ShoppingController'
});
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
我的目录结构:
Project
/app
/...
/views
-index.php (single page application file)
-routes.php (Laravel routes)
/public
/...
/js
-angular.js
-app.js
-index.php (Laravel index file)
尝试的解决方案:
重写htaccess文件,以便将所有请求重定向到index.php(单页应用程序文件,AngularJS将从该文件中接管路由).问题:通过这种方式,Laravel路由(Route :: resource('shop','ShoppingController'); - 与数据库交互所必需的)变得无法访问AngularJS $ …
我试图controllerAs在$routeProvider路线上使用该属性,但没有任何成功.
以下是示例代码:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider) {
$routeProvider
.when('/', {
template:'<div>This should be visible:{{ ctrl.one }}</div><div>This should not:{{ one }}</div>',
controller: 'Ctrl',
controllerAs: 'ctrl',
});
}]);
app.controller('Ctrl', function($scope) {
$scope.one = 'actual';
});
不确定这是一个错误还是我做错了什么,这是一个展示问题的plnkr
假设我去了/unknown-route?a=hello&b=world并且$routeProvider不认识它并重定向到其他路线:
otherwise({
redirectTo: '/default-route'
});
是否可以将给定参数传递给重定向路由.
这将是 /default-route?a=hello&b=world
以前,我ngRoute在我的主控制器中使用.我必须创建子视图功能,它只能实现UI-Router.请指教？
我有一个ng-repeat列表进入详细信息页面(有一个后退按钮).该$scope.items变量是从首次加载页面时出现的get请求加载的,带有我的refreshItems()函数.
单击详细信息页面上的后退按钮时,将返回到正确的页面,但列表不会刷新.我需要刷新此列表,以便加载和显示新项目.
我以为我可以简单地将Back按钮连接到一个ng-click用来返回的函数,ionicHistory然后调用我的refreshItems()函数; 但是,这不会重新加载第一页上的项目.
上面的尝试确实返回到最后一页并触发该refreshItems()函数(并且加载了新数据,我可以通过console.log()语句看到它),但我猜测需要重建ng-repeat.我发现了一些信息$scope.$apply(),以及$route.reload()但是这些都解决了这一问题,当我把他们安置在我结束goBack()功能.
controller.js
$scope.refreshItems = function() {
console.log("Refreshing items!");
$http.get('http://domain/page.aspx').then(function(resp) {
$scope.items = resp.data; console.log('[Items] Success', resp.data);
}, function(err) { console.error('ERR', err); });
};
$scope.goBack = function() {
$ionicHistory.goBack();
$scope.refreshItems();
};
主页HTML
<div class="list">
<a ng-repeat="i in items" class="item" href="#/tab/details?ID={{i.Item_ID}}">
<b>Item {{i.Item_Name}}</b>
</a>
</div>
详细页面上的后退按钮 …
angularjs angularjs-ng-repeat angularjs-routing ionic-framework ionic
考虑一下代码:
var myApp = angular.module('myApp', []);
路线:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app.html',
controller:myAppController,
resolve:{
resolveData:function(Resolver){
return Resolver();
}
}
});
});
解决:
myApp.factory('Resolver', ['$http', function($http){
return function(){
return $http({url: '/someurl',method: "GET"}).then(function(data) {
// dependent call 1
$http({url: '/someotherurl',method: "GET" }).then(function(data) {
});
// dependent call 2
$http({url: '/someanotherurl',method: "GET" }).then(function(data) {
});
});
}
}]);
上面我在一个内嵌了2个调用,因为它们依赖于父调用返回的数据.
我想做什么:当所有这些都完成后返回解析器,而不仅仅是父调用.
我不能使用$ q.all(),因为其中2个调用依赖于第一个调用.
简而言之,只有在所有3个调用完成后才能加载myAppController.
我收到一个错误记录到控制台:
GET http://localhost:3000/js/lib/angular/MINERR_ASSET 404 (Not Found)
我看到了这篇文章,它说这是不包含ngRoute模块的结果,但我做到了!
公共/ JS/app.js:
window.app = angular.module('mean-blog-seed', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ngRoute', 'mean-blog-seed.controllers', 'mean-blog-seed.services']);
然后我有一个引用angular-route.js的玉文件:
script(type='text/javascript', src='js/lib/angular/angular.min.js')
script(type='text/javascript', src='js/lib/angular-route/angular-route.min.js')
script(type='text/javascript', src='js/lib/angular-cookies/angular-cookies.min.js')
script(type='text/javascript', src='js/lib/angular-resource/angular-resource.min.js')
script(type='text/javascript', src='js/lib/angular-bootstrap/ui-bootstrap-tpls.min.js')
script(src='js/app.js')
script(src='js/config.js')
script(src='js/services/global.js')
script(src='js/controllers/posts.js')
script(src='js/controllers/header.js')
script(src='js/filters.js')
script(src='js/directives.js')
回购在这里
更新: 我在github上发布了这个问题并引用了这个疯狂的答案:https://github.com/angular/angular.js/issues/4675
ng-closure-runner在编译期间运行角度特定传递,其中添加了MINERR_ASSET的定义,该资产不包含在任何1.2.x版本中(包含源映射的唯一版本).但是,源映射引用MINERR_ASSET作为源,因此在请求文件时有404.
我只是快速浏览了咕噜咕噜的任务以及ng-closure-runner,但我认为这可能是ng-closure-runner包括minErr.js或基于它生成的一些文件.无论哪种方式,正确的资产都应该与其他源文件一起打包,或者MINERR_ASSET应该从源地图"sources"中删除.