HTML 路由换div

最新推荐文章于 2024-02-22 21:24:36 发布

潜水断桥

最新推荐文章于 2024-02-22 21:24:36 发布

阅读量764

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37454196/article/details/78796614

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

列：

<script>
			angular.module('routingDemoApp', ['ngRoute'])
				.config(['$routeProvider', function($routeProvider) {
					$routeProvider
						.when('/a', {
							templateUrl: 'one.html'
						})
						.when('/b', {
							templateUrl: 'zhuye.html'
						}).when('/c', {
							templateUrl: 'three.html'
						})
						.when('/d', {

							templateUrl: 'four.html'
						})

				}]);
		</script>