Menu
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
821
Multiple <SCRIPT> TagsYou can have as many <SCRIPT></SCRIPT> tags as you would like in a document. The <SCRIPT> tags are processed as they are encountered.
Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
yes.. you can have multiple javascripts files in html page.
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner. You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin for gulp
Grunt - JavaScript Task Runner You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS. See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
97
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
29
Using require.js , u can manage all tags in one line
39
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
