angularjs之路由

半兽人 发表于: 2018-09-06   最后更新时间: 2020-07-01 10:03:39  
{{totalSubscript}} 订阅, 3,053 游览
<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    <script src="https://www.orchome.com/webjars/angular-route/1.5.8/angular-route.min.js"></script>
    <title>Document</title>
</head>
<body ng-app="app">
    <ul>
        <li><a href="/index">index</a></li>
        <li><a href="/hello">hello</a></li>
        <li><a href="/welcome">welcome</a></li>
    </ul>

    <div ng-view></div>
</body>

<script>
    var app = angular.module("app", ['ngRoute']);

    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/index', {
            templateUrl: 'demo-pages/index.html'
        }).when('/hello', {
            templateUrl: 'demo-pages/hello.html',
            controller: 'HelloCtrl'
        }).when('/welcome', {
            template: 'welcome!!!'
        }).otherwise({
            redirectTo: '/index'
        });

        $locationProvider.html5Mode(true);
    });

    app.controller("HelloCtrl", function ($scope) {
        $scope.greeting = {
            text: 'hello'
        };
    });
</script>
</html>

index.html

index....

hello.html

hello...{{greeting.text}}

注意

<base href="/"/>

解决页面报错。

解决自带的#

$locationProvider.html5Mode(true);

注意:index.html 和 hello.html 需要您自己创建,示例无此页面。在线运行

更新于 2020-07-01

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章