<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ overflow: hidden; } li{ width: 100px; height: 40px; text-align: center; float: left; line-height: 40px; list-style: none; cursor: pointer; } li a{ text-decoration: none; color: black; } li:hover{ background-color: yellow; } #div1{ width: 1000px; height: 500px; margin: 20px auto; border: 2px solid red; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <ul> <li><a href="#/" >首页</a></li> <li><a href="#/page1" >page1</a></li> <li><a href="#/page2" >page2</a></li> <li><a href="#/page3" >page3</a></li> <li><a href="#/page4" >page4</a></li> </ul> <div ng-view></div> <jiang-hao></jiang-hao> <div jiang-hao></div> <div></div> </body> <script src="https://www.jb51.net/js/angular.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/angular-route.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("app",["ngRoute"]) .config(function($routeProvider){ $routeProvider .when("https://www.jb51.net/",{template:'<h1>这是首页</h1>'}) .when("/page1",{templateUrl:"page.html",controller:"ctrl1"}) .when("/page2",{templateUrl:"page.html",controller:function($scope){ $scope.text = "这是ctrl不知道是几控制器！！" }}) .when("/page3",{templateUrl:"page.html"}) .when("/page4",{}) .otherwise({redirectTo:"https://www.jb51.net/"}) }) .controller("ctrl",function($scope){ $scope.test = "这是一段测试文字！"; $scope.obj = { test:"这是一个测试对象！" } }) .controller("ctrl1",function($scope){ $scope.text = "这是ctrl1控制器！"; }) */ .directive("jiangHao",function(){ return { restrict : "EACM", replace:true, template:"<h1>这是一个自定义指令</h1>", } }) </script> </html>
效果图：
