增加了详情搜索的search.html模板

2016-10-24 22:54:42 +08:00 · 2016-10-24 22:54:42 +08:00 · e1a6b26b1d
parent 6743d95211
commit e1a6b26b1d
13 changed files with 188 additions and 133 deletions
--- a/app.js
+++ b/app.js
@ -19,7 +19,9 @@ app.set('view engine', 'ejs');
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
 app.use(bodyParser.json());
-app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.urlencoded({
+    extended: false
+}));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

@ -29,9 +31,9 @@ app.use('/users', users);

 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
-  var err = new Error('Not Found');
-  err.status = 404;
-  next(err);
+    var err = new Error('Not Found');
+    err.status = 404;
+    next(err);
 });

 // error handlers
@ -39,23 +41,23 @@ app.use(function(req, res, next) {
 // development error handler
 // will print stacktrace
 if (app.get('env') === 'development') {
-  app.use(function(err, req, res, next) {
-    res.status(err.status || 500);
-    res.render('error', {
-      message: err.message,
-      error: err
+    app.use(function(err, req, res, next) {
+        res.status(err.status || 500);
+        res.render('error', {
+            message: err.message,
+            error: err
+        });
    });
-  });
 }

 // production error handler
 // no stacktraces leaked to user
 app.use(function(err, req, res, next) {
-  res.status(err.status || 500);
-  res.render('error', {
-    message: err.message,
-    error: {}
-  });
+    res.status(err.status || 500);
+    res.render('error', {
+        message: err.message,
+        error: {}
+    });
 });


--- a/public/index.html
+++ b/public/index.html
@ -12,47 +12,14 @@
    </head>
    <body ng-app="bookmarkApp">
        <div class="ui container ">
-            <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" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
-                        </div>
-                        <div class="item">
-                            <div class="ui button">退出</div>
-                        </div>
-                    </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>
-                </div>
-            </div>
+            <!-- directive：菜单 -->
+            <menus></menus>
            <div class="ui container" style="width:100%;height:20px"></div>
            <div class="ui container">
                <div ui-view></div>
            </div>
            <div class="foot"></div>
+            <!-- directive：书签编辑 -->
            <edit></edit>
        </div>
        <script src="/scripts/externe/jquery-3.1.1.min.js"></script>
@ -62,11 +29,11 @@
        <script src="/scripts/services/bookmark-service.js"></script>
        <script src="/scripts/services/pub-sub-service.js"></script>
        <script src="/scripts/directives/edit-directive.js"></script>
+        <script src="/scripts/directives/menus-directive.js"></script>
        <script src="/scripts/controllers/bookmarks-controller.js"></script>
        <script src="/scripts/controllers/tags-controller.js"></script>
-        <script src="/scripts/controllers/menu-controller.js"></script>
+        <script src="/scripts/controllers/menus-controller.js"></script>
        <script src="/scripts/controllers/edit-controller.js"></script>
        <script src="/scripts/externe/semantic.min.js"></script>
-        <script src="/scripts/semantic-init.js"></script>
    </body>
 </html>
--- a/public/scripts/app-angular.js
+++ b/public/scripts/app-angular.js
@ -35,6 +35,10 @@ app.config(function($stateProvider, $urlRouterProvider) {
            url: '/intro',
            templateUrl: '/views/intro.html'
        })
+        .state('search', {
+            url: '/search',
+            templateUrl: '/views/search.html'
+        })
        .state('/', {
            url: '/',
            templateUrl: '/views/intro.html'
--- a/public/scripts/controllers/bookmarks-controller.js
+++ b/public/scripts/controllers/bookmarks-controller.js
@ -1,18 +1,21 @@
 app.controller('bookmarksCtr', ['$scope', '$filter', 'bookmarkService', 'pubSubService', function($scope, $filter, bookmarkService, pubSubService) {
    console.log("Hello bookmarksCtr...");
    $scope.bookmarks = []; // 书签数据
-    getBookmarks({
+    var params = {
        s: 111,
        b: 222,
        i: 'lcq'
-    });
+    }
+    getBookmarks(params);

    pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) {
        console.log('subscribe MenuCtr.bookmarks', data);
+        getBookmarks(data);
    });

    pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, data) {
-        console.log(data);
+        console.log('subscribe MenuCtr.searchBookmarks', data);
+        getBookmarks(data);
    });

    function getBookmarks(params) {
--- a/public/scripts/controllers/edit-controller.js
+++ b/public/scripts/controllers/edit-controller.js
@ -1,7 +1,13 @@
 app.controller('editCtr', ['$scope', '$state', function($scope, $state) {
+    semanticInit();

-    $scope.addTag = function(){
+    $scope.addTag = function() {
        console.log('Hello , you have click add tag btn......')
    }

+    function semanticInit() {
+        $('.ui.dropdown').dropdown({
+            forceSelection: false,
+        });
+    }
 }]);
--- a/public/scripts/controllers/menu-controller.js
+++ b/public/scripts/controllers/menu-controller.js
@ -1,62 +0,0 @@
-app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope, $state, pubSubService) {
-    $scope.login = true;               /**< 是否登陆 */
-    $scope.selectLoginIndex = 0;        /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
-    $scope.selectNotLoginIndex = 0;     /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
-    if ($scope.login) {
-        setTimeout(()=>{$state.go('bookmarks')},0);
-    }
-
-
-    /**
-    * @todo http://stackoverflow.com/questions/31449948/ui-router-state-go-not-working
-    */
-    if($scope.login){
-        setTimeout(()=>{ $state.go('bookmarks') }, 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){
-        var msg = 'MenuCtr.';
-        if (login) {
-            $scope.selectLoginIndex = index;
-            msg += $scope.loginMenus[index].uiSref;
-        } else {
-            $scope.selectNotLoginIndex = index;
-            msg += $scope.notLoginMenus[index].uiSref;
-        }
-        console.log(msg);
-        pubSubService.publish(msg);
-    }
-
-    /**
-     * @func
-     * @desc 点击搜索按钮搜索书签
-     */
-    $scope.searchBookmarks = function(){
-        pubSubService.publish('MenuCtr.searchBookmarks', {'key': 'JavaScript'});
-    }
-
-    $scope.showAddBookmarkMoadl = function(){
-        $('.ui.modal.js-add-bookmark').modal('show');
-    }
-}]);
--- a/public/scripts/controllers/menus-controller.js
+++ b/public/scripts/controllers/menus-controller.js
@ -0,0 +1,99 @@
+app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope, $state, pubSubService) {
+    $scope.login = true; /**< 是否登陆 */
+    $scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
+    $scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
+    $scope.keyword = ''; /**< 搜索关键字 */
+    $scope.showSearchInput = true; /**< 是否显示输入搜索关键字的输入框 */
+    if ($scope.login) {
+        setTimeout(() => {
+            $state.go('bookmarks')
+        }, 0);
+    }
+    semanticInit();
+
+
+    /**
+     * @todo http://stackoverflow.com/questions/31449948/ui-router-state-go-not-working
+     */
+    if ($scope.login) {
+        setTimeout(() => {
+            $state.go('bookmarks')
+        }, 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) {
+        var msg = 'MenuCtr.';
+        if (login) {
+            $scope.selectLoginIndex = index;
+            msg += $scope.loginMenus[index].uiSref;
+        } else {
+            $scope.selectNotLoginIndex = index;
+            msg += $scope.notLoginMenus[index].uiSref;
+        }
+        console.log(msg);
+        pubSubService.publish(msg);
+    }
+
+    /**
+     * @func
+     * @desc 点击搜索按钮搜索书签
+     */
+    $scope.searchBookmarks = function() {
+        console.log('searchBookmarks clicked...');
+        pubSubService.publish('MenuCtr.searchBookmarks', {
+            'keyword': $scope.keyword
+        });
+        $scope.selectLoginIndex = 0;
+    }
+
+    /**
+     * @func
+     * @desc 点击下拉列表详情搜索
+     */
+    $scope.searchDetail = function() {
+        $scope.showSearchInput = false;
+        pubSubService.publish('MenuCtr.searchDetail', {
+            'key': 'JavaScript'
+        });
+    }
+    $scope.showAddBookmarkMoadl = function() {
+        $('.ui.modal.js-add-bookmark').modal('show');
+    }
+
+    function semanticInit() {
+        $('.ui.dropdown').dropdown();
+    }
+}]);
--- a/public/scripts/directive/edit-directive.js
+++ b/public/scripts/directive/edit-directive.js
@ -1,8 +0,0 @@
-app.directive('edit',function(){
-    return {
-        restrict:'EAC',
-        templateUrl: '/views/bookmarks.html',
-        controller: 'bookmarksCtr',
-        replace:true
-    }
-});
--- a/public/scripts/directives/edit-directive.js
+++ b/public/scripts/directives/edit-directive.js
@ -1,7 +1,7 @@
-app.directive('edit',function(){
+app.directive('edit', function() {
    return {
-        restrict:'EAC',
+        restrict: 'EAC',
        templateUrl: '/views/edit.html',
-        replace:true
+        replace: true
    }
 });
--- a/public/scripts/directives/menus-directive.js
+++ b/public/scripts/directives/menus-directive.js
@ -0,0 +1,8 @@
+// 不要使用已有的html作为指令，如menu，否则angular会陷入死循环
+app.directive('menus', function() {
+    return {
+        restrict: 'EAC',
+        templateUrl: '/views/menus.html',
+        replace: true
+    }
+});
--- a/public/scripts/semantic-init.js
+++ b/public/scripts/semantic-init.js
@ -1,3 +0,0 @@
-
-// 下拉菜单初始化
-$('.ui.dropdown').dropdown();
--- a/public/views/menus.html
+++ b/public/views/menus.html
@ -0,0 +1,36 @@
+<div 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" ng-click="showSearchInput = true">自己书签</div>
+                    <div class="item" ng-click="searchDetail()" ui-sref="search">详情搜索</div>
+                </div>
+            </div>
+            <div class="ui category right search item" ng-show="showSearchInput">
+                <div class="ui transparent icon input">
+                    <input class="prompt" type="text" ng-model="keyword" placeholder="标题，链接，分类...">
+                    <i class="search link icon" ng-click="searchBookmarks()" ui-sref="bookmarks"></i>
+                </div>
+                <div class="results"></div>
+            </div>
+            <div class="item">
+                <div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
+            </div>
+            <div class="item">
+                <div class="ui button">退出</div>
+            </div>
+        </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>
+    </div>
+</div>
--- a/public/views/search.html
+++ b/public/views/search.html
@ -0,0 +1,3 @@
+<p>
+    这是详情搜索页
+</p>