【关于ng-router和ui-router _angular router 】

关于ng-router和ui-router

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

angular router

详细描述

截图

代码

ng-router
<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>
关于ui-router
<ul>
   <li><a ui-sref="index">首页</a></li>
   <li><a ui-sref="fruit">水果</a></li>
   <li><a ui-sref="vegetable">蔬菜</a></li>
 </ul>
angular.module('myapp',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/index');
    $stateProvider.state('fruit',{
       url:'/fruit',
       templateUrl:'fruit.html'
    })
    .state('vegetable',{
        url:'/vegetable',
        templateUrl:'vegetable.html'
    })
    .state('index',{
        url:'/index',
        template:'<h2>这是首页</h2>'
    });
});

编辑于2024-05-16