angular-route传递参数

最新推荐文章于 2020-12-01 14:28:15 发布

duderi1

最新推荐文章于 2020-12-01 14:28:15 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Noviceduderi/article/details/78782072

本文介绍了一个使用AngularJS实现的简单路由配置示例，通过设置不同的路由规则来展示主页和子页面的内容，并演示了如何创建控制器及配置路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
   </head>
   <body ng-app="myapp" ng-controller="cre">
       <a href="#/zhu">主页</a><br />
       <a href="#/zi">子页</a>
   </body>
   
   <ng-view>

   </ng-view>
   <script>
       //注入
       var mo=angular.module("myapp",["ngRoute"])//将路由对象注入到模块中
       //创建控制器
       mo.controller("cre",function($scope){
           $scope.name="李四";
       })
       //创建第二个控制器
       mo.controller("cre1",function($scope){
           $scope.goods=["张三","李四","王五"];
       })
       //配置路由对象
       //$routeProvider 内置对象，配置路由的
       //templateUrl加载路径
       //controller控制器
       mo.config(function($routeProvider){
           //注意单词，大括号等
           $routeProvider.when("/zhu",{templateUrl:"zhu.html",controller:"cre"});
           $routeProvider.when("/zi",{templateUrl:"zi.html",controller:"cre1"});
       });
   </script>
</html>