zoukankan      html  css  js  c++  java
  • angularJS之路由

    angularJS是一种单页面web应用(简称spa),路由允许我们通过不同的URL路径来访问不同的内容,在AngularJS中需要用到 # + 标记 的格式;好了,我们直接看代码:

    【1】通过a标签进行跳转:

    <script>
            var app = angular.module("app",["ngRoute"]);
            app.config(["$routeProvider", function ($routeProvider) {
                $routeProvider.when("/content1",{template:"1111"})
                        .when("/content2",{templateUrl:"select.html"})
                        .when("/content3",{template:"33333"})
                        .when("/content4",{template:"4444"})
                        .otherwise({redirectTo:"/content1"});
            }])
    </script>
    </head>
    <body ng-app="app">
    <div ng-view></div>
    <ul>
        <li><a href="#/content1">111</a></li>
        <li><a href="#/content2">222</a></li>
        <li><a href="#/content3">333</a></li>
        <li><a href="#/content4">444</a></li>
    </ul>
    </body>
     
    【2】通过ng-click跳转:
    <h3>这是第三部分child3.html的页面{{name3}}</h3>
    <p>
        <span ng-click="clear()">清空缓存</span>
        <span ng-click="info()">版本信息</span>
        <span ng-click="check()">检查</span>
    </p>
     
    <script>
            var app = angular.module("app",["ngRoute"]);
            app.config(["$routeProvider", function ($routeProvider) {
                $routeProvider.when("/content1",{template:"1111"})
                        .when("/check",{templateUrl:"child/check.html"})
                        .when("/clear",{templateUrl:"child/clear.html"})
                        .when("/info",{templateUrl:"child/info.html"})
                        .otherwise({redirectTo:"/content1"});
            }])
    </script>
    <script>
    app.controller("child3Controller",["$scope","$location", function ($scope,$location) {
        $scope.check= function () {
            $location.path("check");
        };
        $scope.clear= function () {
            $location.path("clear");
        };
        $scope.info= function () {
            $location.path("info");
        };
    }]);
    </script>
    通过AngularJS的来实现这种效果,写的代码看上去还是比较冗余,大家可以学习一下onsenUI中的写法,那就比较直接简单了!
  • 相关阅读:
    常见的单链表题目
    SpringBoot Hello
    IDEA 重置
    lombok的用法
    软件测试系列白盒测试覆盖率的问题
    软件测试系列软件测试基础
    Linux常用命令1对文件进行查看、复制、移动和分割
    软件测试系列通用测试用例写作
    Java继承特性
    Linux常用命令3如何设置IP地址?如何更改系统时间?
  • 原文地址:https://www.cnblogs.com/sunshine-my/p/6551229.html
Copyright © 2011-2022 走看看