I'm new to angularJS. I managed to build a phonegap app using angularJS. The app is ok and running just fine. The problem is, now that I have a little more understanding on how angularJS works (at least I think I have), I'm worried about my app files structure and code maintainability. My project follows the angular-seed pattern. Angular Seed on GitHub where I have this structure:
js
app.js
controllers.js
directives.js
services.js
filters.js
After researching how to structure apps with angularJS, I've found some very nice articles about it: Building Huuuuuge Apps with AngularJS and HOW TO STRUCTURE LARGE ANGULARJS APPLICATIONS
My question seems very silly to me but I couldn't find a way out. I managed to separate my controllers into different files and I have now this structure:
scripts
controllers
LoginCtrl.js
HomeCtrl.js
AboutCtrl.js
ClientCtrl.js
The thing that I'm struggling with is that in the way that my app was before, I had only one controller.js file. In my index.html file, I load all the script files normally using the script tag. Now that I have 4 different .js files for my controllers, how do I load them into my index.html file? Do I have to load them all there?
It doesn't look right to me load all the scripts in the index.html file like that (I know that having one file the code will be loaded in the same way, it is just weird to me having many script tags packed there). I've found the ng-boilerplate project on github and on their index.html they load the scripts kind of dynamically. The problem is, I can't start a new ng-bolierplate right now, and I couldn't find how they did it. Sorry for the long text. Thanks!
Referencing each script file in its own tag in index.html is definitely one way to do it, and the most straightforward. However, if you want something cleaner, take a look at one of the various guides to combining Angular with RequireJS:
http://www.startersquad.com/blog/angularjs-requirejs/
Does it make sense to use Require.js with Angular.js?
This approach is aimed primarily at solving the problem of what order to load the files in order to satisfy dependencies, but it does also have the consequence of cleaning up the index.html...albeit at the cost of additional configuration elsewhere.
Use http://browserify.org/
You get very simple and elegant commonjs modules and lots of amazing libraries from node.js in your browser.
The code gets bundled into single js file.
Related
I am using Yeoman to auto-generate a project using Bootstrap & Sass. The one thing I am having trouble with is changing the default structure of the project to be more modularized. The generator is here on GitHub.com
Currently the application is structured like so:
/app
/images/
/scripts/
/controllers/
main.js
app.js
/styles/
main.css
/views/
main.html
index.html
I'd rather have it separated into individual directives with a core(shared) folder, so that it would be like so:
/app/
/directives/
/home/
home.html
homeCtrl.js
home.sass
index.html
app.module.js
app.route.js
But I am having difficulty figuring out the best method of modularizing the project. Am I supposed to be creating the file structure that I want with the pre-generated application, and then edit it within the Gruntfile.js? Is there a more streamlined way of doing this, or am I SOL doing it manually?
The best and elegant way is to follow their guideline around creating a customised template which you can use to generate apps based on it.
However, if this is a one off thing you probably won't need to bother unless you want to create something decent and share it with community, so other people can use your template and create their app with modularised structure.
Even if you don't try to write your own template you can still read the guide and modify the initial template generator to change the file structure before creating the app for you.
Here is another good article around template customisation:
https://scotch.io/tutorials/create-a-custom-yeoman-generator-in-4-easy-steps
This project appears to be abandoned. The most recent change is a year ago, there are 67 issues and 18 pull requests. It's probably only generating Angular 1.x code as well, and that may not be "up to date" with current Angular 1 best practices.
You can, of course, fork the project and make changes yourself, and even take over maintenance of it, but you might be better to look at something like Angular-cli, which generates Angular2 code, and is being actively developed.
I am new to Angular and making a small project.
For now, I have one large App.js where I define my route config and controllers and such.
In my index.html file, I link to this script file and everything works fine, I have multiple views and a small working app.
Now I would like to extract the controllers from my big javascript file, but then, what is the best way to include all those files? I do not want to have one script tag per file.
If you are worried about the fact that you will add the files manually over and over again, you could try to automate this process using Gulp or Grunt but it will take a bit of research. What I recommend, though, is using an already set-up generator with these systems in place for you. Such a generator would be the Hottowel generator made by John Papa, which also respect his Angular Styleguide.
Whatever you choose in the end is your preference, but I recommend looking into such generators and explore their way of doing the architecture of an Angular application and then see what suits your needs best.
Im using Cordova with Angular and Ionic to develope platform independent mobile applications. Today i learned that it is quite smart for large projects to set up a projects folder like this:
root
index.html
modules
app.js
module_1
module_1.js
module_1.html
module_2
module_2.js
module_2.html
module_2_sub
module_2_sub.js
module_2_sub.html
...
And you define your App.js like this:
angular.module('App', ['App.Module_1', 'App.Module2'])
But that leads to a very huge list of script includes in the index.html if you have a large project:
<script src="modules/app.js"></script>
<script src="modules/module_1/module_1.js"></script>
<script src="modules/module_2/module_2.js"></script>
<script src="modules/module_2/module_2_sub/module_2_sub.js"></script>
....
Is there a smarter way to organize this script includes? Maybe something like just including the app.js and in the app.js include all other needed scripts.
Ofcourse one just could say 'why do you even care about that?' but i kinda have the feeling that it is not very 'nice looking' to have so many includes in the index.html.
do you use grunt or gulp? cause i could recommend you this plugin https://www.npmjs.com/package/grunt-include-source
that include the source automatically in your main html.
And then it could be easier to include the .min if you decide to minify your sources
You could take a look at RequireJS. It sometimes can be a pain to setup for the first time, but once it's up it can help you with your issue.
Take a look at an Angular with RequireJS seed or if you prefer to use Yeoman.
I might also suggest browserify: http://browserify.org. This let's you use the server side node conventions in the browser. And has the additional advantage of letting you share the same code in the browser as on the server. To my mind, it's the most advanced way of handling your code dependencies in a consistent manner.
I have a simple problem. I want to use an angularJS application I developed inside of another one. My question is: what is the best way to include it? Should I combine the app.js files and index.html files to load the appropriate resources and routes? Can I combine it by including one module in the other, like with normal dependency injection? Or is there some other, better way to do this?
Let's assume the application has a root express server and a root/app_client angularJS application. There isn't any code to post outside of my whole app, this is more of an organization question.
I have a internet application mvc4 with areas, for my organization each area represent a SPA and through "Manage NuGet Package" I installed "Durandal 1.2.0", "Durandal Transitions 1.2.0" and "Durandal Router 1.2.0". I organized the folders and quit the "views" and "viewmodels" from folder "App" of Durandal and put the new views in folder "VIews" of mvc4 area for example:
Areas-->NewArea-->Views-->ControllerFolder-->views-->shell.html
Then I put the '"viewmodels" in "Script" folder for example:
Scripts-->NewArea-->ControllerFolder-->viewmodels-->shell.js
Scripts-->NewArea-->ControllerFolder-->main.js
Then I changed paths for JS of durandal, for example in main.js:
define(['../../../App/durandal/app',
'../../../App/durandal/viewLocator',
'../../../App/durandal/system',
'../../../App/durandal/plugins/router',
'../../../App/services/logger'],
And I changed main.js in the next line:
viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views');
But that configuration of folders fails because the next line calls various times the module "viewLocator" in its definition and rewrite the configuration of "useConvention" with default value:
app.setRoot('viewmodels/shell', 'entrance');
That behavior only happen when the folders "views" and "viewmodels" don't stay under "App" folder of "Durandal".
Please help me, how to have various SPAs in the same project?
You might want to consider your deployment strategy. For example, if you need to optimize this app, both SPAs will end up in the same file. However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.
In more advanced scenarios, you may create a "bootstrapper" app that loads one or another of the SPAs. The bootstrapper would contain code that is common to both SPAs. But each SPA (and the bootstrapper) can be optimized independently.
There are many options. Mainly, consider your final deployment strategy and that will help guide you here.
Also, the issue you have above is probably related to the fact that the standard conventions may not work in your setup, and you would need to override some functions with your own mapping.
I ran into the exact same problem this morning. I originally formatted the project to be:
app/spa1/viewmodels
app/spa1/views
app/spa2/viewmodels
app/spa2/views
Using this structure I hit the exact same wall you did. After reading your post, I restructured the project to be:
app/viewmodels/spa1
app/viewmodels/spa2
app/views/spa1
app/views/spa2
Using this structure, navigation works fine. I set up three SPAS and was able to navigate all three. The other benefit of this structure is that you are now following the standard convention so you don't have to configure the view locator. Just make sure the main.js file for each spa uses:
app.setRoot('view models/spa1/shell), app.setRoot('view models/spa2/shell), etc.
Finally, by structuring this way, you move the main.js files up the structure which eliminates the ../../../ in all your defines.
I hope this helps.