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):
Every new JS file (service, directive, everything) I add a line to the
head. I've never had aheadthis large. Is there a more typical way of including all those files (maybe more modularized? or an automated tool?)?index.htmlis 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_userdetermines whether it's in the chat view or the auth view andmainCtrl.login_objectdetermines 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>
