• Angular学习(8)- 路由


    示例:

    <!DOCTYPE html>
    <html ng-app="MyApp">
    <head>
        <title>Study 12</title>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/angular-route.js"></script>
    </head>
    <body>
        <div ng-view></div>
        
        <script type="text/ng-template" id="show.html">
            <div ng-controller="PhoneListCtrl">
                <h2>{{title}}</h2>
                <a href="#/phones/:1">go to detail</a>
            </div>
        </script>
        <script type="text/ng-template" id="put.html">
            <div ng-controller="PhoneDetailCtrl">
                <h2>{{title}} - {{id}}</h2>
                <a href="#/phones">go to list</a>
            </div>
        </script>
    
        <script type="text/javascript">
            var app = angular.module('MyApp', ["ngRoute"], function() { });
            app.config(['$routeProvider', function($routeProvider) {
                $routeProvider.
                    when('/phones', { templateUrl: 'show.html', controller: "PhoneListCtrl" }).
                    when('/phones/:id', { templateUrl: 'put.html', controller: "PhoneDetailCtrl" }).
                    otherwise({ redirectTo: '/phones' });
            } ]);
            app.controller('PhoneListCtrl', function($scope) {
                $scope.title = 'List';
            });
            app.controller('PhoneDetailCtrl', function($scope, $routeParams) {
                $scope.title = 'Detail';
                $scope.id = $routeParams.id;
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    斐波那契数列变形
    poj 1061 青蛙的约会+拓展欧几里得+题解
    Leading and Trailing LightOJ
    HDU-1576 A/B 基础数论+解题报告
    swal() 弹出层的用法
    jqurey.running.min.js运动的字体效果
    echarts中dataZoom的使用
    echarts动态添加数据
    设备适配尺寸
    sublime Text3 插件
  • 原文地址:https://www.cnblogs.com/HD/p/3630751.html
Copyright © 2020-2023  润新知