AngularJS路由与routeprovider无法正常工作

时间:2015-09-13 07:32:50

标签: javascript html angularjs

我有这个index.html页面:

<html>
<head ng-app="myApp">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test App/title>
    <link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
    <a href="#/index2">index2</a>
    <div ng-view></div>
    <script src="vendor/angular/angular.js"></script>
    <script src="vendor/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
</body>
</html>

这是我的app.js脚本:

'use strict';

var myApp = angular.module('myApp', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/index2', {
                templateUrl: 'views/index2.html'
            })
            .otherwise({redirectTo: '/views/index2.html'});
    });
myApp.controller('mainController', function ($scope) {
});

我的views / index2.html只包含单个123元素。 当我点击index.html上的链接时,没有任何反应,没有路由。 我错了什么?

upd:我从IntelliJ IDEA运行它,所以我认为没有关于webserver的内容。

1 个答案:

答案 0 :(得分:5)

您已将ng-app指令应用于head代码:

<head ng-app="myApp">

这意味着ng-app仅适用于head标记。相反,您需要将其移至html标记:

<html ng-app="myApp">