与UI的路由器上的角fullstack更换NG-路由器 [英] Replacing ng-router with ui-router on the Angular-fullstack
问题描述
问题1:网址:/家,templateUrl:'index.html的
正在呈现两次
问题2:的意见:templateUrl:意见/谐音/ main.html中
都没有被渲染
我在想什么?如何正确UI路由器集成到自耕农的的角fullstack发电机?
应用/脚本/ app.js:
的.config(函数($ stateProvider,$ urlRouterProvider,$ locationProvider){
$ urlRouterProvider.otherwise('/家);
$ stateProvider
.STATE('家',{
网址:'/家,
templateUrl:'的index.html',
观点:{
'':{
templateUrl:意见/ main.html中
},
导航@家:{
templateUrl:意见/ _partials / navigation.html',
控制器:'NavigationCtrl
}, 菜单@家:{
templateUrl:意见/ _partials / menu.html',
控制器:'MenuCtrl
},
每周@家:{
templateUrl:意见/ _partials / weekly.html',
控制器:'WeeklyCtrl
},
侧面板@家:{
templateUrl:意见/ _partials /侧panel.html',
控制器:'SidePanelCtrl
},
shoppanel @家:{
templateUrl:意见/ _partials /店铺panel.html',
控制器:'ShopPanelCtrl
},
页脚@家:{
templateUrl:意见/ _partials / footer.html',
控制器:'FooterCtrl
}
}
});
$ locationProvider.html5Mode(真);
});
应用/ index.html的
< DIV CLASS =容器的UI视图>< / DIV>
应用/视图/ main.html中
<! - Z-100固定 - >
<节UI视图=导航ID =导航>< /节><! - Z-5的固定 - >
<节UI视图=周刊的id =周刊级=面板>< /节>< - Z-10相对于前:100%;余量底:33%; - >
<节UI视图=内容ID =内容>< /节>
!&下; - Z-1固定的高度:33%; - >
<节ID =页脚UI视图=页脚>< /节><! - Z-1固定 - >
<节ID =UI> <格UI视图=侧面板ID =侧面板级=面板>< / DIV>
<格UI视图=shoppanelID =铺面板级=面板>< / DIV>< /节>
/lib/routes.js
app.route('/谐音/ *)
获得(index.partials);
app.route('/ *')
获得(index.index);
的lib /控制器/ index.js
VAR路径=要求('路径');/ **
*发送部分,或404,如果不存在
* /
exports.partials =功能(REQ,RES){
变种剥离= req.url.split('。')[0];
VAR requestedView = path.join(./,剥去);
res.render(requestedView,函数(ERR,HTML){
如果(ERR){
的console.log(错误的渲染部分'+ requestedView +的'\\ n,ERR);
res.status(404);
res.send(404);
}其他{
res.send(HTML);
}
});
};/ **
*我们发送单页的应用程序
* /
exports.index =功能(REQ,RES){
res.render(索引);
};
嗯,我有点迷糊有点贵code,但尽我调整。我一直在该堆叠蒙戈/ EX preSS /角/节点用玉作为视图引擎准系统架构,并根据我在GitHub上项目的lib目录中,改变应该见过的工作。
有关问题#1,在你的/libs/routes.js,更改:
app.route('/谐音/ *')得到(index.partials);
。app.route('/ *')得到(index.index);
到
app.get('/谐音/ *',index.partials);
app.get('/ *',index.index);
有关问题#2,在您的应用程序/脚本/ app.js,更改:
的.config(函数($ stateProvider,$ urlRouterProvider,$ locationProvider){
$ urlRouterProvider.otherwise('/家);
$ stateProvider
.STATE('家',{
网址:'/家,
templateUrl:'的index.html',
观点:{
'':{
templateUrl:意见/谐音/ main.html中
}
}
});
$ locationProvider.html5Mode(真);
});
到
的.config(函数($ stateProvider,$ urlRouterProvider,$ locationProvider){
$ urlRouterProvider.otherwise('/家);
$ stateProvider
.STATE('家',{
网址:'/家, 观点:{
导航:{
templateUrl:意见/ _partials / navigation.html',
控制器:'NavigationCtrl
}, 菜单:{
templateUrl:意见/ _partials / menu.html',
控制器:'MenuCtrl
},
周刊:{
templateUrl:意见/ _partials / weekly.html',
控制器:'WeeklyCtrl
},
侧面板:{
templateUrl:意见/ _partials /侧panel.html',
控制器:'SidePanelCtrl
},
shoppanel:{
templateUrl:意见/ _partials /店铺panel.html',
控制器:'ShopPanelCtrl
},
页脚:{
templateUrl:意见/ _partials / footer.html',
控制器:'FooterCtrl
}
}
});
$ locationProvider.html5Mode(真);
});
您已经(通过http:/ /<您的主机> /#/家,index.html的默认以更可能在Web服务器上加载)被请求的index.html,因此没有理由要求它再次在app.js文件。此外,你必须定义/谐音/ *您routes.js文件的路线,所以这就是为什么/视图/谐音改为/谐音。一种毫无意义的海事组织,因为框架有前preSS静态路由设置的/ tmp和/ app目录的/views/partials/main.html应该载入就好了。
尝试访问您的谐音,并确保他们所服务的。如果你不能H型T(T)号码:/ /<您的主机> /<部分目录> /main.html并获得文件的内容后面,UI路由器将无法拉内容为好。请务必检查您的DevTools为GET错误。
我道歉时磁头任何错别字。
problem 1: url:/home, templateUrl: 'index.html
is rendering twice.
problem 2: views: templateUrl: 'views/partials/main.html
is not being rendered at all
What am I missing? How do I properly integrate ui-router into yeoman's angular-fullstack generator?
app/scripts/app.js:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
views: {
'': {
templateUrl: 'views/main.html'
},
'navigation@home': {
templateUrl: 'views/_partials/navigation.html',
controller: 'NavigationCtrl'
},
'menu@home': {
templateUrl: 'views/_partials/menu.html',
controller: 'MenuCtrl'
},
'weekly@home': {
templateUrl: 'views/_partials/weekly.html',
controller: 'WeeklyCtrl'
},
'sidepanel@home': {
templateUrl: 'views/_partials/side-panel.html',
controller: 'SidePanelCtrl'
},
'shoppanel@home': {
templateUrl: 'views/_partials/shop-panel.html',
controller: 'ShopPanelCtrl'
},
'footer@home': {
templateUrl: 'views/_partials/footer.html',
controller: 'FooterCtrl'
}
}
});
$locationProvider.html5Mode(true);
});
app/index.html
<div class="container" ui-view></div>
app/views/main.html
<!-- z-100 fixed-->
<section ui-view="navigation" id="navigation"></section>
<!-- z-5 fixed-->
<section ui-view="weekly" id="weekly" class="panel" ></section>
<!-- z-10 relative top:100%; margin-bottom: 33%;-->
<section ui-view="content" id="content" ></section>
<!-- z-1 fixed height: 33%;-->
<section id="footer" ui-view="footer" ></section>
<!-- z-1 fixed -->
<section id="ui">
<div ui-view="sidepanel" id="side-panel" class="panel"></div>
<div ui-view="shoppanel" id="shop-panel" class="panel"></div>
</section>
/lib/routes.js
app.route('/partials/*')
.get(index.partials);
app.route('/*')
.get( index.index);
lib/controllers/index.js
var path = require('path');
/**
* Send partial, or 404 if it doesn't exist
*/
exports.partials = function(req, res) {
var stripped = req.url.split('.')[0];
var requestedView = path.join('./', stripped);
res.render(requestedView, function(err, html) {
if(err) {
console.log("Error rendering partial '" + requestedView + "'\n", err);
res.status(404);
res.send(404);
} else {
res.send(html);
}
});
};
/**
* Send our single page app
*/
exports.index = function(req, res) {
res.render('index');
};
Hmm, I'm kind of confused a little by your code, but try my tweaks. I've been working on a barebones framework that stacks mongo/express/angular/node with jade as a view engine, and based on what I've seen in the lib directory of the project on github, the changes should work.
For problem #1, in your /libs/routes.js, change:
app.route('/partials/*').get(index.partials);
app.route('/*').get( index.index);
to
app.get('/partials/*', index.partials);
app.get('/*', index.index);
For problem #2, in your app/scripts/app.js, change:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
views: {
'': {
templateUrl: 'views/partials/main.html'
}
}
});
$locationProvider.html5Mode(true);
});
to
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
views: {
'navigation': {
templateUrl: 'views/_partials/navigation.html',
controller: 'NavigationCtrl'
},
'menu': {
templateUrl: 'views/_partials/menu.html',
controller: 'MenuCtrl'
},
'weekly': {
templateUrl: 'views/_partials/weekly.html',
controller: 'WeeklyCtrl'
},
'sidepanel': {
templateUrl: 'views/_partials/side-panel.html',
controller: 'SidePanelCtrl'
},
'shoppanel': {
templateUrl: 'views/_partials/shop-panel.html',
controller: 'ShopPanelCtrl'
},
'footer': {
templateUrl: 'views/_partials/footer.html',
controller: 'FooterCtrl'
}
}
});
$locationProvider.html5Mode(true);
});
You will already be requesting index.html (via h t t p : / / <your host>/#/home, index.html is loaded by the web server by default more than likely), so there's no reason to request it again in your app.js file. Also, you have define the /partials/* route in your routes.js file, so that's why /views/partials was changed to /partials. Kind of pointless IMO, your /views/partials/main.html should load just fine because the framework has express static routes setup for /tmp and /app directory.
Try to visit your partials and make sure they are serving up. if you can't type h t t p : / / <your host>/<partial directory>/main.html and get the contents of the file back, ui-router won't be able to pull the contents as well. Make sure to check your DevTools for GET errors.
I apologies a head of time for any typos.
这篇关于与UI的路由器上的角fullstack更换NG-路由器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!