zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    如何用VSCode编写Java程序
    使用Xcode + Python进行IOS运动轨迹模拟
    聚类(Clustering)
    异常值(outlier)
    线性回归(regression)
    自适应增强(Adaptive Boosting)
    决策树(Decision Trees)
    支持向量机(SVM)
    朴素贝叶斯(Naive Bayesian)
    ItChat与图灵机器人的结合
  • 原文地址:https://www.cnblogs.com/HD/p/3630751.html
Copyright © 2011-2022 走看看