Question

我正在使用Angular / Express和UI路由器来管理我的路线。

我确实正确配置了我的$状态，我确实在我的HTML文件中包含了角度和UI路由器库，角度正在工作，但链接不是用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（对于express / 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 <toto@gmail.com>"
  ],
  "license": "MIT",
  "dependencies": {
    "angular": "~1.4.4",
    "ui-router": "~0.2.15"
  }
}

UI-Router未解释，ui-sref不生成href

0 个答案: