Skip to content

Commit 0b4b4dc

Browse files
author
linwenshuo
committedApr 24, 2018
feat(SPA): dev 5 independent modules and connect them by router
1 parent 06606f2 commit 0b4b4dc

18 files changed

+521
-46
lines changed
 

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ http-server
1313
- [ ] Skills List(in different version)
1414
- [ ] Hagberrys List
1515
- [ ] Props List
16-
- [ ] Masters List
16+
- [ ] Games List
1717

1818
## Study Angular1.x
1919

‎app.js

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,21 @@
11
(function () {
22
'use strict';
3-
angular.module('pokemon-app', ['ngRoute'])
4-
.controller('AppController', AppController)
5-
.controller('PMListController', PMListController)
6-
.controller('PMDetailController', PMDetailController)
7-
8-
.config (function ($routeProvider) {
3+
angular.module('pokemon-app', [
4+
'ngRoute',
5+
'pokemon-app.pokemon', // 添加依赖
6+
'pokemon-app.skill',
7+
'pokemon-app.hagberry',
8+
'pokemon-app.prop',
9+
'pokemon-app.game'
10+
])
11+
.config (['$routeProvider', function ($routeProvider) {
912
$routeProvider
10-
.when('/', {
11-
templateUrl: 'pokemon/pm-list.html',
12-
controller: 'PMListController'
13-
})
14-
.when('/pokemon/:no', {
15-
templateUrl: 'pokemon/pm-detail.html',
16-
controller: 'PMDetailController'
17-
})
18-
.otherwise({
19-
redirectTo: '/'
13+
.otherwise({
14+
redirectTo: '/pokemons' // 初始化直接跳转到pokemon模块
2015
});
21-
});
22-
23-
var pokemons = [
24-
{ no:'001', name:'妙蛙种子', count: 1, weight: 6.9, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
25-
{ no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
26-
{ no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
27-
{ no:'004', name:'小火龙', count: 1, weight: 8.5, property: '火', type: '蜥蜴宝可梦', character: { common: '猛火', conceal: '太阳之力'}},
28-
{ no:'025', name:'皮卡丘', count: 1, weight: 6, property: '电', type: '鼠宝可梦', character: { common: '静电', conceal: '避雷针'}}
29-
];
16+
}])
17+
.controller('AppController', AppController);
3018

3119
AppController.$inject = ['$scope'];
3220
function AppController ($scope) {}
33-
34-
PMListController.$inject = ['$scope'];
35-
function PMListController ($scope) {
36-
$scope.pokemons = pokemons;
37-
$scope.remove = function (index) {
38-
$scope.pokemons.splice(index, 1);
39-
}
40-
}
41-
42-
PMDetailController.$inject = ['$scope', '$routeParams'];
43-
function PMDetailController ($scope, $routeParams) {
44-
console.log('$routeParams:', $routeParams);
45-
angular.forEach(pokemons, function (element) {
46-
if (element.no === $routeParams.no) {
47-
$scope.pokemon = element;
48-
console.log('the match pokemon:', $scope.pokemon);
49-
}
50-
});
51-
}
5221
})();

‎game/game-detail.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h2>游戏详情</h2>
2+
<p><b>中文名: </b>{{game.name.cn}}</p>
3+
<p><b>日文名: </b>{{game.name.jp}}</p>
4+
<p><b>英文名: </b>{{game.name.en}}</p>
5+
<p><b>平台: </b>{{game.platform}}</p>
6+
<p>
7+
<b>发售时间: </b>
8+
<ul>
9+
<li>日本发售时间：{{game.pubDate.jp}}</li>
10+
<li>北美发售时间：{{game.pubDate.na}}</li>
11+
<li>欧洲发售时间：{{game.pubDate.eu}}</li>
12+
</ul>
13+
</p>
14+
15+
<a href="/#!/games">返回列表</a>

‎game/game-list.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h2>游戏详情</h2>
2+
<table>
3+
<tr>
4+
<th>序号</th>
5+
<th>名称</th>
6+
<th>平台</th>
7+
<th>操作</th>
8+
</tr>
9+
<tr ng-repeat="game in games">
10+
<td>{{$index}}</td>
11+
<td><a href="/#!/game/{{game.id}}">{{game.name.cn}}</a></td>
12+
<td>{{game.platform}}</td>
13+
<td><button ng-click="remove($index)">删除</button></td>
14+
</tr>
15+
</table>

‎game/game.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
(function () {
2+
'use strict';
3+
angular.module('pokemon-app.game', ['ngRoute'])
4+
.config(['$routeProvider', function ($routeProvider) {
5+
$routeProvider
6+
.when('/games', {
7+
templateUrl: 'game/game-list.html',
8+
controller: 'GameListController'
9+
}).when('/game/:id', {
10+
templateUrl: 'game/game-detail.html',
11+
controller: 'GameDetailController'
12+
});
13+
}])
14+
.controller('GameListController', GameListController)
15+
.controller('GameDetailController', GameDetailController);
16+
17+
var games = [
18+
{
19+
id: 1,
20+
name: {
21+
cn: '精灵宝可梦红绿版（日本）',
22+
jp: '',
23+
en: ''
24+
},
25+
platform: 'GB',
26+
pubDate: {
27+
jp: '1996–02–27',
28+
na: '',
29+
eu: ''
30+
}
31+
},
32+
{
33+
id: 2,
34+
name: {
35+
cn: '精灵宝可梦蓝版（日本）',
36+
jp: '',
37+
en: ''
38+
},
39+
platform: 'GB',
40+
pubDate: {
41+
jp: '1999–10–10',
42+
na: '',
43+
eu: ''
44+
}
45+
},
46+
{
47+
id: 3,
48+
name: {
49+
cn: '精灵宝可梦红蓝版（欧美）',
50+
jp: '',
51+
en: ''
52+
},
53+
platform: 'GB',
54+
pubDate: {
55+
jp: '',
56+
na: '1998–09–01',
57+
eu: '1999–10–05'
58+
}
59+
},
60+
{
61+
id: 4,
62+
name: {
63+
cn: '宝可梦竞技场',
64+
jp: '',
65+
en: ''
66+
},
67+
platform: 'N64',
68+
pubDate: {
69+
jp: '1998–08–01',
70+
na: '',
71+
eu: ''
72+
}
73+
}
74+
];
75+
76+
GameListController.$inject = ['$scope'];
77+
function GameListController ($scope) {
78+
$scope.games = games;
79+
$scope.remove = function (index) {
80+
$scope.games.splice(index, 1);
81+
};
82+
};
83+
84+
GameDetailController.$inject = ['$scope', '$routeParams'];
85+
function GameDetailController ($scope, $routeParams) {
86+
var id = parseInt($routeParams.id);
87+
angular.forEach(games, function (element) {
88+
if (element.id === id) {
89+
$scope.game = element;
90+
console.log(element);
91+
}
92+
});
93+
};
94+
})();

‎hagberry/hagberry-detail.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<h2>树果详情</h2>
2+
<p><b>中文名: </b>{{hagberry.name.cn}}</p>
3+
<p><b>日文名: </b>{{hagberry.name.jp}}</p>
4+
<p><b>英文名: </b>{{hagberry.name.en}}</p>
5+
<p><b>版本: </b>{{hagberry.version}}</p>
6+
<p><b>道具说明: </b>{{hagberry.desc}}</p>
7+
8+
<a href="/#!/hagberrys">返回列表</a>

‎hagberry/hagberry-list.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h2>树果详情</h2>
2+
<table>
3+
<tr>
4+
<th>名称</th>
5+
<th>版本</th>
6+
<th>道具说明</th>
7+
<th>操作</th>
8+
</tr>
9+
<tr ng-repeat="hagberry in hagberrys">
10+
<td><a href="/#!/hagberry/{{hagberry.id}}">{{hagberry.name.cn}}</a></td>
11+
<td>{{hagberry.version}}</td>
12+
<td>{{hagberry.desc}}</td>
13+
<td><button ng-click="remove($index)">删除</button></td>
14+
</tr>
15+
</table>

‎hagberry/hagberry.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
(function () {
2+
'use strict';
3+
angular.module('pokemon-app.hagberry', ['ngRoute'])
4+
.config(['$routeProvider', function ($routeProvider) {
5+
$routeProvider
6+
.when('/hagberrys', {
7+
templateUrl: 'hagberry/hagberry-list.html',
8+
controller: 'HagberryListController'
9+
}).when('/hagberry/:id', {
10+
templateUrl: 'hagberry/hagberry-detail.html',
11+
controller: 'HagberryDetailController'
12+
});
13+
}])
14+
.controller('HagberryListController', HagberryListController)
15+
.controller('HagberryDetailController', HagberryDetailController);
16+
17+
var hagberrys = [
18+
{
19+
id: 1,
20+
name: {
21+
cn: '树果',
22+
jp: 'きのみ',
23+
en: 'Berry'
24+
},
25+
version: '第二世代',
26+
desc: '携带后，可以回复自己１０点体力'
27+
},
28+
{
29+
id: 2,
30+
name: {
31+
cn: '黄金的果实',
32+
jp: 'おうごんのみ',
33+
en: 'Gold Berry'
34+
},
35+
version: '第二世代',
36+
desc: '携带后，可以回复自己３０点体力'
37+
},
38+
{
39+
id: 3,
40+
name: {
41+
cn: '樱子果',
42+
jp: 'クラボのみ',
43+
en: 'Cheri Berry'
44+
},
45+
version: '第三世代',
46+
desc: '让宝可梦携带后，可以治愈麻痹'
47+
},
48+
{
49+
id: 4,
50+
name: {
51+
cn: '零余果',
52+
jp: 'カゴのみ',
53+
en: 'Chesto Berry'
54+
},
55+
version: '第三世代',
56+
desc: '让宝可梦携带后，可以治愈睡眠'
57+
}
58+
];
59+
60+
HagberryListController.$inject = ['$scope'];
61+
function HagberryListController ($scope) {
62+
$scope.hagberrys = hagberrys;
63+
$scope.remove = function (index) {
64+
$scope.hagberrys.splice(index, 1);
65+
};
66+
};
67+
68+
HagberryDetailController.$inject = ['$scope', '$routeParams'];
69+
function HagberryDetailController ($scope, $routeParams) {
70+
console.log('$routeParams.id: ', $routeParams.id);
71+
var id = parseInt($routeParams.id);
72+
angular.forEach(hagberrys, function (element) {
73+
if (element.id === id) {
74+
$scope.hagberry = element;
75+
console.log(element);
76+
}
77+
});
78+
};
79+
})();

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,24 @@
77
<title>口袋妖怪</title>
88
<script src="libs/angular.js"></script>
99
<script src="libs/angular-route.js"></script>
10+
<script src="pokemon/pokemon.js"></script>
11+
<script src="skill/skill.js"></script>
12+
<script src="hagberry/hagberry.js"></script>
13+
<script src="prop/prop.js"></script>
14+
<script src="game/game.js"></script>
1015
<script src="app.js"></script>
1116
<link rel="stylesheet" href="app.css"/>
1217
</head>
1318
<body ng-controller="AppController">
1419
<h1>口袋妖怪管理系统</h1>
20+
<div>
21+
<h2>快速导航：</h2>
22+
<a href="/#!/pokemons">口袋妖怪</a>
23+
<a href="/#!/skills">技能</a>
24+
<a href="/#!/hagberrys">树果</a>
25+
<a href="/#!/props">道具</a>
26+
<a href="/#!/games">游戏</a>
27+
</div>
1528
<div ng-view></div>
1629
</body>
1730
</html>

‎pokemon/pm-detail.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<h2>口袋妖怪详情：</h2>
12
<p><b>编号: </b>No.{{pokemon.no}}</p>
23
<p><b>名称: </b>{{pokemon.name}}</p>
34
<p><b>体重: </b>{{pokemon.weight}}</p>
@@ -11,4 +12,4 @@
1112
</ul>
1213
</div>
1314

14-
<a href="/#!/pockmon">返回列表</a>
15+
<a href="/#!/pokemons">返回列表</a>

‎pokemon/pm-list.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<h2>口袋妖怪详情</h2>
12
<table>
23
<tr>
34
<th>名称</th>

‎pokemon/pokemon.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
(function () {
2+
'use strict';
3+
angular.module('pokemon-app.pokemon', ['ngRoute'])
4+
.config(['$routeProvider', function ($routeProvider) {
5+
$routeProvider
6+
.when('/pokemons', {
7+
templateUrl: 'pokemon/pm-list.html',
8+
controller: 'PMListController'
9+
})
10+
.when ('/pokemon/:no', {
11+
templateUrl: 'pokemon/pm-detail.html',
12+
controller: 'PMDetailController'
13+
})
14+
}])
15+
.controller('PMListController', PMListController)
16+
.controller('PMDetailController', PMDetailController);
17+
18+
19+
var pokemons = [
20+
{ no:'001', name:'妙蛙种子', count: 1, weight: 6.9, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
21+
{ no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
22+
{ no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '种子宝可梦', character: { common: '茂盛', conceal: '叶绿素'}},
23+
{ no:'004', name:'小火龙', count: 1, weight: 8.5, property: '火', type: '蜥蜴宝可梦', character: { common: '猛火', conceal: '太阳之力'}},
24+
{ no:'025', name:'皮卡丘', count: 1, weight: 6, property: '电', type: '鼠宝可梦', character: { common: '静电', conceal: '避雷针'}}
25+
];
26+
27+
PMListController.$inject = ['$scope'];
28+
function PMListController ($scope) {
29+
$scope.pokemons = pokemons;
30+
$scope.remove = function (index) {
31+
$scope.pokemons.splice(index, 1);
32+
}
33+
}
34+
35+
PMDetailController.$inject = ['$scope', '$routeParams'];
36+
function PMDetailController ($scope, $routeParams) {
37+
console.log('$routeParams:', $routeParams);
38+
angular.forEach(pokemons, function (element) {
39+
if (element.no === $routeParams.no) {
40+
$scope.pokemon = element;
41+
console.log('the match pokemon:', $scope.pokemon);
42+
}
43+
});
44+
}
45+
})();

‎prop/prop-detail.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<h2>道具详情</h2>
2+
<p><b>中文名: </b>{{prop.name.cn}}</p>
3+
<p><b>日文名: </b>{{prop.name.jp}}</p>
4+
<p><b>英文名: </b>{{prop.name.en}}</p>
5+
<p><b>类型: </b>{{prop.type}}</p>
6+
<p><b>版本: </b>{{prop.version}}</p>
7+
<p><b>道具说明: </b>{{prop.desc}}</p>
8+
9+
<a href="/#!/props">返回列表</a>

‎prop/prop-list.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<h2>道具详情</h2>
2+
<table>
3+
<tr>
4+
<th>序号</th>
5+
<th>名称</th>
6+
<th>类型</th>
7+
<th>道具说明</th>
8+
<th>操作</th>
9+
</tr>
10+
<tr ng-repeat="prop in props">
11+
<td>{{$index}}</td>
12+
<td><a href="/#!/prop/{{prop.id}}">{{prop.name.cn}}</a></td>
13+
<td>{{prop.type}}</td>
14+
<td>{{prop.desc}}</td>
15+
<td><button ng-click="remove($index)">删除</button></td>
16+
</tr>
17+
</table>

‎prop/prop.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('pokemon-app.prop', ['ngRoute'])
5+
.config(['$routeProvider', function ($routeProvider) {
6+
$routeProvider
7+
.when('/props',{
8+
templateUrl: 'prop/prop-list.html',
9+
controller: 'PropListController'
10+
})
11+
.when('/prop/:id', {
12+
templateUrl: 'prop/prop-detail.html',
13+
controller: 'PropDetailController'
14+
});
15+
}])
16+
.controller('PropListController', PropListController)
17+
.controller('PropDetailController', PropDetailController);
18+
19+
var props = [
20+
{
21+
id: 1,
22+
name: {
23+
cn: '除虫喷雾',
24+
jp: 'むしよけスプレー',
25+
en: 'Repel'
26+
},
27+
type: '野外道具',
28+
version: '-',
29+
desc: '使用后，在较短的一段时间内，弱小的野生宝可梦将完全不会出现'
30+
},
31+
{
32+
id: 2,
33+
name: {
34+
cn: '白银喷雾',
35+
jp: 'シルバースプレー',
36+
en: 'Super Repel'
37+
},
38+
type: '野外道具',
39+
version: '-',
40+
desc: '弱小的野生宝可梦将完全不会出现。效果比除虫喷雾更持久'
41+
},
42+
{
43+
id: 3,
44+
name: {
45+
cn: '黄金喷雾',
46+
jp: 'ゴールドスプレー',
47+
en: 'Max Repel'
48+
},
49+
type: '野外道具',
50+
version: '-',
51+
desc: '弱小的野生宝可梦将完全不会出现。效果比白银喷雾更持久'
52+
},
53+
{
54+
id: 4,
55+
name: {
56+
cn: '离洞绳',
57+
jp: 'あなぬけのヒモ',
58+
en: 'Escape Rope'
59+
},
60+
type: '野外道具',
61+
version: '-',
62+
desc: '结实的长绳。可以从洞窟或迷宫中脱身'
63+
}
64+
];
65+
66+
PropListController.$inject = ['$scope'];
67+
function PropListController ($scope) {
68+
$scope.props = props;
69+
$scope.remove = function (index) {
70+
$scope.props.splice(index, 1);
71+
};
72+
};
73+
74+
PropDetailController.$inject = ['$scope', '$routeParams'];
75+
function PropDetailController ($scope, $routeParams) {
76+
var id = parseInt($routeParams.id);
77+
angular.forEach(props, function (element) {
78+
if (element.id === id) {
79+
$scope.prop = element;
80+
}
81+
});
82+
};
83+
})();

‎skill/skill-detail.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<h2>技能详情</h2>
2+
<p><b>编号: </b>No.{{skill.no}}</p>
3+
<p><b>中文名: </b>{{skill.name.cn}}</p>
4+
<p><b>日文名: </b>{{skill.name.jp}}</p>
5+
<p><b>英文名: </b>{{skill.name.en}}</p>
6+
<p><b>属性: </b>{{skill.property}}</p>
7+
<p><b>分类: </b>{{skill.type}}</p>
8+
<p><b>威力: </b>{{skill.power}}</p>
9+
<p><b>命中: </b>{{skill.hitrate}}</p>
10+
<p><b>ＰＰ: </b>{{skill.pp}}</p>
11+
12+
13+
<a href="/#!/skills">返回列表</a>

‎skill/skill-list.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<h2>技能详情</h2>
2+
<table>
3+
<tr>
4+
<th>名称</th>
5+
<th>属性</th>
6+
<th>分类</th>
7+
<th>威力</th>
8+
<th>命中</th>
9+
<th>操作</th>
10+
</tr>
11+
<tr ng-repeat="skill in skills">
12+
<td><a href="/#!/skill/{{skill.no}}">{{skill.name.cn}}</a></td>
13+
<td>{{skill.property}}</td>
14+
<td>{{skill.type}}</td>
15+
<td>{{skill.power}}</td>
16+
<td>{{skill.hitrate}}</td>
17+
<td><button ng-click="remove($index)">删除</button></td>
18+
</tr>
19+
</table>

‎skill/skill.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
(function () {
2+
'use strict';
3+
angular.module('pokemon-app.skill', ['ngRoute'])
4+
.config(['$routeProvider', function ($routeProvider) {
5+
$routeProvider
6+
.when('/skills', {
7+
templateUrl: 'skill/skill-list.html',
8+
controller: 'SkillListController'
9+
})
10+
.when ('/skill/:no', {
11+
templateUrl: 'skill/skill-detail.html',
12+
controller: 'SkillDetailController'
13+
})
14+
}])
15+
.controller('SkillListController', SkillListController)
16+
.controller('SkillDetailController', SkillDetailController);
17+
18+
var skills = [
19+
{
20+
no: 1,
21+
name: {
22+
cn: '拍击',
23+
jp: 'はたく',
24+
en: 'Pound'
25+
},
26+
property: '一般',
27+
type: '物理',
28+
power: 40,
29+
hitrate: 100,
30+
pp: 35
31+
},
32+
{
33+
no: 2,
34+
name: {
35+
cn: '空手劈',
36+
jp: 'からてチョップ',
37+
en: 'Karate Chop'
38+
},
39+
property: '格斗',
40+
type: '物理',
41+
power: 50,
42+
hitrate: 100,
43+
pp: 25
44+
},
45+
{
46+
no: 3,
47+
name: {
48+
cn: '连环巴掌',
49+
jp: 'おうふくビンタ',
50+
en: 'Double Slap'
51+
},
52+
property: '一般',
53+
type: '物理',
54+
power: 15,
55+
hitrate: 85,
56+
pp: 10
57+
}
58+
];
59+
60+
SkillListController.$inject = ['$scope'];
61+
function SkillListController ($scope) {
62+
$scope.skills = skills;
63+
$scope.remove = function (index) {
64+
$scope.skills.splice(index, 1);
65+
}
66+
}
67+
68+
SkillDetailController.$inject = ['$scope', '$routeParams'];
69+
function SkillDetailController ($scope, $routeParams) {
70+
console.log('$routeParams:', $routeParams);
71+
var no = parseInt($routeParams.no);
72+
angular.forEach(skills, function (element) {
73+
if (element.no === no) {
74+
$scope.skill = element;
75+
console.log('the match skill:', $scope.skill);
76+
}
77+
});
78+
}
79+
})();

0 commit comments

Comments
 (0)
Please sign in to comment.