Skip to content

Commit d17aacc

Browse files
tangguangyaotangguangyao
committed
首页异步加载内容，控制器间消息通信
1 parent 80b26c5 commit d17aacc

File tree

9 files changed

+550
-71
lines changed

9 files changed

+550
-71
lines changed

‎public/app/app.html

+16-36
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
//雪球接口长变化的参数
1818
</script>
1919
</head>
20-
<body ng-app="ngView">
21-
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
20+
<body ng-app="ngView" ng-controller='allCtrl'>
21+
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner" ng-controller='headerCtrl'>
2222
<div class="container">
2323
<div class="navbar-header">
2424
<a href="/" class="navbar-brand">Money</a>
@@ -38,13 +38,13 @@
3838
</ul>
3939
</li>
4040

41-
<!-- <li>
42-
<a href="people/<%= user.name %>">个人主页</a>
43-
</li> -->
41+
<li ng-show="showPeople">
42+
<a href="app/app.html#/#/people/{{ name }}">个人主页</a>
43+
</li>
4444

4545
</ul>
4646

47-
<div class="navbar-form navbar-right" id="isloginOut" style="display:none">
47+
<div class="navbar-form navbar-right" id="isloginOut" ng-show="ajaxLogin">
4848
<div class="form-group ">
4949
<input type="text" placeholder="用户名" class="form-control" id="headName">
5050
</div>
@@ -53,52 +53,32 @@
5353
</div>
5454
<button type="submit" class="btn btn-success" id="headerLogin">登陆</button>
5555
<a href="/login" class="btn btn-default" role="button">注册</a>
56-
</ul>
5756
</div>
58-
<ul class="nav navbar-nav navbar-right" id="islogin">
59-
<li class="dropdown">
60-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="headShowName" top="top" login="in">name</span><b class="caret"></b></a>
61-
<ul class="dropdown-menu">
62-
<li><a href="setting">设置</a></li>
63-
<li><a id="loginOut" loginOut="target">注销</a></li>
64-
<!-- <li><a id="loginOut">注销</a></li> -->
65-
</ul>
66-
</li>
67-
</ul>
6857

69-
<!-- <div class="navbar-form navbar-right" id="isloginOut">
70-
<div class="form-group ">
71-
<input type="text" placeholder="用户名" class="form-control" id="headName">
72-
</div>
73-
<div class="form-group">
74-
<input type="password" placeholder="密码" class="form-control" id="headPassword">
75-
</div>
76-
<button type="submit" class="btn btn-success" id="headerLogin">登陆</button>
77-
<a href="/login" class="btn btn-default" role="button">注册</a>
78-
</ul>
79-
</div>
80-
<ul class="nav navbar-nav navbar-right" id="islogin" style="display:none">
58+
<ul class="nav navbar-nav navbar-right" id="islogin" ng-show="nameLogin">
8159
<li class="dropdown">
82-
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="headShowName" login="out" ></span><b class="caret"></b></a>
60+
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="headShowName" top="top" login="in">{{ name }}</span><b class="caret"></b></a>
8361
<ul class="dropdown-menu">
84-
<li><a href="/baike">设置</a></li>
85-
<li><a id="loginOut">注销</a></li>
62+
<li><a href="app/app.html#/setting">设置</a></li>
63+
<!-- <li><a id="loginOut" loginOut="target"">注销</a></li> -->
64+
<li><a id="loginOut" ng-click="loginOut()">注销</a></li>
8665
</ul>
8766
</li>
8867
</ul>
89-
-->
90-
</nav>
9168

69+
</nav>
9270
</div>
9371
</header>
94-
95-
<script src="js/min/header.min.js"></script>
72+
<!--
73+
<script src="js/header.js"></script> -->
9674

9775
<div ng-view></div>
9876

9977

10078

10179
<script src="js/app/controllers.js"></script>
80+
<script src="js/app/topic.js"></script>
81+
<script src="js/app/header.js"></script>
10282
<script src="js/app/login.js"></script>
10383
<script src="js/app/index.js"></script>
10484
</body>

‎public/app/index.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,7 @@ <h3>发布评论</h3>
6464
</ul>
6565

6666
<div class="tab-content">
67-
<div class="tab-pane active" id="home">
68-
<%- include mode/topic %>
69-
</div>
67+
<div class="tab-pane active" id="home" ng-include="'app/mode/topic.html'" ng-controller="topic"></div>
7068
<div class="tab-pane" id="stock">
7169
<%- include mode/aboutstocktopic %>
7270
</div>
@@ -112,7 +110,7 @@ <h3>推荐</h3>
112110
</ul>
113111

114112
<h3>推荐用户</h3>
115-
<ul class="list-group">
113+
<ul class="list-group" ng-controller='topUser'>
116114
<li class="list-group-item" ng-repeat="people in peoples">
117115
<a href="people/{{ people.name }}">{{ people.name }}({{ people.top }})</a>
118116
<button type="button" class="btn btn-danger btn-xs pull-right" ng-click="topPeople(people)" ng-hide="{{people.isWatch}}">关注</button>

‎public/app/mode/topic.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<ul class="list-group">
2+
3+
<!-- 第一层循环 -->
4+
5+
<li class="myTopiclist" ng-repeat="myTopic in aboutTopicList">
6+
<div class="myTopic">
7+
<img width="45" heigth="45" ng-src="{{ '/images/user/small/pic_' + myTopic.name +'.jpg' }}" />
8+
<a ng-href="{{ '/people/' + myTopic.name }}">{{myTopic.name}}</a>: {{myTopic.topic}}
9+
</div>
10+
<div class="forwardTopic" ng-show="{{myTopic.isForward}}">
11+
<span>{{myTopic.forwardObj.name}}</span>
12+
<p>{{myTopic.forwardObj.topic}}({{myTopic.forwardObj.time}})</p>
13+
</div>
14+
<div class="tool">
15+
<div class="tool-time">{{myTopic.time}}</div>
16+
<div class="tool-do">
17+
<span>转发({{myTopic.forward}})</span>
18+
<span ng-click="commentTopic(myTopic,$event)" class="toolComment" data-first="yes">评论(<em>{{myTopic.comment}}</em>)</span>
19+
</div>
20+
</div>
21+
<div class="topicComment" ng-show="myTopic.toCoShow">
22+
<textarea class="topicCommentText" ng-model="myTopic.topicCommentText"></textarea>
23+
<div>
24+
<span><input type="checkbox" ng-model="myTopic.ifForward"/>同时转发到我的微博</span>
25+
<button type="button" class="btn btn-primary navbar-right btn-xs" ng-click="submitComAboutTopic($event,myTopic)">评论</button>
26+
</div>
27+
<ul class="topicCommentlist" data-show="0">
28+
29+
<!-- 第二层循环 -->
30+
31+
<li ng-repeat="comment in myTopic.comlist">
32+
<div class="CommentlistCom">
33+
<div class="CommentlistPic"><img width="30" heigth="30" ng-src="{{ '/images/user/small/pic_' + comment.name +'.jpg' }}" /></div>
34+
<p><a ng-href="{{ '/people/' + comment.name }}">{{comment.name}}</a>:{{comment.topic}}({{comment.time}})</p>
35+
<span class="clickRe" ng-click="comRe(comment)">回复</span>
36+
<div style="clear:both"></div>
37+
<div class="commentRe" ng-show="comment.reShow">
38+
<textarea ng-model="comment.commentReText"></textarea>
39+
<div>
40+
<span><input type="checkbox" ng-model="myTopic.ifForwardRe"/>同时转发到我的微博</span>
41+
<button type="button" class="btn btn-primary navbar-right btn-xs" ng-click="comAboutRe(comment,myTopic)">评论</button>
42+
</div>
43+
</div>
44+
</div>
45+
</li>
46+
47+
<!-- 第二层循环结束 -->
48+
49+
</ul>
50+
</div>
51+
</li>
52+
53+
<!-- 第一层循环结束 -->
54+
55+
</ul>
56+
<div id="aboutTopicGetmore" ng-show="aboutTopicGetmore" num="1" ng-click="getAboutMore($event)">加载更多</div>
57+
<!-- <script src="js/tgy/topicabout.js"></script> -->

‎public/js/app/controllers.js

+37-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ var app=angular.module('ngView', ['ngRoute']);
22

33
app.config(function($routeProvider) {
44
$routeProvider.when('/index', {
5-
templateUrl: 'app/index.html'
5+
templateUrl: 'app/index.html',
6+
controller:indexCtrl
67
});
78
$routeProvider.when('/login', {
89
templateUrl: 'app/login.html',
@@ -11,16 +12,24 @@ app.config(function($routeProvider) {
1112
$routeProvider.when('/stock', {
1213
templateUrl: 'app/stock.html'
1314
});
14-
$routeProvider.when('/people', {
15+
$routeProvider.when('/people/:name', {
1516
templateUrl: 'app/people.html'
1617
});
17-
$routeProvider.when('/setting/:name', {
18+
$routeProvider.when('/setting', {
1819
templateUrl: 'app/setting.html',
1920
controller:settingCtrl
2021
});
2122
});
2223

24+
//顶部作用域
25+
function allCtrl($scope){
26+
$scope.$on("loginIn",function (event,msg) {
27+
$scope.$broadcast("loginInok", msg);
28+
});
29+
}
30+
2331

32+
//全局身份验证
2433
app.factory('User', [function() {
2534
User={
2635
set:function(info){
@@ -30,13 +39,36 @@ app.factory('User', [function() {
3039
return this.info;
3140
}
3241
}
42+
//验证是否登录（身份验证）,这里使用ajax同步请求，阻塞下js执行
43+
$.ajax({ type: "get", url: "/isOnline", async:false, success: function(data){
44+
if(data.ok){
45+
User.set(data.info)
46+
}
47+
}});
3348
return User;
3449
}]);
3550

51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
68+
69+
3670

3771

3872
function settingCtrl($scope, $routeParams) {
3973
$scope.name = $routeParams.name;
40-
41-
4274
}

‎public/js/app/header.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
//顶部用户名显示
2+
function headerCtrl($scope,$http,$location,User){
3+
$scope.showPeople=false;
4+
5+
$scope.ajaxLogin=false;
6+
$scope.nameLogin=false;
7+
8+
var userInfo=User.get();
9+
if(userInfo){
10+
$scope.name=userInfo.name;
11+
$scope.showPeople=true;
12+
}
13+
14+
$scope.loginOut=function(){
15+
$http.get("/loginOut").success(function(data, status){
16+
if(data.ok){
17+
User.set(null);
18+
$scope.showPeople=false;
19+
20+
$scope.ajaxLogin=false;
21+
$scope.nameLogin=false;
22+
23+
$location.path("/login");
24+
}
25+
});
26+
}
27+
28+
//订阅收到消息信息
29+
$scope.$on("loginInok",function (event,msg) {
30+
$scope.name=msg.name;
31+
$scope.nameLogin=true;
32+
});
33+
34+
}

0 commit comments

Comments
 (0)