Question

我正在尝试在Angular JS中实现页面路由，但它不能在这里工作。

这是代码：

var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
    debugger;
    $routeProvider
        .when('/home', {
            templateUrl: 'EmployeeHome.aspx',
            controller: 'EmpCtrl'
        })
        .when('/about', {
            templateUrl: 'ContactUs.html',
            controller: 'EmpCtrl'
        })
        .when('/contact', {
            templateUrl: 'About.html',
            controller: 'EmpCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
});

    app.controller('EmpCtrl', function ($scope, $http)
    {
     $scope.message = "Welcome friends.";
    }

这是我的UI页面 EmployeeHome.aspx -

<head runat="server">
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="script.js"></script>
</head>
 <header>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
            <li><a href="#about"><i class="fa fa-shield"></i>About Us</a></li>
            <li><a href="#contact"><i class="fa fa-comment"></i>Contact Us</a></li>
        </ul>
    </header>

Answer 1

我想你在href所有人中都忘记了'/'。所以这样的事情应该有效：

<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#/about"><i class="fa fa-shield"></i>About Us</a></li>
<li><a href="#/contact"><i class="fa fa-comment"></i>Contact Us</a></li>

Answer 2

如果没有可运行的示例很难说，我不记得现在是否需要它但是我传递了'$ routeProvider'和函数如下：

angular.module('staffApp').config(['$routeProvider',
     function($routeProvider) {
       $routeProvider.
         when('/home', {
               templateUrl: 'EmployeeHome.aspx',
               controller: 'EmpCtrl'
         }).
    ...

页面路由无法在ANGULAR JS

2 个答案: