zoukankan      html  css  js  c++  java
  • angularJs路由的使用

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    
        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
        <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
        <style>
            li{
                list-style: none;
            }
        </style>
    </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>
    <br>
    <div ng-view></div>
    
    <script>
        angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                    .when('/',{template:'这是首页页面'})
                    .when('/computers',{template:'这是电脑分类页面'})
                    .when('/printers',{template:'这是打印机页面'})
                    .otherwise({redirectTo:'/'});
            }]);
    </script>
    </body>
    </html>

    注意事项: 路由机制是单独的,所以需要进行单独引入

    通过路由进行点击,当点击相应的链接,在view区域会进行不同的展示

  • 相关阅读:
    【HDU 2874】Connections between cities(LCA)
    【Gym 100947C】Rotate It !!
    【CodeForces 615E】Hexagons
    Course Selection CodeChef
    UVA 10779 Collectors Problem[最大流]
    1855: [Scoi2010]股票交易[单调队列优化DP]
    1854: [Scoi2010]游戏[并查集]
    1853: [Scoi2010]幸运数字[容斥原理]
    poj3233 Matrix Power Series
    3969 [Mz]平方和【斐波那契平方和】
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10430935.html
Copyright © 2011-2022 走看看