您的位置：首页 > Web前端 > AngularJS

简单的angular路由

2017-12-12 19:38 288 查看
//导包的时候一定要注意先导入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>

  <!--<ng-view></ng-view>-->

  <!--

         ng-view是个容器，将子页面放入这里

        -->

  <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三个可以随便布局只是为了可以调用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航