2

This seems to be a very common problem.

Currently I have a login form and few pages on my front end and a back end.

My single route file looks like this -

Front End

/login
/about

Back End

/dashboard
/manageuser
/settings

Now the problem which I am facing for the management is currently -

Scenario -

I have lot of scripts for the front end in both head section and the bottom just before the body closing tag.(as I am using maps, charts, reports etc in dashboard and other administration section menu items)

Scripts are changing on page basis, ie different scripts for login page, settings, dashboard page etc in both head section and just before the body tag.

Also the body tag contains different classes on page basis like body class="login form", body class="dashboard registered user form-control" etc

Problem -

Now you can see that there is too much randomness in the layout, so how do I manage this thing with a single layout file ? I want to keep my routes clean like the above mentioned. How could I achieve this as most of the thing I came across my search, deals with single layout.

FYI - Currently I have only two pages on my front end, so major thing is the dashboard(administration panel) but there too scripts are changing as per the section.

I too looked at UI-router but unable to fit this in my scenario, let me know about the layout management thing in angular as I believe this is a very common use case while developing a web app.

EDIT - I am using LinemanJS for front end(just an info if that matters any how).

Trialcoder
  • 5,816
  • 9
  • 44
  • 66
  • Have you read Google's recommendation for app structure: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub – Michael Kang Aug 13 '14 at 08:10
  • What is the problem with loading _all_ the scripts in index.html? – Valentin Waeselynck Aug 13 '14 at 08:15
  • @pixelbits thx for the link ..I will surely look into it – Trialcoder Aug 13 '14 at 08:28
  • @ValentinWaeselynck some scripts stop working as they are using different jQuery versions and sequence of placing too matters...I tested it on few pages though so can be 100% sure..but one more thign ..If I add whole around 30-40 scripts on my layout page..I believe it would ba na over kill for my app..what is your suggestion ? – Trialcoder Aug 13 '14 at 08:31
  • Maybe you want to use require.js: http://todomvc.com/labs/dependency-examples/angularjs_require/#/ – Thomas Aug 13 '14 at 08:43
  • 1
    To load scripts in a lazy way, you could wrap script loading in a promise and wait for this promise to be resolved in your routing. Check https://docs.angularjs.org/api/ng/service/$q and https://docs.angularjs.org/api/ngRoute/provider/$routeProvider . Also, you can easily have dynamic clases on your body element using https://docs.angularjs.org/api/ng/directive/ngClass – Blaise Aug 13 '14 at 10:05
  • @Blaise How could I dynamically change the scripts in head and bottom section as shown here http://pastebin.com/1VBV9DDL also thx for responding – Trialcoder Aug 13 '14 at 10:08
  • 1
    When you load JS files asynchronously, you let go of that concept, except for some core JS includes in your head or end of body. — Basically what you do is wrap all code that depends on a JS file in a function, and execute that function once the JS file it depends on has loaded. — If you have an existing application it will be a lot of work to wrap all your code and figure out all dependencies, but when you start a new app it's pretty simple when using something like requirejs. – Blaise Aug 13 '14 at 10:18
  • 1
    As a start, it's probably easier to just load all JS immediately. AngularJS will take a lot of time to learn already and this deals with a lot of additional and advanced concepts. – Blaise Aug 13 '14 at 10:22
  • @Blaise How do I async load JS files..is there any angular way of doing that some example, site etc .and thx for the tip..if possible add it to the answer and I will accept it – Trialcoder Aug 13 '14 at 11:12
  • 1
    It's not built in Angular, but it does work with Angular. [This SO question + answers](https://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js) will hopefully point you in the right direction. It's probably better to first get to know the Angular basics though. – Blaise Aug 13 '14 at 12:11

0 Answers0