AngularJS路由不按预期工作

时间:2015-01-19 05:04:44

标签: javascript angularjs url-routing

我是AngularJS的新手并且在这一点上非常失败。我想从这段代码中学习: http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview

的script.js:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

我的index.html文件包含

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

我在本地环境中设置它。我可以加载主页面,但路由只更改URL,没有别的。可能导致这种情况的任何想法?

2 个答案:

答案 0 :(得分:0)

当您说只调用了Url并且页面未呈现意味着,ngroute工作正常。您需要确保的一件事是所有html文件都位于pages目录下。

此外,index.html页面

中应该有<ng-view>个标记

最好的例子就是你所指的那个。

答案 1 :(得分:0)

我找到了解决问题的方法。我不得不添加

app.use(express.static(__dirname ));

到我的节点服务器脚本。但我不明白为什么需要这样做。