您现在的位置是:首页 > Javascript
当前栏目
[angularjs] 前端路由实现单页跳转
2023-02-18 15:47:24 时间
代码:
<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>
效果图:
相关文章
- JS算法之动态规划
- JS_基础知识点精讲
- JS_手写实现
- JS算法_知识点精讲
- .NET7 gRPC JSON转码+OpenAPI
- 一门看懂Node处理CPU密集型任务的方法有哪些
- 使用Node构建一个高效的静态文件服务器
- 一文带你看懂Node的Buffer类
- JavaScript刷LeetCode拿offer-高频40题
- 用javascript分类刷leetcode--位运算(图文视频讲解)
- JavaScript刷LeetCode拿offer之失败-滑动窗口
- 用javascript分类刷leetcode---动态规划(图文视频讲解)
- 手写JavaScript常见5种设计模式1
- FastJson反序列化漏洞修复
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)