angular route 路由使用demo

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

原创最新推荐文章于 2022-04-27 17:17:15 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单单页应用案例，通过定义不同的路由来展示主页、商品和个人信息等页面，并演示了如何使用控制器传递数据。

<!DOCTYPE html>
<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>