文章/答案/技术大牛

发布

社区首页 >问答首页 >搁浅消息角web应用程序-所有视图的主模板

问搁浅消息角web应用程序-所有视图的主模板
EN

Code Review用户

提问于 2016-06-04 01:22:06

回答 1查看 69关注 0票数 2

我正在制作一个棱角分明的web应用程序来解决我和我的朋友和我的传统消息传递带来的痛苦，每隔几个小时发送一批消息(涉及多个不同的主题)，而没有为这种对话方式优化UI。

我有几个具体问题(当然也欢迎任何人注意到任何其他有用的问题)：

每一个新的JS文件(服务、指令、所有内容)我都会向head添加一行。我从来没有过这么大的head。是否有一种更典型的方式来包含所有这些文件(也许更模块化？还是自动工具？)？
index.html是加载的主要模板，顶部有一个标准的导航条，下面是主要内容。我使用一对控制器变量进行任何“路由”(mainCtrl.selected_user决定它是在聊天视图中还是在auth视图中，而mainCtrl.login_object决定是在auth视图中查看登录还是注册)。这是完全可行的，因为我很少有不同的视图(聊天或auth，在auth登录或注册)，但我不需要这是单页，而且我知道有一个更好的路由方法。之所以现在是这样，是因为很容易在不同视图之间共享主布局/样式，比如持久性导航条，并且通过向每个指令传递某些变量(请参阅mainCtrl.selected_user)，很容易共享它。但是现在我想添加一个用户配置文件页面，例如，我觉得它应该在/profile上使用真正的路由，而不仅仅是由控制器变量显示或不显示的另一个div。如何做到这一点，同时仍然获得公共布局/样式和变量传递的好处？

<!doctype html>

<html ng-app="Braid" ng-controller="mainController as mainCtrl">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">

    <title ng-bind="mainCtrl.page_title">Braid</title>

    <link rel="shortcut icon" href="/img/poop_logo.ico">

    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-route/angular-route.min.js"></script>
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/bower_components/underscore/underscore-min.js"></script>
    <script src="/bower_components/objectid.js/src/main/javascript/Objectid.js"></script>
    <script src="/bower_components/socket.io-client/socket.io.js"></script>
    <script src="/bower_components/angular-socket-io/socket.min.js"></script>
    <script src="/bower_components/angular-scroll-glue/src/scrollglue.js"></script>
    <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="/js/controllers/main.js"></script>
    <script src="/js/directives/enter_submit.js"></script>
    <script src="/js/directives/navbar.js"></script>
    <script src="/js/directives/register.js"></script>
    <script src="/js/directives/login.js"></script>
    <script src="/js/directives/logout.js"></script>
    <script src="/js/directives/messages.js"></script>
    <script src="/js/directives/friendships.js"></script>
    <script src="/js/filters/main.js"></script>
    <script src="/js/services/focus.js"></script>
    <script src="/js/services/socket.js"></script>
    <script src="/js/services/auth.js"></script>
    <script src="/js/services/messages.js"></script>
    <script src="/js/services/strands.js"></script>
    <script src="/js/services/convos.js"></script>
    <script src="/js/services/users.js"></script>
    <script src="/js/services/friendships.js"></script>
    <script src="/js/core.js"></script>

    <link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- Bootswatch Yeti -->
    <link rel="stylesheet" href="/css/font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/customize_bootstrap.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/messages.css">
    <link rel="stylesheet" href="/css/users.css">
    <link rel="stylesheet" href="/css/friendships.css">
    <link rel="stylesheet" href="/css/firstview.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/register.css">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/logout.css">
    <link rel="stylesheet" href="/css/typing_indicator.css">

</head>

<body>

    <braid-navbar login_object="mainCtrl.login_object"
                  selected_user="mainCtrl.selected_user"
                  page_title="mainCtrl.page_title"
                  sound_on="mainCtrl.sound_on">
    </braid-navbar>

    <div id="main-content" class="container-fluid">
    <div id="margin-fixer-grid-wrapper">

        <div id="chat-view" ng-if="mainCtrl.selected_user">
            <div class="row">
                <div id="message-view-col" class="col-sm-6 col-sm-offset-3">
                    <braid-messages selected_convo="mainCtrl.selected_convo"
                                    selected_user="mainCtrl.selected_user"
                                    friend_user_map="mainCtrl.friend_user_map"
                                    page_title="mainCtrl.page_title"
                                    sound_on="mainCtrl.sound_on">
                    </braid-messages>
                </div>
            </div>

            <!-- slide in from right -->
            <braid-friendships friend_users="mainCtrl.friend_users"
                               friendships="mainCtrl.friendships"
                               selected_convo="mainCtrl.selected_convo"
                               selected_user="mainCtrl.selected_user"
                               friend_user_map="mainCtrl.friend_user_map">
            </braid-friendships>
        </div>


        <div id="auth-view" ng-if="!mainCtrl.selected_user">
            <div class="row">
                <div class="col-sm-4">
                    <braid-register ng-hide="mainCtrl.login_object"
                                    selected_user="mainCtrl.selected_user"
                                    login_object="mainCtrl.login_object">
                    </braid-register>

                    <braid-login ng-show="mainCtrl.login_object"
                                 selected_user="mainCtrl.selected_user"
                                 login_object="mainCtrl.login_object">
                    </braid-login>
                </div>
            </div>
        </div>

    </div>
    </div>

</body>

</html>

node.js

angular.js

javascript

html

回答 1

Code Review用户

发布于 2016-06-13 05:58:51

只是我的意见，但希望这些能帮上忙

使用咕噜声和丑八怪或褐化或最新的加载项Webpack，它可以打包完整的站点，并将使您更接近于angular2，此时您应该考虑这样做。
将概要文件放入一个模式框中，并将其弹出到其他视图之上，这样它就可以保持状态，并且独立于其他两个指令。

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/130083

复制

相似问题

问搁浅消息角web应用程序-所有视图的主模板
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问搁浅消息角web应用程序-所有视图的主模板EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问搁浅消息角web应用程序-所有视图的主模板
EN