angularjs材料设计中的路由

Question

我试图弄清楚如何在 angularjs 材料设计中的页面之间进行路由。

在此示例中，我想在单击侧边栏链接时更改页面 http://codepen.io/kyleledbetter/pen/gbQOaV

Script.js

// script.js

// create the module and name it scotchApp
    // also include ngRoute for all our routing needs
var starterApp = angular.module('starterApp', ['ngRoute']);

// configure our routes
starterApp.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
starterApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

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

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

about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ message }}</p>
</div>

Answer 1

你有没有尝试在标签<a>中加入href属性？

<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>

这样，每当 AngularJS 看到一个 url 变化时，它就会触发路由器去寻找指定的路径。