重写了一下菜单，基本完成路由跳转
This commit is contained in:
luchenqun
parent
2136ecb870
commit
eafd1a4035
|
|
@ -14,42 +14,40 @@
|
|||
|
||||
<body ng-app="bookmarkApp">
|
||||
<div class="ui container ">
|
||||
<div id="header">
|
||||
<div class="wrap">
|
||||
<div class="ui small menu js-logged-in">
|
||||
<a class="item active" ui-sref="bookmarks">我的书签</a>
|
||||
<a class="item" ui-sref="tags">书签分类</a>
|
||||
<a class="item" ui-sref="advice">建议</a>
|
||||
<a class="item" ui-sref="settings">设置</a>
|
||||
<div class="right menu">
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">搜索设置</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 id="header" class="js-menu" ng-controller="menuCtr">
|
||||
<div class="ui small menu js-login-in" ng-show="login">
|
||||
<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>
|
||||
<div class="right menu">
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">搜索设置</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 class="ui horizontal list">
|
||||
<div class="item"><a href="/login" id="btn-login">登陆</a></div>
|
||||
</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>
|
||||
|
||||
<a href="/" id="btn-home"><img src="/images/logo.png" alt="bookmarkly" /></a> -->
|
||||
</div>
|
||||
</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/services/bookmark-services.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/semantic-init.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ app.config(function ($stateProvider, $urlRouterProvider) {
|
|||
url:'/bookmarks',
|
||||
templateUrl: '/views/bookmarks.html',
|
||||
// controllerAs: 'bookmarksCtrl',
|
||||
controller: 'bookmarksController'
|
||||
controller: 'bookmarksCtr'
|
||||
})
|
||||
.state('tags', {
|
||||
url:'/tags',
|
||||
|
|
@ -23,6 +23,14 @@ app.config(function ($stateProvider, $urlRouterProvider) {
|
|||
url:'/settings',
|
||||
templateUrl: '/views/settings.html',
|
||||
})
|
||||
.state('register', {
|
||||
url:'/register',
|
||||
templateUrl: '/views/register.html'
|
||||
})
|
||||
.state('intro', {
|
||||
url:'/intro',
|
||||
templateUrl: '/views/intro.html'
|
||||
})
|
||||
.state('/', {
|
||||
url:'/',
|
||||
templateUrl: '/views/intro.html'
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
app.controller('bookmarksController', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
|
||||
'use strict';
|
||||
|
||||
// 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);
|
||||
});
|
||||
app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
|
||||
$scope.bookmarks = []; // 书签数据
|
||||
|
||||
// 获取书签数据
|
||||
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){
|
||||
'use strict';
|
||||
app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
|
||||
'use strict';
|
||||
|
||||
// service interface
|
||||
var service = {
|
||||
getBookmarks: getBookmarks,
|
||||
// addBookmark: addBookmark,
|
||||
// delBookmark: delBookmark,
|
||||
// editBookmark: editBookmark,
|
||||
// register: register
|
||||
};
|
||||
// service interface
|
||||
var service = {
|
||||
getBookmarks: getBookmarks,
|
||||
// addBookmark: addBookmark,
|
||||
// delBookmark: delBookmark,
|
||||
// editBookmark: editBookmark,
|
||||
// register: register
|
||||
};
|
||||
|
||||
// Return a promise object.
|
||||
function getBookmarks(){
|
||||
var def = $q.defer();
|
||||
// Return a promise object.
|
||||
function getBookmarks() {
|
||||
var def = $q.defer();
|
||||
|
||||
$http.get('/api/bookmarks')
|
||||
.success(function(data){
|
||||
def.resolve(data);
|
||||
})
|
||||
.error(function(data){
|
||||
console.log('Error: ' + data);
|
||||
def.reject('Failed to get todos');
|
||||
});
|
||||
$http.get('/api/bookmarks')
|
||||
.success(function(data) {
|
||||
def.resolve(data);
|
||||
})
|
||||
.error(function(data) {
|
||||
console.log('Error: ' + data);
|
||||
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