简单的angular路由

来源：互联网发布：php递归99乘法表编辑：程序博客网时间：2024/06/01 21:38

//导包的时候一定要注意先导入angular包再导入route包

<!--
        路由：
          路线
        通过超链接，连接不同的页面。
        #,在浏览器中，#后面的会被忽略掉
        点击不同的超链接，加载不同的页面

        子页面：
          就是要加载到主页面的页面

        混合开发，其实就是开发单页面应用。

        //路由三个时间
        .页面开始加载的时间
        路由有几个常用的事件：

$routeChangeStart：这个事件会在路由跳转前触发

$routeChangeSuccess：这个事件在路由跳转成功后触发

   $routeChangeError：这个事件在路由跳转失败后触发

        -->
        <style type="text/css">
        ul{
          list-style: none;
        }
        ul li{
          float: left;
          width: 60px;
        }
        a{
          text-decoration: none;
        }
        </style>

<body ng-app="myApp" ng-controller="myCtrl">

  <ul>
   <li><a href="#/">主頁</a></li>
   <li><a href="#/goods">購物車</a></li>
   <li><a href="#/me">我的</a></li>
  </ul>
  <br>
  
  
  <div ng-view>

  </div>
  <script type="text/javascript">
   var mo = angular.module("myApp",["ngRoute"]);//将路由对象注入模块儿
   mo.controller("myCtrl",function($scope){



   })
   //配置路由
   //   $routeProvider 内置对象，配置路由的
   //templateUrl加载路径
   mo.config(function($routeProvider){

//    $routeProvider.when("/",{templateUrl:"zhuye.html"});
//
//    $routeProvider.when("/goods",{templateUrl:"goods.html"})
//
//    $routeProvider.when("/me",{templateUrl:"me.html"})
    $routeProvider.when("/",{template:"我是主页"}).when("/goods",{templateUrl:"goods.html"}).when("/me",{templateUrl:"me.html"});

   });
  </script>
</body>

//还有三个子页面goods zhuye me三个可以随便布局只是为了可以调用

阅读全文

0 0