Still Moving

Angular路由

Angular Route

单页面应用程序中需要根据url变化来分配不同的资源 页面上显示相应的信息。

小demo：

html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div ng-app="myApp">
  <ul>
      <li><a href="#/find">发现音乐</a></li>
      <li><a href="#/mine">我的音乐</a></li>
      <li><a href="#/friend">我的朋友</a></li>
  </ul>
<div ng-view>现音乐</a></li>
</div>
<script src="./angular.js"></script>
<script src="./angular-route.js"></script>
<script src="./friendModule.js"></script>
<script src="./mineModule.js"></script>
<script src="./findModule.js"></script>
<script>
    var myApp = angular.module('myApp', ['ngRoute', 'friendModule', 'mineModule', 'findModule']);
</script>
发现音乐模块js代码：利用get请求得到数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var findModule = angular.module('findModule', []);
findModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/find', {
            templateUrl: './find.html',
            controller: 'findController'
        })
}])
findModule.controller('findController', ['$scope', '$http', function ($scope) {
    // $scope.title = '发现音乐';
    $http.get('./02.find.json').then(function (res) {
        $scope.title = res.data.data;
    });
}])

02.find.json 代码

1
2
3
{
    "data":"这是发现音乐"
}

template 模板html代码

1
<h3>{{title}}</h3>

一个页面一个链接对应一个路由。