路由简单操作

最新推荐文章于 2022-04-27 17:17:15 发布

zhaochuang4858529

最新推荐文章于 2022-04-27 17:17:15 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/zhaochuang4858529/article/details/79027736

版权

引入路由主界面如下代码：

<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript" src="js/angular-route.js" ></script>
       <script>
           var app = angular.module("myApp",['ngRoute']);//引入路由
           app.controller("myCtrl",function($scope){
               $scope.name = "张三";



           });

           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
               .when("/home",{
                   template:"<h3>我是主页</h3>"
               })
               .when("/goods",{
                   templateUrl:"goods.html",
                   controller:"myCtrl"
               })
               .when("/info",{
                   templateUrl:"myinfo.html",
                   controller:"myCtrl"
               })
               .otherwise({
                   templateUrl:"error.html"
               });
           }]);
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <div ng-view>

       </div>
       <div>
           <a href="#/home">主页面</a>
           <a href="#/goods">商品</a>
           <a href="#/info">个人信息</a>
           <a href="#/other">其他</a>
       </div>
       <script type="text/ng-template" id="myinfo.html">
           <h3>{{name}}的个人中心</h3>
           姓名：<input type="text" ng-model="name" /><br />
           年龄：<input type="text" /><br />
           性别：<input type="text" /><br />
       </script>


   </body>

</html>

商品界面如下代码：

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       {{name}}-------》》》的商品页面
       <img src="img/ph9.bmp"/>
   </body>
</html>

zhaochuang4858529

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由简单操作

引入路由主界面如下代码： var app = angular.module("myApp",['ngRoute']);//引入路由 app.controller("myCtrl",function($scope){
复制链接

扫一扫