AngularJS之页面跳转Route
2015-12-03 21:43
731 查看
AngulagJs的页面使用Route跳转
1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js"
2.通过$routeProvider定义路由,示例
3.使用路由跳转,结合ng-view做spa
3.1 在JS中使用$location进行跳转,如示例,在需要的时候调用goToIndex2即可
3.2 在html代码中使用href="#path"来进行跳转
1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js"
2.通过$routeProvider定义路由,示例
var testModule = angular.module('testModule', ['ngRoute']); testModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/2', {//'/2'定义的路由路径,以后通过此路径访问,通常定义为短路径 templateUrl: "/home/index2",//"/home/index2"是路由实际访问的路径,可以是asp.net mvc的访问路径(如此例),也可是具体的页面路径,如“test/test.html" controller:'testController'//路由跳转的controller,后面必须定义此控制器 }); $routeProvider.when('/3', { templateUrl: "/home/index3", controller:'testController' }) }]);
3.使用路由跳转,结合ng-view做spa
3.1 在JS中使用$location进行跳转,如示例,在需要的时候调用goToIndex2即可
testModule.controller("testController", ["$scope", "$location", function ($scope, $location) { $scope.goToIndex2 = function () { $location.path("/2") } }]);
3.2 在html代码中使用href="#path"来进行跳转
<html > <head> <meta name="viewport" content="width=device-width" /> <title>Index1</title> @Styles.Render("~/Content/css/base") @Scripts.Render("~/script/base") <script src="~/scripts/ngmoudle/app.js"></script> </head> <body> <div ng-app="testModule" ng-controller="testController"> <header> <h1>This is Index1</h1> <button type="button" class="btn btn-default" ng-click="goToIndex2()">Index2</button> <a href="#/3" class="btn btn-default">Index3</a><!--通过heft="#path"方式进行跳转--> <a href="#/2" class="btn btn-default" >Index2</a> </header> <div ng-view> </div> <footer>PAGE FOOTER</footer> </div> </body> </html>
相关文章推荐
- ngRoute AngularJs自带的路由
- AngularJS简介
- 解决AngularJS中update2次出现的$promise属性无法识别的问题
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
- angularjs指令作用及用法
- AngularJS - MVC 模型
- AngularJS – 指令
- AngularJS-模板和数据绑定
- AngularJS – 与服务器通讯
- AngularJs $resource 高大上的数据交互
- angularjs中provider、factory和service三者的写法与区别
- AngularJS directive简述
- AngularJS处理ASP.Net MVC Json返回日期
- AngularJS进阶(十六)脏值检查
- AngularJS进阶(十六)脏值检查
- angularjs之ui-bootstrap和ui-router结合使用
- angularjs之ui-bootstrap的使用
- angularjs-ui-router的使用
- angularjs指令的使用
- 我的第一篇博客随笔:关于angularjs API的理解心得。angular.bind() angular.boostrap()