在 Angular-fullstack 上用 ui-router 替换 ng-router [英] Replacing ng-router with ui-router on the Angular-fullstack

查看：27
本文介绍了在 Angular-fullstack 上用 ui-router 替换 ng-router的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆