您的位置：首页 > Web前端 > HTML5

angular设置路由实现无刷新跳转

2017-05-17 16:33 281 查看 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>angular路由</title>

<script type="text/javascript" src="js/angular.js" ></script>
//引入angular.js

<script type="text/javascript" src="js/angular-ui-router.js" ></script>
//引入angular的路由组件

</head>
<body>

<div  ng-app="buying"> //设置应用angular模板的范围

<ui-view> 
//视图：即切换的内容都会显示在这里

</ui-view>

</div>

<a href="" ui-sref="listr"></a>  //  listr与下面设置的name相同，即请求的页面名称

angular.module('buying',['ui.router']).config(function($stateProvider){           

//buying为上面应用的模块；ui.router为依赖的模块；config为配置路由方法；$stateProvider为内置参数，用于配置每个实际路由

//在同一页面配置多个页面时，采用下面方法

var htmls = [
{
name:'listr', //设置页面名称

url:'/listr', //设置浏览器地址的路径

templateUrl:'listr.html' //设置将要显示页面的路径，路径要设置相对于该页面的路径，同一目录下 设置文件名即可 
}
];
htmls.forEach(function(state){ //循环设置路由，即使数组只有一个时也要用该方法遍历。      
$stateProvider.state(state);
});

//只配置一个页面时，采用下面方法

var html= {
name:'listr',
url:'/listr',
templateUrl:'listr.html'
};
$stateProvider.state(html);

})   

</body>

</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                angular
                                                html5
                                                路由
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航