AngularJS:$ routeProvider无效

时间:2014-03-19 10:08:24

标签: javascript angularjs

我是javascript和angularJS的新手,我在配置$ routeProvider方面遇到了一些问题。它根本不显示任何内容。 这是我的代码:

var route = angular.module('app', []);

route.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {templateUrl: 'partials/home.html'})
        .when('/about', {templateUrl: 'partials/about.html'})
        .otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);

ap.controller('MainCtrl', function($scope) {
    $scope.opts = {
        disable: 'right'
    };
});

和HTML:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/angular-snap.css" />


        <script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
        <script src="js/snap.js" type="text/javascript"></script>
        <script src="js/angular-snap.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>

    <body ng-controller="MainCtrl">

        <nav snap-drawer class="nav">
            <a href="#home">Home</a>
            <a href="#about">About us</a>
        </nav>

        <snap-content snap-options="opts"> 

            <header class="header">
                <button snap-toggle>
                    <img src="img/icon-menu.png" width="60px" />
                </button>
                Test
            </header>

            <div ng-view>
            </div>

        </snap-content>



        <script src="cordova.js" type="text/javascript"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

左面板的snap元素工作得很好但是当我想添加routeProvider时它不会显示我在partial / home.html中的内容(目前只是一个段落)。

2 个答案:

答案 0 :(得分:1)

不要忘记注入ngRoute模块。

var route = angular.module('app', ['ngRoute']);

答案 1 :(得分:0)

您需要包含ngRoute模块(和angular-route.js)才能使$ routeProvider工作。这是前一段时间分开的:

AngularJS $routeProvider docs