Menu
I'm about to attempt my first AngularJS project, and it makes sense to use Node.js for the back end, even though it means learning both AngularJS and Node.js from scratch at the same time.
The first thing I'm trying to get my head around is a good file structure. So far my pure HTML/CSS template has the following directory structure...
_site/ Fonts/ Javascript/ SASS/ Stylesheets/ Index.html ( _site is a working directory for PSDs, etc.)
I found an example directory structure for a Node.js/AngularJS app here....
... which suggests the following directory structure.
app.js --> Application configuration package.json --> For npm public/ --> All of the files to be used in on the client side css/ --> CSS files app.css --> Default stylesheet img/ --> Image files js/ --> JavaScript files app.js --> Declare top-level application module controllers.js --> Application controllers directives.js --> Custom AngularJS directives filters.js --> Custom AngularJS filters services.js --> Custom AngularJS services lib/ --> AngularJS and third-party JavaScript libraries angular/ angular.js --> The latest AngularJS angular.min.js --> The latest minified AngularJS angular-*.js --> AngularJS add-on modules version.txt --> Version number routes/ api.js --> Route for serving JSON index.js --> Route for serving HTML pages and partials views/ index.jade --> Main page for the application layout.jade --> Doctype, title, head boilerplate partials/ --> AngularJS view partials (partial jade templates) partial1.jade partial2.jade So, this looks quite good to me (except for the fact that I wouldn't use Jade).
I still have the following questions...
I want to keep all front-end and back-end files separate. This solution puts all the front-end files in the public/ directory which kind of makes sense because most need to be public, but does it make sense to put the SASS and _site folders here? I could just keep them there, but not upload them when I put them into production, but it seems wrong because they shouldn't be public. They also don't belong at root level with all the back-end stuff.
Wouldn't it be better to load AngularJS from a CDN?
Given that the server will only need to deliver one template (the main application template) and all other HTML will be constructed on the front-end wouldn't it make more sense to keep the index.html file static, delete the views folder and create a partials/ folder under public/ like the original AngularJS Seed application does?
I realize that this is all a matter of opinion, and I could technically put them wherever I want, but I'm hoping somebody more experienced than me could advise me of the pitfalls of various directory structures.
974
To get started with Angular, we need to have NPM (Node Package Manage) which comes automatically whenever installing nodejs, and also should have angular CLI latest version to be installed into our machine which can be useful for generating components, directives, classes, stylesheet and so on.
NodeJS takes part in loading the AngularJS application with all the dependencies, such as CSS files and JS files in the browser. For loading all the assets of Angular and accepting all the API calls from the AngularJS applications, NodeJS is generally used as a web server.
Angular JS is an open source web application development framework developed by Google. It provides support for developing dynamic and single page web applications. Node. JS is a cross-platform runtime environment for running JavaScript applications outside the browser.
Node. JS is a useful tool to build fast and scalable server-side networking applications while AngularJS is best suited for building single-page client-side web applications. Node. JS is an ideal language for developing small size projects, and AngularJS is an ideal language for creating highly interactive web apps.
Things are getting easier as time goes on. I've used Yeoman for the AngularJS front-end, and it makes life much easier: http://yeoman.io/
MEAN is an awesome acronym! I prefer the MEAN stack directory structure. Let's use convention people! Just use the directory structure from mean.io. MEAN is handy too because it throws in all the goodies like Grunt, Bower, etc.
I've searched GitHub for Node.js/AngularJS projects (probably not hard enough) and not seen anything really great for a starting directory structure. So I've merged the Node.js Express.js (running Express.js from the command line using neither EJS nor Jade/Pug) skeleton with the angular-seed project (clone it from GitHub). Then I moved a ton of stuff around. Here's what I came up with:
developer - stuff only the developer(s) will use. Does not need to be deployed. config - karma configuration files and others.scripts - developer scripts (build, test, and deploy)test - e2e and unit tests.logsnode_modules - this Stack Overflow answer recommended to put this in Git. However this may now be obsolete.public - This comes almost straight from the angular-seed app folder. css, img, js, lib, partials - pretty obvious and nice and short.routes - Node.js routes.server - server-side "shebang" Node.js programs, daemons, cron programs, whatever.server.js - renamed from app.js just to make it more obvious this is server side.
153
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
