如何在 MEAN Stack 应用程序中同时使用 angular 导航栏和 ng 路由？

Question

我想创建一个 MEAN Stack 应用程序，其中前端 UI 有导航栏 (nav-bar)，其中包含指向三个不同页面的三个导航链接。

单击 tabs/navigation 项后，应会打开相应的页面。这可以使用 ngRoute 完成吗？如果是，那又如何？

此外，我将在 MEAN Stack 应用程序中使用该应用程序。我尝试使用 ui-router 进行此操作；在 tomcat 上部署应用程序时它起作用了。但是只要代码部署在 MEAN Stack 上，它就不起作用。

谁能告诉我为什么会这样？

文件结构：

Project Name
|-- client
|   |-- js
|   |   `-- app.js
|   |-- templates
|   |   |-- about.html
|   |   `-- home.html
|   `-- views
|       `-- index.html
|-- server
|-- node_modules
|-- server.js
`-- package.json

index.html

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="/client/js/app.js"></script>
</head>

<!-- angular app  -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>


<div class="container">
    <div ui-view></div>
</div>

</body>
</html>

app.js

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

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: '/client/templates/home.html'
        })

        .state('about', {
            url: '/about',
            templateUrl: '/client/templates/about.html'

        });

});

server.js

var express           = require('express'),
    app               = express();
    bodyParser        = require('body-parser');

app.use(bodyParser());

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/client/views/index.html');
});

 app.use('/js', express.static(__dirname + '/client/js'));

app.listen(3000, function() {
  console.log('I\'m Listening...');
})

Answer 1

首先，您在控制台中遇到了什么错误？乍一看，我发现您的某些资源缺少 uri 中的协议。

现在您正在使用 uiRoute，它比 ngRoute 更灵活。如果您仍然希望使用 ngRoute，您需要先在您的应用程序中加载 ngRoute 模块并编辑路由：

(function(){

        var app = angular.module('module_name', ['ngRoute']);

        app.config(['$routeProvider',function($routeProvider) {
            $routeProvider
            .when('/url1', {
                controller: 'nameOfController',
                controllerAs: 'referenceToController',
                templateUrl: 'referenceToView',
                resolve: { // run all these methods before loading project
                    method1: function(){
                        return value1
                    },
                    method2: function(){
                        return value1
                    }
                }
            })
            .otherwise('/url2');
        }])

    }());

为了使用 ngRoute 实现所需的功能，您有几种选择：

1- 使用 ng-href 指令：您可以将 ng-href 指令添加到 DOM 元素（您的菜单项），如下所示：

<li><a ng-href="/#/home">Home</a></li>

2- 在控制器中使用 $location 服务：您可以向 DOM 添加一个点击事件侦听器并像这样在 $location 服务中调用 path() 方法（您需要创建您的控制器第一）：

  $("a[ui-sref='home']").on("click", function(){ $location.path("/#/home");});

3- 构建您自己的指令：如果您只需要一个简单的菜单栏，则可能不需要。但是，如果您希望超越基本行为（例如为 DOM 操作或业务逻辑目的更新应用程序中的某些数据）：

<li><a ui-sref="home" my-costume-click-directive>Home</a></li>

angular.module(app).directive('myCostumeClickDirective', function(){
    return {
        link: function(scope, elm, attr, controller, transclude) { 
              // your event listeners and methods go here
        }
    }
  });

如何在 MEAN Stack 应用程序中同时使用 angular 导航栏和 ng 路由？

How to have angular nav-bars and ng-route together in a MEAN Stack app?

angularjs

angular-ui-router

mean-stack

meanjs

ngroute