Question

我刚开始学习Angular并尝试从书中学习，但我的简单路由并不起作用。

我已按照答案中的建议更新了代码

这是index.html：

<html ng-app="airline">
<head>
    <title>Demo</title>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-route.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script> 
</head>

<body>

    <div class="container" ng-controller="AppCtrl">
        <h1>AngulAir</h1>

        <div ng-view></div>
    </div>

</body>
</html>

这是app.js：

angular.module('airline', ['ngRoute'])
    .config(airlineRouter);

function airlineRouter ($routeProvider) {
    info('1');
    $routeProvider
        .when('/', {template: '<h3>test</h3>'})
};

当我刷新页面时，我没有“测试”。在浏览器中没有警报消息。为什么？我缺少什么？

更新

以下是完整的代码示例：https://github.com/demas/ang_test

Answer 1

您缺少ngRoute指令。下载ng-route.js文件并在您的HTML中引用它;

<script type="text/javascript" src="js/lib/angular-route.js"></script>

并更改您的app.js，如

angular.module('airline', ['ngRoute'])
    .config(airlineRouter);

function airlineRouter ($routeProvider) {
    info('1');
    $routeProvider
        .when('/', {template: '<h3>test</h3>'})
};

Answer 2

最新的角度库使用外部路由器，因此您需要注入ngRoute并将其传递为：

angular.module('airline', ['ngRoute'])

简单的路由视图

2 个答案: