AngluarJS - 路由

看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
 
    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#!/computers">电脑</a></li>
    </ul>
     
    <div ng-view></div>
    <script>
        var dubbokeeper=angular.module("routingDemoApp",['statistics']);
    </script>
    <script type="text/javascript" src="computer.js"></script>
</body>
</html>

相应： computer.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-app='computerApp'>
	<h1> computer </h1>
	{{text}}
<script>
  var computerApp = angular.module("computerApp",['ngRoute']);
</script>
</body>
</html>

相应：computer.js

var statistics = angular.module("statistics",['ngRoute']);
statistics.config(function($routeProvider){
	$routeProvider.when("/computers",{
	    templateUrl:"computer.html",
	    controller:"statisticsIndex" //在当前模版上执行的controller函数
	});
});
statistics.controller("statisticsIndex",function($scope){
    $scope.text = "thinkpad";
});

测试：

点击 电脑

此实例说明：$routeProvider 会将 controller 绑定到 当前模板上，而当前模板即是 statistics.config 的 statistics。通过这种方式 即使computer.html未定义 ng-app 也可以间接实现该功能。

posted on 2018-09-06 18:11  TrustNature  阅读(8)  评论(0)  编辑  收藏  举报