2015-08-25 44 views
-1

我在做與角/ Express和UI路由器的一個項目來管理我的路線。UI的路由器不理解,UI的SREF不產生HREF

我做了正確的配置我的$狀態,我確實包括角和UI路由器庫到我的HTML文件,角是工作,但聯繫不與UI路由器,我仍然只能得到我的鏈接生成。

這裏是我的代碼:

我app.js文件:

'use strict'; 

angular.module('nousBegayonsTousApp', ['mainModule']); 

var mainModule = angular.module('mainModule', ['ui.router']); 

mainModule.config(function ($stateProvider, $urlRouterProvider, $locationProvider) 
    { 
     $urlRouterProvider.otherwise('/presentation'); 
     $locationProvider.html5Mode(true); 

     $stateProvider 
      .state('presentation', { 
       url: '/presentation', 
       templateUrl: '/app/views/presentation.tmpl.html', 
       controller: 'PresentationCtrl', 
       controllerAs: 'presentation' 
      }) 
      .state('biographie', { 
       url: '/biographie', 
       templateUrl: '/app/views/biographie.tmpl.html', 
       controller: 'biographieCtrl', 
       controllerAs: 'biographie' 

      }) 
      .state('contact', { 
       url: '/contact', 
       templateUrl: '/app/views/contact.tmpl.html', 
       controller: 'ContactCtrl', 
       controllerAs: 'contact' 
      }) 

    }); 

我的index.html

<!DOCTYPE html> 
 

 
<html ng-app="nousBegayonsTousApp"> 
 

 

 
    <head> 
 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
 
     <title>Nous Bégayons tous...</title> 
 
     <link rel="stylesheet" href="assets/css/style.css" type="text/css"/> 
 
     <script type="text/javascript" src="vendor/angular/angular.js"></script> 
 
     <script type="text/javascript" src="vendor/ui-router/release/angular-ui-router.min.js"></script> 
 
     <script type="text/javascript" src="app/nousbegayonstous_app.js"></script> 
 
     <script type="text/javascript" src="app/controllers/contact-controller.js"></script> 
 
     <script type="text/javascript" src="app/controllers/main-controller.js"></script> 
 
    </head> 
 

 
    <body> 
 
     <div id="wrapper"> 
 
      <div id="header"> 
 
       <div class="header_title"> 
 
        <img src="assets/images/img_title.png"/> 
 
       </div> 
 
      </div> 
 

 
      <div id="aside_container" ng-controller="MainCtrl as main"> 
 
       <ul id="nav"> 
 
        <li> 
 
         <a ui-sref="presentation">Présentation{{main.testvar}}</a> 
 
        </li> 
 
        <li> 
 
         <a ui-sref="biographie">Biographie</a> 
 

 
        </li> 
 
        <li> 
 
         <a ui-sref="contact">Contacts</a> 
 
        </li> 
 
       </ul> 
 
       <div ui-view></div> 
 
      </div> 
 

 
     </div> 
 

 

 
    </body> 
 

 

 
</html>

我server.js(爲expre SS /的NodeJS)

var express = require('express'), 
 
    logger = require('morgan'), 
 
    stylus = require('stylus'), 
 
    bodyParser = require('body-parser') 
 
    path = require('path'); 
 

 
var router = express.Router(); 
 

 
var app = express(); 
 

 
var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 
 

 
function compile (src, path) { 
 
    return stylus(src).set('filename', path); 
 
} 
 

 

 
if(env == 'development') { 
 
    // app.set('views', __dirname + '/server/views'); 
 
    //app.set('view engine', 'jade'); 
 

 
    app.use(logger('dev')); 
 
    app.use(bodyParser.json()); 
 
    app.use(bodyParser.urlencoded(
 
     { 
 
      extended: true 
 
     } 
 
    )); 
 
    app.use(stylus.middleware(
 
     { 
 
      src: __dirname + '/public', 
 
      compile: compile 
 
     } 
 
    )); 
 

 
    app.use(express.static(__dirname + '/public')); 
 
} 
 

 
// Renvoie le fichier index.html, le routing est ensuite géré par ui-router de angular cote client 
 
app.get ('*', function(req,res){ 
 
    //res.render('index'); 
 
    res.sendFile(path.join(__dirname + '/public/index.html'));//express.static(__dirname + '/public/index.html')); 
 
}); 
 

 
var port = 3000; 
 
app.listen(port); 
 

 
console.log('Listening on port ' + port + '...');
而我bower.json對客戶端的依賴關係:

{ 
 
    "name": "NousBegayonsTousMEAN", 
 
    "version": "0.0.0", 
 
    "authors": [ 
 
    "PM <[email protected]>" 
 
    ], 
 
    "license": "MIT", 
 
    "dependencies": { 
 
    "angular": "~1.4.4", 
 
    "ui-router": "~0.2.15" 
 
    } 
 
}

+0

你看到現場的HTML生成的內容的href ? – charlietfl

+1

請不要褻瀆神靈。 –

+0

沒有人產生這個問題:s,我只得到Contacts,例如,只有ui-sref存在 – Runechronos

回答

0

問題解決了:

問題從

 $locationProvider.html5Mode(true);

現在,您可以插入一個<base>標籤或通過指定禁用檢查:

 $locationProvider.html5Mode(
 
      { 
 
       enabled: true, 
 
       requireBase: false 
 
      });