AngularJS路由以及模块配置

ゝ一纸荒年。 2022-07-12 07:08 227阅读 0赞

<!DOCTYPE html>  
    <html lang="en" ng-app="App">  
    <head>  
        <meta charset="UTF-8">  
        <title>AngularJS 路由-参数,模块配置,布局模板</title>  
        <style>  
            body {  
                padding: 0;  
                margin: 0;  
                background-color: #F7F7F7;  
                font-family: Arial;  
            }  
      
            .wrapper {  
                max-width: 980px;  
                margin: 50px auto;  
            }  
      
            ul {  
                padding: 0;  
                margin: 0;  
                overflow: hidden;  
                list-style: none;  
                background-color: #000;  
                border-radius: 4px;  
            }  
      
            li {  
                float: left;  
                width: 120px;  
                height: 40px;  
                text-align: center;  
                line-height: 40px;  
                font-size: 18px;  
            }  
      
            li.active {  
                background-color: #333;  
            }  
      
            li a {  
                display: block;  
                color: #FFF;  
                text-decoration: none;  
            }  
      
            .content {  
                margin-top: 30px;  
                font-size: 24px;  
                padding: 0 20px;  
            }  
        </style>  
    </head>  
      
    <body>  
        <div class="wrapper">  
              
            <ul>  
                <li class="active">  
                    <a href="#/index">Index</a>  
                </li>  
                <li>  
                    <a href="#/introduce">Introduce</a>  
                </li>  
                <li>  
                    <a href="#/contact">Contact Us</a>  
                </li>  
                <li>  
                    <a href="#/list">List</a>  
                </li>  
            </ul>  
              
            <div class="content">  
                  
                <div ng-view></div>  
            </div>  
      
        </div>  
          
        <script src="./libs/angular.min.js"></script>  
          
        <script src="./libs/angular-route.js"></script>  
        <script>  
          
            //2 实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）  
            var App = angular.module('App', ['ngRoute']);  
      
            //3 配置路由模块，使其正常工作  
            App.config(['$routeProvider', function ($routeProvider) {  
      
                $routeProvider.when('/index', {  
                    // template: '<h1>index Pages!</h1>',  
                    templateUrl: './abc.html'  
                })  
                .when('/introduce', {  
                    template: '<h1>introduce Pages!</h1>'  
                })  
                .when('/contact', {  
                    // template: '<h1>contact US Pages!</h1>',  
                    templateUrl: './contact.html',  
                    controller: 'ContactController' // 定义控制器  
                })  
                .when('/list', {  
                    templateUrl: './list.html', // 视图模板  
                    controller: 'ListController' // 定义控制器  
                })  
                .otherwise({  
                    redirectTo: '/index'  
                });  
      
            }]);  
      
            // 列表控制器  
            App.controller('ListController', ['$scope', '$http', function ($scope, $http) {  
                // 模型数据  
                // $scope.items = ['html', 'css', 'js'];  
      
                $http({  
                    url: 'xxx.php',  
                }).success(function (info) {  
                    $scope.items = info; //php 返回值['html', 'css', 'js'];  
                });  
      
            }]);  
      
            App.controller('ContactController', ['$scope', '$http', function ($scope, $http) {  
      
                $http({  
                    url: 'contact.php'  
                }).success(function (info) {  
                    $scope.content = info;  
                });  
      
            }]);  
      
        </script>  
      
    </body>  
    </html>