Question

我在youtube上找到了一个基本示例，演示了通过角度的路线。当我从此屏幕http://www.youtube.com/watch?v=zogrnQjHZAM加载文件集时，它不起作用。

我可以看到index.html，但部分不会渲染。我认为这是因为我没有通过服务器提供这些文件。如果是这种情况，角度有何不同？我认为静态文件可以在没有它们的情况下被看到。

index.html -

<!doctype html>
<html ng-app="website">
<head>
    <title>AngularJS Website</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/website.css">
</head>
<body>
<!-- top -->
<header id="header">
    <h1 id="logo"><a href="#/home"></a></h1>

    <div id="menu">
        <a href="#/home" class="btn">Home</a>
        <a href="#/about" class="btn">About</a>
        <a href="#/experiments" class="btn">Experiments</a>
    </div>
    <div class="color"></div>
    <div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>

<div id="container">
    <div ng-view></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="js/website.js"></script>
</body>
</html>

路由器 -

angular.module('website', []).
    config(function ($routeProvider) {
        $routeProvider.
            when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}).
            when('/experiments', {templateUrl: 'partials/experiments.html', controller: 'ExperimentsCtrl'}).
            when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'}).
            otherwise({redirectTo: '/home'});
    })
    .controller('AboutCtrl', ['$scope', 'StateService', function ($scope, StateService) {
        $scope.title = 'About Page';
        $scope.body = 'This is the about page body';

        $scope.message = StateService.getMessage();

        $scope.updateMessage = function (m) {
            StateService.setMessage(m);
        };
    }])
    .controller('ExperimentsCtrl', ['$scope', 'StateService', function ($scope, StateService) {
        $scope.title = 'Experiments Page';
        $scope.body = 'This is the about experiments body';

        $scope.message = StateService.getMessage();

        $scope.updateMessage = function (m) {
            StateService.setMessage(m);
        };
    }])
    .controller('HomeCtrl', ['$scope', 'StateService', function ($scope, StateService) {
        $scope.title = 'Home Page';
        $scope.body = 'This is the about home body';

        $scope.message = StateService.getMessage();

        $scope.updateMessage = function (m) {
            StateService.setMessage(m);
        };
    }])
    .factory('StateService', function () {
        var message = 'Hello Message';
        var getMessage = function() {
            return message;
        };
        var setMessage = function(m) {
            message = m;
        };

        return {
            getMessage: getMessage,
            setMessage: setMessage
        }
    });

Answer 1

您忘了在模块中添加ngRoute模块：

angular.module('website', [ngRoute]).
    config(function ($routeProvider) ...

您还必须包含angular-route js文件。现在没有与angularjs捆绑在一起..

这将起作用

仅通过localhost呈现的HTML路由

1 个答案: