I am currently working on a new project, and I would like to give it a good start so as not to spoil future iterations.
Description
The application will have two sides:
- client side.
- administrative side.
Each of them has separate APIs, and it seems logical to me to divide them into 2 applications.
Each of them also has its own way of logging in.
My thoughts
Having read quite a few topics on this subject, I thought about using this structure:
app/ admin/ home/ home.tpl.html // admin home template admin.html // admin index, including templates via ng-view admin-api.js // admin api admin.js // admin app admin-login/ home/ home.tpl.html admin-login.html admin-login-api.js admin-login.js client/ home/ home.tpl.html client.html client-api.js client.js client-login/ home/ home.tpl.html client-login.html client-login-api.js client-login.js css/ fonts/ img/ js/ libs/
Why separate login from others? Since I want login pages to be lighter (I will not load the same CSS / JS files) and not have access to other files / views if the user is not logged in.
Routing
If we compare the routes with this structure, it will give something like this:
/
app / client / client.html
/login
application / client-login / client-login.html
/admin/
app / admin / admin.html
/admin/login
application / admin-login / admin-login.html
Authentication conditions example:
/
if the user is logged in → show the main page
if the user is NOT logged in → redirect to /login
Grunt tasks
I will use grunt-useref mainly to do automatic concat and uglify in a set of regular JS / CSS files.
Example:
<script src="libs/jquery/jquery-1.11.1.js"></script> <script src="libs/angularjs/angular.js"></script> <script src="libs/angularjs/angular-route.js"></script> <script src="libs/angularjs/angular-resource.js"></script> <script src="app/app.js" ></script>
The goal is to have a footer and then add other JS / CSS files at the top when the route changes (via lazy loading).
Concern
Firstly, I am here to learn and share ideas, so I would like your opinion on what I have done.
Secondly, if I save this structure, I was wondering how to manage the main routes ( / , / login , / admin / , / admin / login ) and user authentication (but there are already a lot of threads for this part).
I would not want to handle this server side, is this possible with .htaccess or with the top level Angular App?
Update 1
I finally came to another way to create my folder structure:
app/ admin/ home/ home.html // admin home view login/ login.html // admin login view login-api.html // admin login API login.js // admin login module admin.html // admin index, including templates via ng-view admin-api.js // admin api admin.js // admin module client/ // same goes for the client home/ home.tpl.html login/ login.html login-api.html login.js client.html client-api.js client.js common/ common.js // shared module app.js // main application, routing to the other pages based on Auth css/ fonts/ img/ js/ libs/ locale/ index.html
index.html will serve my main application (app.js) which will serve the correct template based on the user's login state.
My goal is to load css and js files asynchronously, so that I have only what is needed for the current route.
app/app.js (draft)
/* * app/app.js * * Our main application, handling routes * and lazy loading other modules / scripts * */ var app = angular.module('app', [ 'ngRoute', 'ngResource', 'ngTouch', 'ngAnimate' ]); /* * App configuration * */ app.config( ['$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ) { $locationProvider.hashPrefix('!'); /* * Checks if a user is authorized to access a route * * @role (string) minimum role name required * */ var requireAuth = function ( role ) { return { load: function ( $q, $location ) { console.log('Can user access route?'); var deferred = $q.defer(), // TODO: replace isLoggedIn variable value by a function // to check if the user is actually logged in isLoggedIn = true; deferred.resolve(); if ( isLoggedIn === true ) { // fire $routeChangeSuccess console.log('authorized'); return deferred.promise; } else { // fire $routeChangeError console.log('rejected'); $location.path('/login'); } } }; }; // Main application routes $routeProvider .when('/', { templateUrl : 'app/client/home/home.html', resolve : requireAuth() }) .when('/login', { templateUrl : 'app/client/login/login.html', resolve : requireAuth('anonymous') }) .when('/admin/', { templateUrl : 'app/admin/home/home.html', resolve : requireAuth('admin') }) .when('/admin/login', { templateUrl : 'app/admin/login/login.html', resolve : requireAuth('anonymous') }) .otherwise('/', { templateUrl : 'app/client/home/home.html', resolve : requireAuth() }); }]);
Update 2
After more tests and studies, I think that I can not do this without the server side to handle the main routes ...
Main problems
- I did not find a suitable way to include the application in another application.
- When redirecting to the login page, the requested route template is still loaded (for example: if I was redirected from the client login to the client, it will load both
app/client/home/home.html and app/client/login/login.html ).
My first conclusion
I absolutely need 4 applications (client, client-login, admin and admin-login), so each of them has its own routes, its own main template index.html and, therefore, they will be really independent from each other.
Each of them will still have access to the shared concat / minified files, but they will also upload their own group of files.