angular 路由

最新推荐文章于 2023-05-31 14:02:29 发布

原创最新推荐文章于 2023-05-31 14:02:29 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Angular框架实现路由与模块化的简单示例。通过定义不同的路由路径，如主页、联系人页面和意见页面，并为每个路径指定模板和控制器，展示了如何组织和导航不同的视图内容。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>路由传值</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">

       <a href="#/">主页</a><a href="#/contacts">联系人</a><a href="#/yijian">意见</a>
       
        <ng-view></ng-view>
       <script type="text/javascript">
           var m = angular.module("myApp",["ngRoute"]);
           m.controller("myCtrl",function($scope){

               $scope.name = "张三";

               $scope.persons =["张三","李四","杨过"];

           })
           //在创建一个控制器
           m.controller("myCtrl2",function($scope){

               $scope.user = "周伯通";

           })
           //$routeProvider 路由配置对象
           m.config(function($routeProvider){

//               $routeProvider.watch();

               $routeProvider.when("/",{template:"我是主页"})
               .when("/contacts",{templateUrl:"contact.html",controller:"myCtrl"})
               .when("/yijian",{templateUrl:"yijian.html",controller:"myCtrl2"})

           });
       </script>
   </body>
</html>