重写了一下菜单，基本完成路由跳转
This commit is contained in:
luchenqun
parent
2136ecb870
commit
eafd1a4035
|
|
@ -14,42 +14,40 @@
|
||||||
|
|
||||||
<body ng-app="bookmarkApp">
|
<body ng-app="bookmarkApp">
|
||||||
<div class="ui container ">
|
<div class="ui container ">
|
||||||
<div id="header">
|
<div id="header" class="js-menu" ng-controller="menuCtr">
|
||||||
<div class="wrap">
|
<div class="ui small menu js-login-in" ng-show="login">
|
||||||
<div class="ui small menu js-logged-in">
|
<a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title}}</a>
|
||||||
<a class="item active" ui-sref="bookmarks">我的书签</a>
|
<div class="right menu">
|
||||||
<a class="item" ui-sref="tags">书签分类</a>
|
<div class="ui dropdown item">
|
||||||
<a class="item" ui-sref="advice">建议</a>
|
<div class="text">搜索设置</div>
|
||||||
<a class="item" ui-sref="settings">设置</a>
|
<i class="dropdown icon"></i>
|
||||||
<div class="right menu">
|
<div class="menu">
|
||||||
<div class="ui dropdown item">
|
<div class="item">自己书签</div>
|
||||||
<div class="text">搜索设置</div>
|
<div class="item">全站书签</div>
|
||||||
<i class="dropdown icon"></i>
|
|
||||||
<div class="menu">
|
|
||||||
<div class="item">自己书签</div>
|
|
||||||
<div class="item">全站书签</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui category right search item">
|
|
||||||
<div class="ui transparent icon input">
|
|
||||||
<input class="prompt" type="text" placeholder="请输入书签的Url...">
|
|
||||||
<i class="search link icon"></i>
|
|
||||||
</div>
|
|
||||||
<div class="results"></div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="ui button">添加书签</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="ui button">退出</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ui category right search item">
|
||||||
|
<div class="ui transparent icon input">
|
||||||
|
<input class="prompt" type="text" placeholder="请输入书签的Url...">
|
||||||
|
<i class="search link icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="results"></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="ui button">添加书签</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="ui button">退出</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="ui horizontal list">
|
</div>
|
||||||
<div class="item"><a href="/login" id="btn-login">登陆</a></div>
|
<div class="ui small menu js-not-login-in" ng-hide="login">
|
||||||
|
<a class="item" ng-class="{active:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
|
||||||
|
<div class="right menu">
|
||||||
|
<div class="item">
|
||||||
|
<div class="ui button">登陆</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="/" id="btn-home"><img src="/images/logo.png" alt="bookmarkly" /></a> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui container" style="width:100%;height:20px"> </div>
|
<div class="ui container" style="width:100%;height:20px"> </div>
|
||||||
|
|
@ -64,6 +62,7 @@
|
||||||
<script src="/scripts/app-angular.js"></script>
|
<script src="/scripts/app-angular.js"></script>
|
||||||
<script src="/scripts/services/bookmark-services.js"></script>
|
<script src="/scripts/services/bookmark-services.js"></script>
|
||||||
<script src="/scripts/controllers/bookmarks-controller.js"></script>
|
<script src="/scripts/controllers/bookmarks-controller.js"></script>
|
||||||
|
<script src="/scripts/controllers/menu-controller.js"></script>
|
||||||
<script src="/scripts/externe/semantic.min.js"></script>
|
<script src="/scripts/externe/semantic.min.js"></script>
|
||||||
<script src="/scripts/semantic-init.js"></script>
|
<script src="/scripts/semantic-init.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ app.config(function ($stateProvider, $urlRouterProvider) {
|
||||||
url:'/bookmarks',
|
url:'/bookmarks',
|
||||||
templateUrl: '/views/bookmarks.html',
|
templateUrl: '/views/bookmarks.html',
|
||||||
// controllerAs: 'bookmarksCtrl',
|
// controllerAs: 'bookmarksCtrl',
|
||||||
controller: 'bookmarksController'
|
controller: 'bookmarksCtr'
|
||||||
})
|
})
|
||||||
.state('tags', {
|
.state('tags', {
|
||||||
url:'/tags',
|
url:'/tags',
|
||||||
|
|
@ -23,6 +23,14 @@ app.config(function ($stateProvider, $urlRouterProvider) {
|
||||||
url:'/settings',
|
url:'/settings',
|
||||||
templateUrl: '/views/settings.html',
|
templateUrl: '/views/settings.html',
|
||||||
})
|
})
|
||||||
|
.state('register', {
|
||||||
|
url:'/register',
|
||||||
|
templateUrl: '/views/register.html'
|
||||||
|
})
|
||||||
|
.state('intro', {
|
||||||
|
url:'/intro',
|
||||||
|
templateUrl: '/views/intro.html'
|
||||||
|
})
|
||||||
.state('/', {
|
.state('/', {
|
||||||
url:'/',
|
url:'/',
|
||||||
templateUrl: '/views/intro.html'
|
templateUrl: '/views/intro.html'
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,14 @@
|
||||||
app.controller('bookmarksController', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
|
app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
|
||||||
'use strict';
|
$scope.bookmarks = []; // 书签数据
|
||||||
|
|
||||||
// var todoList = this;
|
|
||||||
//
|
|
||||||
// // Retrieve data from mongodb, by angular service.
|
|
||||||
// var todos = todoList.todos = [];
|
|
||||||
$scope.bookmarks = []
|
|
||||||
bookmarkService.getBookmarks()
|
|
||||||
.then(function(data) {
|
|
||||||
console.log(data);
|
|
||||||
$scope.bookmarks = data;
|
|
||||||
},
|
|
||||||
function(errorMsg) {
|
|
||||||
console.log(errorMsg);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// 获取书签数据
|
||||||
|
bookmarkService.getBookmarks().then(
|
||||||
|
function(data) {
|
||||||
|
console.log(data);
|
||||||
|
$scope.bookmarks = data;
|
||||||
|
},
|
||||||
|
function(errorMsg) {
|
||||||
|
console.log(errorMsg);
|
||||||
|
}
|
||||||
|
);
|
||||||
}]);
|
}]);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
app.controller('menuCtr', ['$scope', '$state', function($scope, $state) {
|
||||||
|
$scope.login = true; /**< 是否登陆 */
|
||||||
|
$scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
|
||||||
|
$scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
|
||||||
|
|
||||||
|
// 登陆之后显示的菜单数据。uiSerf：内部跳转链接。
|
||||||
|
$scope.loginMenus = [
|
||||||
|
{uiSref:'bookmarks', title:'我的书签'},
|
||||||
|
{uiSref:'tags', title:'书签分类'},
|
||||||
|
{uiSref:'advice', title:'建议'},
|
||||||
|
{uiSref:'settings', title:'设置'},
|
||||||
|
{uiSref:'intro', title:'说明'}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 未登陆显示的菜单数据
|
||||||
|
$scope.notLoginMenus = [
|
||||||
|
{uiSref:'intro', title:'说明'},
|
||||||
|
{uiSref:'register', title:'注册'}
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @func
|
||||||
|
* @desc 根据点击的菜单，更新选择的索引
|
||||||
|
* @param {number} index - 点击的索引
|
||||||
|
* @param {bool} login - 登陆标志
|
||||||
|
*/
|
||||||
|
$scope.selectMenu = function(index, login){
|
||||||
|
if (login) {
|
||||||
|
$scope.selectLoginIndex = index;
|
||||||
|
} else {
|
||||||
|
$scope.selectNotLoginIndex = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
app.factory('bookmarkService', ['$http', '$q', function($http, $q){
|
app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// service interface
|
// service interface
|
||||||
var service = {
|
var service = {
|
||||||
getBookmarks: getBookmarks,
|
getBookmarks: getBookmarks,
|
||||||
// addBookmark: addBookmark,
|
// addBookmark: addBookmark,
|
||||||
// delBookmark: delBookmark,
|
// delBookmark: delBookmark,
|
||||||
// editBookmark: editBookmark,
|
// editBookmark: editBookmark,
|
||||||
// register: register
|
// register: register
|
||||||
};
|
};
|
||||||
|
|
||||||
// Return a promise object.
|
// Return a promise object.
|
||||||
function getBookmarks(){
|
function getBookmarks() {
|
||||||
var def = $q.defer();
|
var def = $q.defer();
|
||||||
|
|
||||||
$http.get('/api/bookmarks')
|
$http.get('/api/bookmarks')
|
||||||
.success(function(data){
|
.success(function(data) {
|
||||||
def.resolve(data);
|
def.resolve(data);
|
||||||
})
|
})
|
||||||
.error(function(data){
|
.error(function(data) {
|
||||||
console.log('Error: ' + data);
|
console.log('Error: ' + data);
|
||||||
def.reject('Failed to get todos');
|
def.reject('Failed to get todos');
|
||||||
});
|
});
|
||||||
|
|
||||||
return def.promise;
|
return def.promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return service;
|
return service;
|
||||||
}]);
|
}]);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<p> 这是注册界面 </p>
|
||||||
Loading…
Reference in New Issue