与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的
＆LT; DIV CLASS =容器的UI视图＆gt;＆LT; / DIV＆GT;
应用/视图/ main.html中
＆LT;！ - Z-100固定 - ＆GT;
＆lt;节UI视图=导航ID =导航＆GT;＆LT; /节＆gt;＆LT;！ - Z-5的固定 - ＆GT;
＆lt;节UI视图=周刊的id =周刊级=面板＆GT;＆LT; /节＆gt;＆LT; - Z-10相对于前：100％;余量底：33％; - ＆GT;
＆lt;节UI视图=内容ID =内容＆GT;＆LT; /节＆gt;
！＆下; - Z-1固定的高度：33％; - ＆GT;
＆lt;节ID =页脚UI视图=页脚＆GT;＆LT; /节＆gt;＆LT;！ - Z-1固定 - ＆GT;
＆lt;节ID =UI＆GT; ＆LT;格UI视图=侧面板ID =侧面板级=面板＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=shoppanelID =铺面板级=面板＆GT;＆LT; / DIV＆GT;＆LT; /节＆gt;
/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：/ /＆lt;您的主机＆GT; /＃/家，index.html的默认以更可能在Web服务器上加载）被请求的index.html，因此没有理由要求它再次在app.js文件。此外，你必须定义/谐音/ *您routes.js文件的路线，所以这就是为什么/视图/谐音改为/谐音。一种毫无意义的海事组织，因为框架有前preSS静态路由设置的/ tmp和/ app目录的/views/partials/main.html应该载入就好了。
尝试访问您的谐音，并确保他们所服务的。如果你不能H型T（T）号码：/ /＆lt;您的主机＆GT; /＆LT;部分目录＆GT; /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屋！
