Question

我希望创建一个MEAN Stack应用程序，其中前端UI具有导航栏（导航栏），其中包含指向三个不同页面的三个导航链接。

单击选项卡/导航项时，相应的页面应该打开。可以使用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模块并编辑路由：

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

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

(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');
        }])

    }());

2-在控制器中使用$ location服务：你可以向DOM添加一个click事件监听器，并像这样调用$ location服务中的path（）方法（你需要先创建你的控制器）：

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

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

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

如何在MEAN Stack应用程序中将角度导航栏和ng-route一起使用？

1 个答案: