简体   繁体   中英

AngularJS Routing Not Working As Expected

I'm new to AngularJS and very lost at this point. I am trying to learn from this code: 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.';
});

My index.html file includes

<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>

I have it set up on a local environment. I can load the main page but the routing only changes the URL, nothing else. Any ideas what could be causing this?

When you say only Url is called and page is not rendered means, ngroute works fine. One thing you need to make sure is that all html files reside under pages directory.

Also there should be <ng-view> tag inside index.html page

The best example is the plunker you are referring to.

I found the solution to my problem. I had to add

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

To my node server script. I don't understand why this was needed, though.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM