angularJS1 路由配置

最新推荐文章于 2021-12-29 08:47:28 发布

xiejunna

最新推荐文章于 2021-12-29 08:47:28 发布

阅读量2k

点赞数

分类专栏： angularJS1 文章标签： angularjs

本文链接：https://blog.csdn.net/xiejunna/article/details/53886739

版权

angularJS1 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

demo如下：

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <!--    这里1.6版本的引入后，跳转没反应，这个版本貌似有bug，建议用1.3版本的
        <script type="text/javascript" src="js/angular.min.1.6.0.js" ></script>
        <script type="text/javascript" src="js/angular-route.min.1.6.0.js" ></script>    
        -->

        <script type="text/javascript" src="js/angular.min.1.3.0.js"></script>
        <script type="text/javascript" src="js/angular-route.min.1.3.0.js"></script>

    </head>



    <body ng-app="myapp" class="ng-scope">

        <div>
            <div id="navigation">
                <a href="#/a">a.html</a>
                <br />
                <a href="#/b">b.html</a>
            </div>

            <div ng-view>
            </div>
        </div>
    </body>



    <script type="text/javascript">
        angular.module('myapp', ['ngRoute'])
            .controller('a_Controller', function($scope, $route) {
            //此处的controller是跳转到a.html界面的controller
                $scope.$route = $route;
            })
            .controller('b_Controller', function($scope, $route) {
            //此处的controller是跳转到b.html界面的controller
                $scope.$route = $route;
            })
            .config(function($routeProvider) {
                $routeProvider.
                when('/a', {
                    templateUrl: 'a.html',
                    controller: 'a_Controller'
                    //a.html界面中要用此controller
                }).
                when('/b', {
                    templateUrl: 'b.html',
                    controller: 'b_Controller'
                    //b.html界面中要用此controller
                }).
                otherwise({
                    redirectTo: '/a'
                });
            });
    </script>



</html>

xiejunna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS1 路由配置

demo如下：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user
复制链接

扫一扫