路由的简单应用

来源：互联网发布：银行笔试通过率知乎编辑：程序博客网时间：2024/06/13 14:46

<!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/jquery-2.1.0.min.js" ></script>
       <script type="text/javascript" src="js/angular-route.js" ></script>
       <script>
           var mo=angular.module("myApp",["ngRoute"]);
           mo.controller("myCtrl",function($scope){
           })
           mo.controller("test",function($scope){
               $scope.name="唯美"
           })
           mo.config(function($routeProvider){
               $routeProvider.when("/",{templateUrl:"Demo1.html"})
               $routeProvider.when("/Demo2",{templateUrl:"Demo2.html"})
               $routeProvider.when("/Demo3",{templateUrl:"Demo3.html",controller:"test"})
           })
       </script>
       <style>
           a{
               text-decoration: none;
           }
           ul{
               list-style: none;
           }
           li{
               float: left;
               margin-left: 30px;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <ul>
           <li><a href="#/">主页</a></li>
           <li><a href="#/Demo2">美女</a></li>
           <li><a href="#/Demo3">唯美</a></li>
       </ul>
       <div ng-view></div>
   </body>
</html>

阅读全文

0 0