angular路由（自带路由篇）

首页 > 代码库 > angular路由（自带路由篇）

angular路由（自带路由篇）

2024-10-14 00:46:02 213人阅读

一、angular路由是什么？

　　为了实现SPA多视图的切换的效果，其原理可简述为每个 URL 都有对应的视图和控制器。所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换。

二、文件总览

　　技术分享

　　1.新建文件

　　　　一级目录新建ngRoute.html（为主页面，里面进行路由配置）

　　　　一级目录新建view文件夹，里面再新建三个子页面aboutus.html,home.html,order.html

　　　　一级目录存放angular.js和angular-route.js文件，文件存放位置依自己喜好即可

　　2.ngRoute.html代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="angular-route.js"></script>
    </head>
    <body ng-app=‘myApp‘>
        <a href="#/home">HOME</a>
        <a href="#/aboutus">AHOUTUS</a>
        <a href="#/order">ORDER</a>
        <!--ng-view相当于之前的div#container，用来展示子视图-->
        <ng-view></ng-view>
        <!--ng-view和下面的代码等价-->
        <!--<div id="container" ng-view></div>-->
    </body>
    <script>
        var app=angular.module("myApp",[‘ngRoute‘]);
        //配置路由
        app.config(function($routeProvider){
            //如果是home 让ng-view里面的视图是home.html
            $routeProvider
            .when(‘/home‘,{
                templateUrl:‘view/home.html‘,
                controller:‘homeVC‘
            })
            .when(‘/aboutus‘,{
                templateUrl:‘view/aboutus.html‘,
                controller:‘aboutusVC‘
            })
            .when(‘/order‘,{
                templateUrl:‘view/order.html‘,
                controller:‘orderVC‘
            })
            .otherwise({
                redirectTo:‘/home‘  //重定向到home页面
            })
        });
        //配置Controller
        app.controller(‘homeVC‘,function($scope,$routeParams){
            console.log($routeParams);
            $scope.title=‘我是homeVC‘
        });
        app.controller(‘aboutusVC‘,function($scope){
            $scope.title=‘我是aboutusVC‘
        });
        app.controller(‘orderVC‘,function($scope){
            $scope.title=‘我是orderVC‘
        });
        
    </script>
</html>