0

I'm building out an angular app and I'd really like to use a single file to handle certain things like nav, meta data etc. Partially for my OCD, but mostly because it will make managing that functionality a lot easier down the road.

I had it all set up and running, but it appears that only my nav app is running (it looks like this)

<nav ng-app="nav">

And has it's own file

<script src="js/nav.js">

Then, I tried adding in some content in another app

<div ng-app="content">

But I'm getting an angular load issue on the controllers in that app saying that they are not functions 

Error: [ng:areq] Argument 'chartCtrl' is not a function, got undefined

Even though ng-app content script is loading fine and the "didload" console log I have INSIDE of chartCtrl is working fine...

Just wondering if anyone has seen anything like this before. Thanks!

Alex Morris
  • 633
  • 5
  • 16
  • 2
    Look at these answers: https://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – jkalamarz Jan 03 '18 at 21:51

1 Answers1

1

This is not good idea. By this crumbling, you are dropping most of features that makes Angularjs usefull. One website = one app is what you want. If you worry about organizing files, it is not related to Angularjs, but build process. Time when there was one huge file is long gone.. You can organize files as you wish (into folder structure), then concat/import them via build engine (npm, grunt, gulp, webpack etc..) into one file. Angularjs app then handle loading dependencies in right order... Just read some articles like this and ofc documentation..

bigless
  • 2,849
  • 19
  • 31