[angularjs] 前端路由实现单页跳转
2016-03-28 17:25
696 查看
代码:
效果图:
<div ng-app="Home"> <div ui-view></div> <div ng-controller="Index"> <a href="#/one">第一页</a> <a href="#/two">第二页</a> <a href="#/three">第三页</a> </div> </div> </body> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> <script type="text/javascript"> var app=angular.module("Home",["ui.router"]); app.config(function($stateProvider,$urlRouterProvider){ $stateProvider.state("one",{ url:"/one", templateUrl:'page1.html', controller: function($scope){ $scope.title = '第一页'; } }); $stateProvider.state("two",{ url:"/two", templateUrl:'page2.html', controller: function($scope){ $scope.title = '第二页'; } }); $stateProvider.state("three",{ url:"/three", templateUrl:'page3.html', controller: function($scope){ $scope.title = '第三页'; } }); }); app.controller("Index",function($scope){}); </script>
效果图:
![](https://images2015.cnblogs.com/blog/726254/201603/726254-20160328172602801-1894844989.png)
相关文章推荐
- 【应用】在线文件管理
- angularjs 备忘
- angularjs 表单验证
- AngularJS directive返回对象属性详解
- angularjs $resource请求类型和请求参数
- ionic准备之angular基础———服务provider 和 factory和service(9)
- Wijmo 2016 V1 强势发布,全面支持Angular 2
- angularjs 设置全局变量的3种方法
- ionic准备之angular基础——格式化数据以及过滤器(8)
- ionic准备之angular基础——模板引入(7)
- ionic准备之angular基础——dom操作相关(6)
- angular 双向绑定原理
- angular-控制器
- angular 重置表单
- AngularJS in Action读书笔记6(实战篇)——bug hunting
- 南阳题目122-Triangular Sums
- angular路由
- angularjs2入门实例(2)
- AngularJS2入门实例(1)
- angularjs ngrepeat filter