Repository files navigation

Angular-starter is a mildly opinionated boilerplate for MEAN stack web development, with tools for building a great experience across many devices. Designed to build productive programmers.

Node.js and npm are essential to Angular development.

Verify that you are running at least nodev4.x.x and npm3.x.xby runningnode -v andnpm -v in a terminal/console window.Older versions produce errors.

Clone this repo into new project folder (e.g.,my-proj).

git clone https://github.com/morgansliman/angular-starter my-projcd my-proj

See npm version notes above

Install the npm packages described in thepackage.json:

npm install

Thenpm install command will first install all dependencies listed inpackage.json, then it will callbower install to install the front-end dependencies listed inbower.json (AngularJS &UI-Router by default).

When Bower finishes installing its packages, it will callgulp inject-bower which will inject the newly installed dependencies intosrc/client/index.html automatically.

When installing additional packages with bower, always check yourindex.html file to be sure they were injected correctly. This code is not perfect yet; pleaseopen an issue if you find an error in your dependency injections.

You can quickly delete thenon-essential files (.git)by entering the following command while in the project folder:

Note: this will also delete the README.md file. If you're reading this in your IDE,open it in a browser first!

gulp renew

Note: For now, you will still need to manually edit the information inside ofpackage.json andbower.json. (i.e., name, description, keywords, etc.)

Youcould start writing code now and throw it all away when you're done.If you'd rather preserve your work under source control, consider taking the following steps.

Initialize this project as alocal git repo and make the first commit:

git initgit add.git commit -m"Initial commit"

Create aremote repository for this project on the service of your choice.

Grab its address (e.g.https://github.com/<my-profile>/my-proj.git) and push thelocal repo to theremote.

git remote add origin<repo-address>git push -u origin master

npm start

Thenpm start command first compiles any.sass or.scss files withinsrc/client/sass then auto-injects these along with all your custom AngularJS into the appropriate places inindex.html then simultaneously re-compiles and runs the Express server insrc/server/index.js usinggulp-nodemon.

Changes made to any.js,.sass, or.scss files are tracked bygulp-nodemon and will restart the server, triggering a Sass re-compile and full auto-injection. Changes made to any.html file is tracked byBrowserSync, and will automatically live-reload the page. If this isn't working as expected, pleaseopen an issue.

Try changing the<h1> tag inside ofsrc/client/index.html and watch your browser live-reload your changes when the file is saved!

During startup, BrowserSync logs several IP adresses to the console. Open the appropriate address in another device (connected to the same network) and watch your changes live-reload to all browser instances at the same time! This makes testing your app in multiple environments much easier. (read more aboutBrowserSync)

Shut it down manually withCtrl-C.

Congrats! You're ready to write your application.

• gulp - Compile Sass and auto-inject CSS/JS files intoindex.html
• gulp styles - Compile Sass (does not auto-inject)
• gulp inject - Auto-injects CSS/JS files fromsrc/client/app intoindex.html
• gulp inject-bower - You shouldn't ever need to call this directly; automatically run by Bower after installing a new package
• bower install - Use this command to install new front-end dependencies tosrc/client/lib (auto runsgulp inject-bower postinstall)
• npm install - Used as normal (will also run bower install if there are uninstalled dependencies listed inbower.json)
• npm start - Used to start app with BrowserSync, Nodemon, Sass auto-compiling, and auto-injection enabled.

Unfortunately, I've discovered some problems and, while this works overall, there are some ways you can break it or send gulp spiraling into an infinite loop.

Until I fix these bugs, (or someone else does :D) there's a very specific set of rules to follow when using the included commands to keep everything running smoothly:

• Don't usebower install while the server is running. This is most likely going to send gulp into an infinite loop.

• Check your index.html after installing any packages through bower to make sure the dependencies were injected correctly. The filtering is not very specific so there's often unwanted/unneeded css/js files that get added.

• If bower injection is really more of a hassle than a help for you, default to sourcing from a CDN as usual, just don't put the CDN tags inside of the auto-injection comments or they will be overwritten.