AngularJs - 路由不起作用答案

【问题标题】：AngularJs - Routing does not workAngularJs - 路由不起作用
【发布时间】：2017-06-08 09:37:05
【问题描述】：

这是我第一次使用 AngularJs 路由，我遇到了一些麻烦。我在stackoverflow上读到了类似的问题，但我找不到我的错误。

我创建了一个自包含示例，希望能帮助您找到错误。我在github 上发布了这个例子。但为了完整起见，我还在下面发布了文件内容。

编辑：

澄清问题所在。我没有收到特定的错误消息，但单击我的菜单不会更改视图。相反，它将始终加载默认视图。

项目结构：

index.js

package.json

查看次数

经理

dashboard.hbs

green.htm

main.htm

red.htm

公开

CSS

style.css

js

DashboardController.js

index.js：

const express = require('express')
const path = require('path')
const exphbs = require('express-handlebars')
const app = express()

app.set('views', path.join(__dirname, 'views'))
app.use(express.static(path.join(__dirname, 'public')))


app.engine('.hbs', exphbs({
    defaultLayout: false,
    extname: '.hbs',
    layoutsDir: path.join(__dirname, 'views', 'shared'),
    partialsDir: path.join(__dirname, 'views', 'shared')
}))

app.set('view engine', '.hbs')


app.get('/manager/dashboard',  function (req, res) {
    res.render('manager/dashboard')
})

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

dashboard.hbs：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard
    </title>
    <!-- load bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="/js/DashboardController.js"></script>
    {{!--
    <style>
        body {
            padding-top: 50px;
        }
    </style>--}}
</head>

<body ng-app="myApp">

    <div class="page language-en" id="welcome-page">
        <header class="clearfix">

        </header>


        <div class="container-fluid" >
            <div class="row">
                <div class="col-sm-1 icon-col">

                    <div class="icon-bar">
                        <a class="active" ng-href="#"><i class="fa fa-dashboard"></i></a>
                        <a ng-href="#orders"><i class="fa fa-shopping-cart"></i></a>
                        <a ng-href="#products"><i class="fa fa-dropbox"></i></a>
                    </div>

                </div>

                <div class="col-sm-11 ng-view">
                    <p> Dashboard </p>
                </div>

            </div>
        </div>

    </div>
</body>

</html>

DashboardController.js：

"use strict"

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/manager/dashboard/", {
            templateUrl: "manager/main.htm"
        })
        .when("/manager/dashboard/orders", {
            templateUrl: "manager/green.htm"
        })
        .when("/manager/dashboard/products", {
            templateUrl: "manager/red.htm"
        }).otherwise({
            template: "<h1>None</h1><p>Nothing has been selected</p>"
        });

});

app.run([
    '$rootScope',
    function ($rootScope) {
        // see what's going on when the route tries to change
        $rootScope.$on('$routeChangeStart', function (event, next, current) {
            // next is an object that is the route that we are starting to go to
            // current is an object that is the route where we are currently
            if (current.originalPath && next.originalPath) {
                var currentPath = current.originalPath;
                var nextPath = next.originalPath;

                console.log('Starting to leave %s to go to %s', currentPath, nextPath);
            }

        });
    }
]);

app.run([
    '$rootScope',
    function ($rootScope) {
        // see what's going on when the route tries to change
        $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
            // both newUrl and oldUrl are strings
            console.log('Starting to leave %s to go to %s', oldUrl, newUrl);
        });
    }
]);

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeError', function (evt, current, previous, rejection) {
        console.log('Route error', rejection);
    });    
});

style.css：

.icon-bar {
    width: 40px; /* Set a specific width */
    background-color: #555; /* Dark-grey background */
    height:100vh;
}

.icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    text-align: center; /* Center-align text */
    padding: 10px; /* Add some padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 15px; /* Increased font-size */
}

.icon-bar a:hover {
    background-color: #000; /* Add a hover color */
}

.icon-col{
    padding-left:0px;
}

.active {
    background-color: #4CAF50; /* Add an active/current color */
}

html, body, .container-fluid, .row {
    height: 100%;
}

green.htm、red.htm、main.htm

<h1>placeholder-name</h1>

【问题讨论】：

似乎是什么问题？您没有指定您看到的错误或遇到的问题...
@VladimirZdenek 我编辑了我的问题以澄清问题所在。

标签： javascript angularjs routes

【解决方案1】：

根据 AngularJs 模型，所有文件都应该在静态目录中。

$routeProvider
    .when("/manager/dashboard/orders", {
        templateUrl: "manager/main.htm"
    });

这段代码会尝试加载路径

[localhost:port/manager/dashboard/orders]

这是对 NodeJs 服务器的 GET 请求，您还没有为此定义任何路由。

因此，只需将要通过 angular 加载的所有文件放入“PUBLIC”目录中，就像您将其定义为静态目录一样。

app.use(express.static(path.join(__dirname, 'public')))

并传递所有未在您的快速路由器中定义的 GET 请求如下所示，通过将流量重定向到仪表板或仅在 angularJs 中创建您的所有网站忽略车把。

app.get('*', (req, res) => {
   res.render('manager/dashboard');
})

【讨论】：