DotJem AngularJS路由：错误：无法找到下'$根''页面名“ [英] DotJem AngularJS routing: Error: Could not locate 'pagename' under '$root'
问题描述
每当我启动它工作正常的网站，但所有环节都坏了。他们的工作，我可以点击他们，并引导我正确的URL，但没有相对于该特定页面的内容显示出来。但是，如果我复制和粘贴URL到一个不同的浏览器窗口，ITD重定向我回家，如果该URL剪掉存在...
继承人我的应用程序的JS文件：
VAR应用= angular.module（对myApp，['dotjem.routing']）;的app.config（函数（$ routeProvider，$ stateProvider）{
$ routeProvider.otherwise（{redirectTo：'/家'}）; $ stateProvider.state（'家'，{路线：'/家，意见：{主：{模板：模板/ guide.html}}}）;
$ stateProvider.state（['$寄存器，$ HTTP'，函数（REG，$ HTTP）{
返回$ http.get（API / getpages.php）。成功（功能（数据）{
对于（数据元素）{
章（数据[元] .pagename，{路径：数据[元]。路径，观点：{主：{模板：数据[元] .templateUrl}}}）;
}
}）;
}]）;
}）;
即时得到这个错误，当我尝试并刷新了我点击奥纳链接previously一个页面后点击页面，那么所有的菜单栏上的链接去死：
错误：无法找到下'$根''mybuilds。
在错误（）
在a.lookup（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23732）
在a.resolve（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23975）
在Object.J.url（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:18670）
在f（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29260）
在我（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29537）
在链接（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29694）
在nodeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:6230:13）
在compositeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5640:15）
在compositeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5643:13）＆LT;一个SREF ='{{link.path}}'级=NG结合＆GT;是我的链接是如何工作的。
一个JSON样本是否有帮助：
<$p$p><$c$c>[{\"id\":1,\"displayName\":\"Tour\",\"pagename\":\"home\",\"templateUrl\":\"templates\\/tourview.html\",\"path\":\"\\/home\"}]
我也试图把手动的链接，但仍然没有喜悦。
＆LT; DIV JEM-视图=主＆GT;＆LT; / DIV＆GT;是我的看法。主页完美的作品。
解决方案的事情之一，我可以很容易地发现，这似乎不正确是你的SREF的使用，因为你点对路由，而不是国家，SREF是为了使其更易于管理的状态和他们的网址，您可以直接链接到他们，而不是重复在多个地方的路线。
因此，而不是你做了什么，你应该说
＆LT;一个SREF =link.pagename＆GT;（这是一个常规的约束，我们用'左右它，当我们做静态链接，就像NG-包括）假设你有一个服务或一些地方您存储这些链接，他们只是你从服务器得到JSON对象。的例子： http://plnkr.co/edit/M9Ey6VnJn7wHLqNdHmwh?p= preVIEW
要看看使用
SREF，我们可以看看它是如何的样本中完成的：app.service（'菜单'，函数（）{
VAR自我=这一点;
self.register =功能（标题，状态）{
self.items.push（{
标题：标题，状态：状态
}）;
}
self.items = [];
}）;就像我说的，你可能有某种形式的菜单服务，样品中我叫这个菜单，这是不是最好的名字，但它提供它在演示的目的。这是我们注册的链接。
请注意，我们实际上可以访问整个内部的国家的树，但是，这是不是一个官方的API。 （它暴露测试）。因此，不是，我们只是外管理。这将有可能对项目进行分类，以及等，因为我们可能不希望每一个状态图顶栏上。
的app.config（['$ stateProvider'，
功能（SP）{ sp.state（'家'，{
路线：'/'，
观点：{
主：{
模板：模板/ guide.html
}
}
}）; sp.state（['$寄存器，$ HTTP'，'菜单'，
功能（注册，HTTP，菜单）{
//这只是一种解决办法，家是一个静止的状态，但我们不能访问
//在提供菜单服务，所以我们只是在这里注册。还有2正确的
// aproaches在我脑海中这个问题：
// - 用户可以沿着静态登记使用的菜单提供商。
// - 只写在HTML静态引用。
//
//我在这里所做的只是为这个样本容易。
menu.register（'家'，'家'）; 返回http.get（routes.json）。成功（功能（数据）{
angular.forEach（数据，功能（州）{
//注册了链路状态的菜单服务。
//所有我们在这里需要的是it't称号和国家名称。
menu.register（state.displayName，state.pagename）; //注册的实际状态。我会$ P $这里pfered不同的名字
//但是那preference。
注册（state.pagename，{
路线：state.path，
观点：{主：{模板：state.templateUrl}}
}）;
}）;
}）;
}
]）;
}
]）;不会细说了的意见呢。
更app.controller（'siteController'，['$范围，$状态'，'菜单'，
功能（$范围，$状态菜单）{
//有些难看bindup只是让我们可以证明后期绑定的注册工作。
this.menu =菜单;
this.state = $状态;
}
]）;我喜欢在我的角度应用的全球站点控制器，在这个例子中，我们只是用它来直接暴露菜单服务和国家服务，这不是一个推荐的方法，但其演示一个快速的方法。
＆LT;机身NG控制器=siteController为网站＆GT;
...
＆LT; UL类=NAV导航栏，导航＆GT;
＆LT;李NG重复=，在site.menu.items页
NG-CLASS ={活跃：site.state.isActive（page.state）}＆GT;
＆下;一个SREF =page.state＆GT; {{page.title}}＆下; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;最后我们如何建立菜单的例子。
Whenever I start the site it works fine, but all the links are broken. They work, I can click on them and it directs me to the right URL but no content relative to that specific page shows up. But if I were to copy and paste that URL into a different browser window, itd redirect me back home as if that URL didnt exist... Heres my apps JS file:
var app = angular.module("myApp", ['dotjem.routing']); app.config(function($routeProvider, $stateProvider){ $routeProvider.otherwise({redirectTo: '/home'}); $stateProvider.state('home', {route: '/home', views:{"main":{template:"template/guide.html"}}}); $stateProvider.state(['$register', '$http', function(reg, $http){ return $http.get("api/getpages.php").success(function(data){ for(element in data){ reg(data[element].pagename, {route: data[element].path, view:{"main":{template:data[element].templateUrl}}}); } }); }]); });Im getting this error when I try and click on pages after refreshing on a page that I clicked ona link to previously, then all the links on the menu bar go dead:
Error: Could not locate 'mybuilds' under '$root'. at Error () at a.lookup (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23732) at a.resolve (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23975) at Object.J.url (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:18670) at f (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29260) at i (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29537) at link (http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29694) at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:6230:13) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5640:15) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5643:13)
<a sref="'{{link.path}}'" class="ng-binding">Is how my link works.
A JSON sample if it helps:
[{"id":1,"displayName":"Tour","pagename":"home","templateUrl":"templates\/tourview.html","path":"\/home"}]I have also tried putting in the links manually but still no joy.
<div jem-view="main"></div>Is my view. The home page works perfectly.
解决方案One of the things i can easily spot that seems incorrect is your use of sref, as you point it towards the route rather than the state, sref is meant to make it easier to manage states and their URLS in that you can link directly to them rather than having to duplicate the route in multiple places.
So rather than what you did, you should just say
<a sref="link.pagename">(it's a regular binding, we use '' around it when we make static links, just like ng-include) assuming you have a service or something where you store those links and they are just the json object you got from the server.Working example: http://plnkr.co/edit/M9Ey6VnJn7wHLqNdHmwh?p=preview
To look at the use of
sref, we can have a look at how it's done in that sample:app.service('menu', function() { var self = this; self.register = function(title, state) { self.items.push({ title: title, state: state }); } self.items = []; });As I said, you probably have some sort of menu service, in the sample I called this menu, that isn't the best name, but it serves it's purpose in the demo. This is where we register links.
Note that we CAN actually access the whole internal "state" tree, BUT that is not an official API. (it's exposed for testing). So instead, we simply manage it outside. This will make it possible to categorize items as well etc. as we might not want every single state to figure on the top bar.
app.config(['$stateProvider', function(sp) { sp.state('home', { route: '/', views: { "main": { template: "template/guide.html" } } }); sp.state(['$register', '$http', 'menu', function(register, http, menu) { // This is just a workaround, home is a static state, but we can't access the // menu service in the provider so we just register it here. There is 2 "correct" // aproaches to this problem in my mind: // - User a menu provider which can be used along static state registration. // - Just write static references in the HTML. // // What I did here was just easier for this sample. menu.register('HOME', 'home'); return http.get("routes.json").success(function(data) { angular.forEach(data, function(state){ // Register the "state link" with the menu service. // All we need here is it't title and the state name. menu.register(state.displayName, state.pagename); // Register the actual state. I would have prefered different names here // but thats preference. register(state.pagename, { route: state.path, views: { main: { template: state.templateUrl } } }); }); }); } ]); } ]);Won't elaborate much more on this that the comments does.
app.controller('siteController', ['$scope', '$state', 'menu', function($scope, $state, menu) { //Some ugly bindup just so we can demonstrate that the latebound registration works. this.menu = menu; this.state = $state; } ]);I like to have a global site controller in my angular apps, in this example we just use it to expose the menu service and state service directly, that is not a recommended approach, but its a quick approach for a demo.
<body ng-controller="siteController as site"> ... <ul class="nav navbar-nav"> <li ng-repeat="page in site.menu.items" ng-class="{ active: site.state.isActive(page.state) }"> <a sref="page.state">{{ page.title }}</a> </li> </ul>And finally an example of how we build the menu.
这篇关于DotJem AngularJS路由：错误：无法找到下'$根''页面名“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
