Tech Junkie Blog - Real World Tutorials, Happy Coding!: AngularJS SPA : Setting Up ACME Bank

Thursday, July 2, 2015

AngularJS SPA : Setting Up ACME Bank

In this blog we are going to create an AngularJS application from scratch we would go step by step and create every file from scratch.

Step-By-Step Instructions:

1. Create an application folder call ACME Bank with the following structure, don't worry about the bower.json and the .bowerrc file yet.
















2. Create the bower.json file, then add the following lines in the file.  The file basically pulls in the dependencies that the application will need.  The most important part of the file is the "dependencies" portion.

{
  "name": "angular-seed",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "~1.7.2",
    "angular-route": "~1.7.2",
    "angular-loader": "~1.7.2",
    "angular-mocks": "~1.7.2",
    "html5-boilerplate": "^6.1.0",
    "bootstrap": "~4.1.1"
  }
}


3.  Create the .bowerrc file and change the directory to "app/js/lib", the final markup should look like the following

{
  "directory": "app/js/lib"
}

Note: If you need more information on bower you can visit this blog that I wrote about it.  If you don't have bower install.  Type npm install -g bower to install bower globally, meaning you can now use bower anywhere.

Now type in the command bower install where the bower.json file is located at, and the components in the bower.json file will be installed in the apps/js/lib folder






Posts In The AngularJS SPA Application Series:
  1. Setting Up Angular-Seed
  2. Preparing Angular-Seed For The ACME Bank Application
  3. Refactor Code to Not Use Global Variables (ACME App)
  4. Installing MongoDB
  5. Create a MongoDB Configuration FIle
  6. Install mongoDB as a Windows Service
  7. Installing Express generator
  8. Installing ExpressJS Application Server
  9. Creating The SPA Project Folder Structure
  10. Setup Express To Serve Static Files
  11. Setup The ACME Bank Application For Heroku And Testing It Locally
  12. Deploy ACME Bank Application To Heroku
  13. Install RoboMongo GUI for MongoDB

3 comments:

Search This Blog