W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script> <body ng-app="myApp"> <p><a href="#/!">主页</a></p> <a href="#!london">城市 1</a> <a href="#!paris">城市 2</a> <p>点击链接。</p> <p>注意，每个“视图”都有自己的控制器，每个控制器都为“msg”变量赋值。</p> <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "/demo/angular/main.html", }) .when("/london", { templateUrl : "/demo/angular/london.html", controller : "londonCtrl" }) .when("/paris", { templateUrl : "/demo/angular/paris.html", controller : "parisCtrl" }); }); app.controller("londonCtrl", function ($scope) { $scope.msg = "我爱伦敦"; }); app.controller("parisCtrl", function ($scope) { $scope.msg = "我爱巴黎"; }); </script> </body> </html>