angular路由的简单应用

最新推荐文章于 2021-07-30 19:56:52 发布

小白的成长之路_

最新推荐文章于 2021-07-30 19:56:52 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78782811

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <script type="text/javascript" src="js/angular-route.js" ></script>
       <style>
           ul{
               list-style: none;
           }
           ul li{
               float: left;
           }
       </style>
   </head>
   <body ng-app="myapp" ng-controller="mycrl">
       <input type="text" ng-model="myname" />
       <ul>
           <li><a href="#/">首页</a></li>
           <li><a href="#/lxr">联系人</a></li>
           <li><a href="#/yj">意见</a></li>
       </ul><br />
       
       <ng-view></ng-view>
       <script type="text/javascript">
           var mo=angular.module("myapp",["ngRoute"]);//将路由对象注入模块儿
           mo.controller("mycrl",function($scope){
               //传递值的,必须和传递页面名字一致
               $scope.student=["张璐","张露","张路"];
           });

           //在创建一个控制器,传几个页面的值创建几个控制器
            mo.controller("mycr2",function($scope){
               $scope.user="张鲁";
            });
           //配置路由
           //$routeProvider 内置对象，配置路由的
           //templateUrl加载路径
           mo.config(function($routeProvider){
               //"/"默认页面连接href="#/"
               $routeProvider.when("/",{templateUrl:"sy.html"}).when("/lxr",{templateUrl:"lxr.html",controller:"mycrl"});
                //contriller:"mycr"是进行传值用的
                $routeProvider.when("/yj",{templateUrl:"yj.html",controller:"mycr2"});
           })
       </script>
   </body>
</html>
//练习人页面
<ul ng-repeat="s in student">
   <li>{{s}}</li>
</ul>