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.
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.
What's the best way of including a node module on my webpage?
Should I use absolute paths like <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> or is there an easier and better way of doing it?
Thank you.
Add this in your app.js-file
app.use('/placeholder', express.static(__dirname + '/node_modules/'));
This allows you to write:
<script src="/placeholder/bootstrap/dist/js/bootstrap.min.js"></script>
And Node will redirect that path to the node_modules folder.
You can change placeholder to whatever you want, mine is named scripts
Node modules are designed for server-side execution in the NodeJS environment, not for use in a browser. So the best way to include them in a web page is not to.
I will note that Bootstrap is a client-side framework, so it makes no sense as a NodeJS module in the first place.
If you're looking for an npm-like tool for client-side packages, the flavor of the week is Bower.
My answer to this question would be a bit different and a little advance.
Maybe it won't be helpful to you right now, but definitely, in future, it will. Also, it would help out others.
Yes, the first answer is absolutely correct, you can add a placeholder and then add links relative to it in your index file.
Now, are you using a task runner like gulp or grunt? If not I would recommend you to start using it, because you can cut out a lot of manual work use these tools and eventually save a heck load of time.
You might be thinking why am I talking about gulp or grunt over here. I will answer this questing shortly.
Since you are using node.js, you already know how modules are loaded in Node.
eg : require('express');
What if we could use this approach for our client applications? You would only have to include one js file in your html and that js file would require all the other js libraries for you.
Great, suddenly you can reduce the number of script tags in your html page from approx around 20-30 to 1.
This is where module loaders come into picture.
But browsers do not understand the require statement.
To deal with this we use a tool called a browserify, we can use gulp(which I talked about earlier) to configure a task to browserify our files.
When you use this, you will have to require all your js libraries and your own js files into a single file (say: app.js). But as we said browsers do not understand require. This is where browserify will take this app.js file pre process it and spit out a single file that should be included into your html.
You can follow this article to get a clear picture on how to achieve this.
Scalable app using Gulp and browserify.
Pretty neat right! :)
Some of the other module loaders are System.js and webpack
I started a small web/html project, in which I will have at least a few js files, including dependencies and stuff.
Just because I like it clean, I'd like to minify all those files into one. That's pretty easy with uglifyjs and grunt, problem solved.
But there's something else: in my "source" (uncompiled) html file, I have a bunch of <script> tags. Something like this:
<script src="js/dependency1.js"/>
<script src="js/dependency2.js"/>
<script src="js/mystuff.js"/>
But as I said above, after the build I end up with one big file, allTheStuff.js. I wish I could automatically modify my HTML to:
<script src="js/allMyStuff.js"/>
Is there a way I can do that automatically? Any tool to recommend?
And same question for CSS.
Try grunt-usemin for this. It will handle both javascript and CSS.
From the GitHub page for the project:
Replaces references to non-optimized scripts or stylesheets into a set
of HTML files (or any templates/views).
When it works, it's a really nice tool to simplify the exact problem you describe. The downside is that it's a little clunky to use as you juggle the HTML tags usemin needs and the grunt configuration.
But, clunky config issues aside, I've used it and it's very nice to automate the copy, concat, and uglify steps and to modify the HTML to use the results of those tasks.
Related: grunt-include-source offers automation to inject a list of files into your HTML. If you decided you wanted to handle things yourself rather than turn it all over to usemin, this tool is a handy item to automate updating the HTML as you build a custom build process based upon your needs.
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.
We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects.
Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.
---resources
|---custom-components
|---mycomponent
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent.js
|---mycomponent2
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent2.js
|---libraries
|---backbone
|---underscore
|---jquery
|---jquery-ui
|---jqueryplugins
|---jcarouselite
|---thirdpartyplugins
|---page-js
|---mypage.js
|---mypage2.js
resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.
Custom components will be asked by main-js residing in page-js.
Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?
About the directory structure
As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.
Here is the cake's awesome MVC directory structure:
Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.
About the cleaning up techniques
Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.
For many years, programmers use module = null to free up memory from un-used codes.
Take a look at these also:
Can dynamically loaded JavaScript be unloaded?
Loading/unloading Javascript dynamically
How to unload a javascript from an html?
Hope it helps and good luck on designing your app ;D
Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.
Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.
I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)
Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html