Question

angularjs使用路由怎么实现返回上一页，页面内容不会刷新

Answer 1

1. angularjs有自带的返回上一页的路由，在路由里面用

 .state('tab.chats', { //路由名字
      url: '/chats',//路由地址
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',//跳转的页面
          controller: 'ChatsCtrl'//控制器
        }
      }
    })

2.比如点击物业的时候进入下一个页面，箭头是自带的,当然箭头样式需要自己调整。

3.该方法是运用的ionic框架实现的，基于angularjs的方式。

Answer 2

在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。 乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。 例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。 而要做到上面介绍的功能就必须使用路由功能了。 主体思路： 1">Sindre Sorhus</a></p> <p>Part of <a href="todomvc.com">TodoMVC</a></p> </footer> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-route/angular-route.js"></script> <script src="js/app.js"></script> </body> </html> 其他的东西都是装饰，只要看第24行就可以了。 在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。 接下来请看对应的app.js。 var app = angular.module("myTodo", ['ngRoute']); //路由的配置： app.config(function($routeProvider) { var routeconfig = { templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ } var ohter_config = { templateUrl: "other.html" } $routeProvider. when("",routeconfig). //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" }); }); app.controller("myTodoCtrl", function($scope, $routeParams, $filter){ console.log($routeParams); }); 如果仅仅使用路由的话，以上的代码就足够使用了。它会保证; 1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到 /all 上面，网址是——127.0.0.1:8020/finishAngularJS-mark2/index.html#/all 只需要注意index后面的就可以了。 2. 当页面跳转方向是/other的时候，跳转到 127.0.0.1:8020/finishAngularJS-mark2/iother.html 上 3. 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转—— 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active 127.0.0.1:8020/finishAngularJS-mark2/index.html#/all 127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete 【尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。】 接下来我们讲解原理： app.config(function($routeProvider) 这便是用来设定路由的代码，直接写就好 var routeconfig = { templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ } var ohter_config = { templateUrl: "other.html" } 这是两个跳转，跳转是一个对象，templateUrl，即模板是body.html，这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。 第二个跳转因为不重要所以pass。 $routeProvider. when("",routeconfig). //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" }); }); 这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。 当哈希值为""即第二句，为空的时候，执行routeconfig 当哈希值为"/other",即第五局，执行other_config 当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。 当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。 我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。 以上就是小编为大家带来的angular.js之路由的选择方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~