angularjs的路由

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="js/vendor/angular-1.5.8.min.js"><//script>
    <script src="webjars/angular-route/1.5.8/angular-route.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);






发表于: 16天前   最后更新时间: 16天前   游览量:59
上一条: angularJs事件
下一条: angularjs双向数据绑定

评论…


  • 评论…
    • in this conversation