AngularJs - 路由不起作用

這是我第一次使用AngularJS路由，並且我遇到了一些麻煩。我在這裏閱讀了類似的問題，在stackoverflow上，但我找不到我的錯誤。AngularJs - 路由不起作用

我創建了一個包含自我的示例，希望能幫助您找到該錯誤。我在github上發佈了這個例子。但要完成，我還發布了下面的文件內容。

編輯：

要clarifiy是什麼問題。我沒有得到一個特定的錯誤消息，但點擊我的菜單不會改變視圖。相反，它將始終加載默認視圖。

項目結構：

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!') 
})

儀表板.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%; 
}

綠色。HTM，red.htm，main.htm中

<h1>placeholder-name</h1>

來源

2017-06-08 R_Valdez

什麼似乎是問題？您沒有指定您所看到的錯誤或您卡住的位置... –

@VladimirZdenek我編輯了我的問題以澄清問題所在。 –

按照該AngularJs模型中的所有文件應在靜態目錄。

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

此代碼將嘗試加載像

[localhost:port/manager/dashboard/orders]

這是GET請求到服務器的NodeJS路徑和你沒有定義任何路線。

如此簡單地將您想要加載的所有文件通過角度加載到「PUBLIC」目錄中，就像您將其定義爲靜態目錄一樣。

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

而且通過其不被重定向到儀表板或剛創建的所有網站中angularJs忽略車把你快速路由器定義像下面的所有GET請求。

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

來源

2017-06-08 09:55:17

AngularJs - 路由不起作用

回答

相關問題