angularJS路由

来源:互联网 发布:wepone是什么软件 编辑:程序博客网 时间:2024/04/30 21:12
路由:


html


index.html  
<ul  ng-app="myApp" >
                <li><a href="#/">首页</a></li>
  <li><a href="#/about">个人中心</a></li>
   <li><a href="#/contact">联系我们</a></li>
</ul>
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>




home.html     <div>{{message}}</div>


about.html     <div>{{message}}</div>


contact.html   <div>{{message}}</div>




script 
  var myApp=angular.module("myApp",["ngRoute"]);
  myApp.config(["$routeProvider",function($routeProvider){
      $routeProvider
      .when("/",{templateUrl:"home.html",controller:"homeController"})
      .when("/about",{templateUrl:"about.html",controller:"aboutController"})
      .when("/contact",{templateUrl:"contact.html",controller:"contactController"});
  }])


  myApp.controller("homeController",function($scope){
     $scope.message="home"
 }) ;
  myApp.controller("aboutController",function($scope){
    $scope.message="about";
  });
  myApp.controller("contactController",function($scope){
     $scope.message="contact";
 });
0 0
原创粉丝点击