2
\$\begingroup\$

I'm making an Angular web app to solve a pain with traditional messaging my friend and I had, of sending batches of messages (on multiple different topics) to each other every few hours and not having a UI optimized for that style of conversation.

I have a few concrete questions (and of course welcome anything else useful anyone notices):

  1. Every new JS file (service, directive, everything) I add a line to the head. I've never had a head this large. Is there a more typical way of including all those files (maybe more modularized? or an automated tool?)?

  2. index.html is the main template loaded, with a standard navbar at the top, and main content below. I do any "routing" with a couple controller variables (mainCtrl.selected_user determines whether it's in the chat view or the auth view and mainCtrl.login_object determines whether to see login or register within the auth view). That's perfectly feasible since I have so few different views (chat or auth, within auth login or register), but I have no need for this to be single-page, and I know there is a better routing method.

    The reason it is how it is now is because it was easy to share the main layout/styling across the different views, like the persistent navbar, and it's easy to share certain variables (see mainCtrl.selected_user) by passing it in to each directive. But now I want to add a user profile page, for example, and I feel like it should use real routing live at /profile, not just be another div in here shown or not by a controller variable.

    How does one achieve this, while still getting the benefits of the common layout/styling, and passing of variables?

<!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>
\$\endgroup\$
1
\$\begingroup\$

Just my opinions but hopefully these might help

  1. Use Grunt and Uglifyjs or browserify or the most recent addition Webpack which can package your complete site and will bring you closer to angular2 which you should be looking to do at this point.

  2. Put the profile into a modal box and pop it over the other views so it can persist in state and be independent of the other two directives.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.