在 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-router 正确集成到 yeoman 的 angular-fullstack 生成器?
app/scripts/app.js:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {网址:'/家',templateUrl: 'index.html',意见:{'':{templateUrl: 'views/main.html'},'导航@home':{templateUrl: 'views/_partials/navigation.html',控制器:'NavigationCtrl'},'菜单@家':{templateUrl: 'views/_partials/menu.html',控制器:'MenuCtrl'},'每周@家':{templateUrl: 'views/_partials/weekly.html',控制器:'WeeklyCtrl'},'侧板@home':{templateUrl: 'views/_partials/side-panel.html',控制器:'SidePanelCtrl'},'shoppanel@home':{templateUrl: 'views/_partials/shop-panel.html',控制器:'ShopPanelCtrl'},'页脚@home':{templateUrl: 'views/_partials/footer.html',控制器:'FooterCtrl'}}});$locationProvider.html5Mode(true);});
app/index.html
app/views/main.html
<section ui-view="navigation" id="navigation"></section><!-- z-5 固定--><section ui-view="weekly" id="weekly" class="panel" ></section><!-- z-10 相对顶部:100%;保证金底部:33%;--><section ui-view="content" id="content" ></section><!-- z-1 固定高度:33%;--><section id="footer" ui-view="footer" ></section><!-- z-1 固定--><section id="ui"><div ui-view="sidepanel" id="side-panel" class="panel"></div><div ui-view="shoppanel" id="shop-panel" class="panel"></div></节>
/lib/routes.js
app.route('/partials/*').get(index.partials);app.route('/*').get(index.index);
lib/controllers/index.js
var path = require('path');/*** 发送部分,如果不存在则发送 404*/export.partials = function(req, res) {var stripped = req.url.split('.')[0];var requestsView = path.join('./', stripped);res.render(requestedView, function(err, html) {如果(错误){console.log("错误渲染部分 '" + requestsView + "'\n", err);res.status(404);res.send(404);} 别的 {res.send(html);}});};/*** 发送我们的单页应用程序*/export.index = 函数(请求,资源){res.render('index');};
嗯,我对你的代码有点困惑,但请尝试我的调整.我一直在研究一个准系统框架,该框架将 mongo/express/angular/node 与 jade 作为视图引擎堆叠在一起,根据我在 github 上项目的 lib 目录中看到的内容,更改应该有效.>
对于问题 #1,在您的/libs/routes.js 中,更改:
app.route('/partials/*').get(index.partials);app.route('/*').get(index.index);
到
app.get('/partials/*', index.partials);app.get('/*', index.index);
对于问题 #2,在您的 app/scripts/app.js 中,更改:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {网址:'/家',templateUrl: 'index.html',意见:{'':{templateUrl: 'views/partials/main.html'}}});$locationProvider.html5Mode(true);});
到
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {网址:'/家',意见:{'导航': {templateUrl: 'views/_partials/navigation.html',控制器:'NavigationCtrl'},'菜单': {templateUrl: 'views/_partials/menu.html',控制器:'MenuCtrl'},每周":{templateUrl: 'views/_partials/weekly.html',控制器:'WeeklyCtrl'},侧面板":{templateUrl: 'views/_partials/side-panel.html',控制器:'SidePanelCtrl'},'商店面板':{templateUrl: 'views/_partials/shop-panel.html',控制器:'ShopPanelCtrl'},页脚":{templateUrl: 'views/_partials/footer.html',控制器:'FooterCtrl'}}});$locationProvider.html5Mode(true);});
您已经在请求 index.html(通过 http://<your host>/#/home,index.html 很可能在默认情况下由 Web 服务器加载),因此没有理由请求它再次在您的 app.js 文件中.此外,您在 routes.js 文件中定义了/partials/* 路由,这就是/views/partials 更改为/partials 的原因.有点无意义的 IMO,您的/views/partials/main.html 应该可以正常加载,因为该框架已为/tmp 和/app 目录设置了快速静态路由.
尝试访问您的部分并确保它们正在服务.如果您不能输入 h t t p ://<your host>/<partial directory>/main.html 并取回文件的内容,则 ui-router 也将无法拉取内容.请务必检查您的 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.
这篇关于在 Angular-fullstack 上用 ui-router 替换 ng-router的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!