您的位置：首页 > Web前端 > JavaScript

angular.js路由配置基础案例

2017-03-30 00:00 555 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<!--1.加载angular-route文件-->
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>
</head>
<body >
<div ng-app="myApp">
<a href="#/menu">Menu</a>
<!--4.创建模板文件-->
<div ng-view=""></div>
<!--菜单-->
<script type="text/ng-template" id="menu.html" ng-controller="menuController">
<h1>我是menu页面内容</h1>
<img src="images/1.jpg"/>
<table border="1">
<thead>
<th>firstName</th>
<th>lastName</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee['firstName']}}</td>
<td>{{employee['lastName']}}</td>
</tr>
</tbody>
</table>
</script>
</div>
<script type="text/javascript">
//2.在应用中注入ngRoute
var myApp = angular.module("myApp",['ngRoute']);
//3.配置路由
myApp.config(function ($routeProvider) {
$routeProvider.when("/menu",{
templateUrl:'menu.html',
controller:"menuController"
})
})
myApp.controller("menuController",function ($scope,$http) {
$http.get("http://localhost:3000/api/2").success(function (data) {
$scope.employees = data['employees'];
})
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 路由 angular

相关文章推荐

新的分享

章节导航