在Angular-fullstack上用ui-router替换ng-router [英] Replacing ng-router with ui-router on the Angular-fullstack
问题描述
问题1： url：/ home，templateUrl：'index.html 正在呈现两次。
问题2： views：templateUrl：'views / partials / main.html 根本没有呈现
我失踪了什么？如何将ui路由器正确集成到 yeoman 的 angular-fullstack generator ？
app / scripts / app.js ：$ / $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ .otherwise（'/ home'）; app / index.html app / views / main.html /lib/routes.js lib / controllers / index.js 嗯，我有点困惑你的代码，但尝试我的调整。我一直在使用一个准系统框架，将mongo / express / angular / node与jade作为视图引擎进行堆叠，根据我在github项目的lib目录中看到的更改应该可以工作。对于问题＃1，在/libs/routes.js中，更改： 至 对于问题＃2，在您的app / scripts / app.js中，更改： 至 您已经在请求index.html（通过http：/ /<你的主机> /＃ / home，index.html由Web服务器默认加载的可能性很大），所以没有理由再次请求你的app.js文件。此外，您已经在routes.js文件中定义了/ partials / *路由，这就是为什么/ views / partials被更改为/ partials。各种无意义的IMO，您的/views/partials/main.html应该加载很好，因为框架已经为/ tmp和/ app目录设置了明确的静态路由。 尝试访问您的部分，并确保他们正在服务。如果您不能键入ht t p：/ /< your host> /< partial directory> /main.html并获取文件的内容，则ui-router将无法拉取内容。确保检查您的DevTools的GET错误。 我对任何打字错误表示歉意。 problem 1: problem 2: What am I missing? How do I properly integrate ui-router into yeoman's angular-fullstack generator? app/scripts/app.js: app/index.html app/views/main.html /lib/routes.js lib/controllers/index.js
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: to For problem #2, in your app/scripts/app.js, change: to 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. 这篇关于在Angular-fullstack上用ui-router替换ng-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ stateProvider
.state（'home'，{
url：'/ home'，
templateUrl：'index.html'
个视图：{
''：{
templateUrl：'views / main.html'
}，
'navigation @ home'：{
templateUrl ：'views / _partials / navigation.html'，
controller：'NavigationCtrl'
}，
'menu @ home'：{
templa teUrl：'views / _partials / menu.html'，
controller：'MenuCtrl'
}，
'weekly @ home'：{
templateUrl：'views / _partials / weekly .html'，
控制器：'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）;
}）;
< div class =containerui-view>< / div>
<！ - z-100 fixed - >
< section ui-view =navigationid =navigation>< / section>
<！ - z-5 fixed - >
< section ui-view =weeklyid =weeklyclass =panel>< / section>
<！ - z-10相对顶部：100％; margin-bottom：33％; - >
< section ui-view =contentid =content>< / section>
<！ - z-1固定高度：33％; - >
< section id =footerui-view =footer>< / section>
<！ - z-1 fixed - >
< section id =ui>
< div ui-view =sidepanelid =side-panelclass =panel>< / div>
< div ui-view =shoppanelid =shop-panelclass =panel>< / div>
< / section>
app.route（'/ partials / *'）
.get（index.partials）;
app.route（'/ *'）
.get（index.index）;
var path = require（'path'）;
/ **
*发送部分或404（如果不存在）
* /
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 +'\\\
错误）;
res.status（404）;
res.send（404）;
} else {
res.send（html）;
}
}）;
};
/ **
*发送我们的单页应用
* /
exports.index = function（req，res）{
res.render '指数'）;
};
<$ c 。$ C> app.route（ '/谐音/ *'）得到（index.partials）;
app.route（'/ *'）。get（index.index）;
app.get（'/ partials / *'，index.partials）;
app.get（'/ *'，index.index）;
.config（function（$ stateProvider，$ urlRouterProvider，$ locationProvider）{
$ urlRouterProvider.otherwise（'/ home'）;
$ stateProvider
.state（'home'，{
url：'/ home'，
templateUrl：'index.html'，
views：{
$'$ {
} $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
}）;
.config（function（$ stateProvider，$ urlRouterProvider，$ locationProvider）{
$ urlRouterProvider.otherwise（'/ home'）;
$ stateProvider
.state（'home' ，{
url：'/ home'，
views：{
'navigation'：{
templateUrl：'views / _partials / navigation.html'，
控制器：'NavigationCtrl'
}，
'菜单'：{
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）;
}）;
url:/home, templateUrl: 'index.html is rendering twice.views: templateUrl: 'views/partials/main.html is not being rendered at all.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);
});
<div class="container" ui-view></div>
<!-- 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>
app.route('/partials/*')
.get(index.partials);
app.route('/*')
.get( index.index);
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');
};
app.route('/partials/*').get(index.partials);
app.route('/*').get( index.index);
app.get('/partials/*', index.partials);
app.get('/*', index.index);
.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);
});
.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);
});
