zoukankan      html  css  js  c++  java
  • angular路由最基本的实例---简单易懂

    <!DOCTYPE html>
    <html lang="en" ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/angularjs.js"></script>
        <script src="../js/angular-route.min.js"></script>
        <style type="text/css">
            body{
                font-size: 32px;
            }
            .show{
                background: #eeeeee;
                padding: 8px;
                 500px;
                margin:8px 0px;
            }
        </style>
    </head>
    <body>
    <div>
        <div>
            <a href="#/">首页</a>
            <a href="#/book">图书</a>
            <a href="#/game">游戏</a>
        </div>
        <div ng-view></div>
    </div>
    </body>
    <script>
        var app=angular.module('myapp',['ngRoute']);
        app.controller('sub1',function($scope){
            $scope.title="老王1";
        });
        app.controller('sub2',function($scope){
            $scope.title="老王2";
        });
        app.controller('sub3',function($scope){
            $scope.title="老王3";
        });
        app.config(function($routeProvider) {
            $routeProvider.when('/',{
                controller:"sub1",
                template:"<div class='show'>{{title}}</div>"
            })
            .when('/book',{
                controller:"sub2",
                template:"<div class='show'>{{title}}</div>"
            })
            .when('/game',{
                controller:"sub3",
                template:"<div class='show'>{{title}}</div>"
            })
            .otherwise({ redirectTo: '/' });
        })
    </script>
    </html>

    angular-route.min.js是路由的插件

  • 相关阅读:
    Redis
    cut
    grep
    MySQL中EXPLAIN的解释
    MySQL数据类型
    有用的MySQL语句
    mysql函数
    memcache
    存储过程 游标的使用
    存储过程批量删除
  • 原文地址:https://www.cnblogs.com/null11/p/6228823.html
Copyright © 2011-2022 走看看