Angular路由

最新推荐文章于 2021-02-10 23:34:42 发布

Carl_Hugo

最新推荐文章于 2021-02-10 23:34:42 发布

阅读量279

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/zxiang248/article/details/52588256

版权

AngularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

路由的使用
1.创建模块
2.配置路由
3.创建每个页面对应的控制器
4.创建ng-template
5.视图层创建ng-view

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>route</title>

    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script>
        var app=angular.module('app',['ngRoute']);

        /*配置路由*/
        app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/a/:name',{controller:'studentsController',templateUrl:'a_tmpl'})
                    .when('/b/:name',{controller:'teachersController',templateUrl:'a_tmpl'})
                    .when('/c/:name',{controller:'othersController',templateUrl:'a_tmpl'})
                    .otherwise({
                        redirectTo:'/a'
                    });
        }]);

        app.controller('studentsController',['$scope','$routeParams',function($scope,$routeParams){
            $scope.title="这是"+$routeParams.name+"控制器";
        }]);

        app.controller('teachersController',['$scope','$routeParams',function($scope,$routeParams){
            $scope.title="这是"+$routeParams.name+"控制器";
        }]);

        app.controller('othersController',['$scope','$routeParams',function($scope,$routeParams){
            $scope.title="这是"+$routeParams.name+"控制器";
        }]);

    </script>

</head>
<body ng-app="app">

<script id="a_tmpl" type="text/ng-template">
    <h1>{{title}}</h1>
</script>


    <ul>
        <li><a href="#/a/default_a">A</a></li>
        <li><a href="#/b/default_b">B</a></li>
        <li><a href="#/c/default_c">C</a></li>
    </ul>
    <div ng-view></div>

</body>
</html>

Carl_Hugo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular路由

路由的使用 1.创建模块 2.配置路由 3.创建每个页面对应的控制器 4.创建ng-template 5.视图层创建ng-view<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>route</title> <script src="node_modules/angular/an
复制链接

扫一扫

专栏目录