资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

AngularJS路由实现页面跳转实例

AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容。

创新互联自2013年起,是专业互联网技术服务公司,拥有项目网站建设、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元金城江做网站,已为上家服务,为金城江各地企业和个人服务,联系电话:028-86922220

所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的“跳转”可以理解为是局部页面的跳转。

AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面“跳转”的实例:

使用app.config来定义不同的location地址加载不同的页面,并拥有独立的控制器;

var app = angular.module('MyApp', ['ngRoute']);
  app.config(function ($routeProvider) {
   $routeProvider
    .when('/', {  // '/'表示页面初始加载内容;
     controller: 'homeCtrl', //控制器
     templateUrl: '../view/home.html' //显示的内容
    })
    .when('/reservation',{  //表示地址结尾为reservation时加载的内容;
     controller: 'reservationCtrl',  
     templateUrl: '../view/reservation.html'
    })
  });

 使用ng-view来定义动态内容加载的位置;



  
    
    
  
    
    
    

    
    
  

 上面提到,每个页面都会有一个独立的控制器,加载页面的同时会执行控制器中的函数;

app.controller('homeCtrl',function($scope,$location){  //页面的控制函数;
  $scope.goToUrl=function(path) {    //此方法可以改变location地址;
    $location.path(path);
  }
});

  上述控制器所对应的html页面为:


ng-click方法为点击事件执行指定函数方法。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站栏目:AngularJS路由实现页面跳转实例
新闻来源:http://cdkjz.cn/article/gjgipj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220