AngularJS Project Setup step-by- step guide - RapidValue Solutions
6 likes13,145 views
This document is a comprehensive step-by-step guide for setting up an AngularJS project, authored by Gourav Ajmani from RapidValue Solutions. It covers prerequisites, installation of the Yeoman toolset and generator, project configuration, and running the application, along with recommendations for maintaining a clean project structure. The guide aims to simplify the project creation process and enhance the maintainability of AngularJS applications.
AngularJS Project Setup step-by- step guide - RapidValue Solutions
- 1. AngularJS Project Setup A Step-by-Step Guide Presented by: Gourav Ajmani Technical Lead, RapidValue Solutions
- 2. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 2 Contents Introduction.....................................................................................................................................................................3 Install Pre-requisites .........................................................................................................................................................3 Install the Yeoman Toolset ................................................................................................................................................5 Install a Yeoman Generator ..............................................................................................................................................5 AngularJS-RequireJS Generator .........................................................................................................................................6 Start Preparing to Create Project ......................................................................................................................................6 Configure your Generator.................................................................................................................................................6 Review the Yeoman-generated Application.........................................................................................................................8 Run the Application in the Browser ..................................................................................................................................10 Making the Application Perfect and De-coupled ................................................................................................................12 Conclusion .....................................................................................................................................................................14
- 3. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 3 Introduction AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively. I have been working on AngularJS for a while now, and have read many tutorials and blogs on it. I could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, I have written this document which will help you to create the Project structure and then execute it in a simple manner. Install Pre-requisites Before installing Yeoman, you will need the following: Node.js v0.10.x+ o You can download it from here. o Set the path to NodeJS in environment variable, in this example: NodeJS is installed in “C:Program Files (x86)”. So, the path looks like : npm (which comes bundled with Node) v2.1.0+
- 4. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 4 GIT o You can download it from here. o Set the path to GIT in environment variable. In this case, GTI got installed in “C:Program Files”. So, the path looks like: Check if you have NodeJS and npm installed by typing (in command prompt): By default, npm comes along with NodeJS, but you might need to update it with the latest version of it. You can update it using the command (in command prompt): Check if you have GIT installed by typing (in command prompt):
- 5. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 5 Install the Yeoman Toolset Once you have NodeJS installed, install the Yeoman Toolset, by typing (in command prompt): It should execute/install some commands and you should be back to your command prompt without any error. You should confirm whether all the required installation is completed , by typing (in command prompt): The above command should give you the three different versions of Yo, Bower, and Grunt respectively. Install Yeoman Generator You will need to spend time setting up the code for your web application, creating folder structure, defining and installing dependencies in traditional web development workflow. But, if you have Yeoman, it makes the task easier. So, install it. Install a generator for AngularJS projects. o You can install Yeoman generators, using the npm command. o Install generator-angular by typing (in command prompt): This should install NodeJS packages required for the generator.
- 6. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 6 AngularJS-RequireJS Generator You should install generator for AngularJS-RequireJS and Karma-RequireJS. Install generator-angular-require and generator-karma-require. o You can install generator for AngularJS-RequireJS & Karma-RequireJS by typing (in command prompt) It should execute/install some commands and you will get a command prompt without any error. Start Preparing to Create Project Make a new directory (name of your application) and navigate into it. o A directory is created with the name “SampleAngularJsProject”, in local drive “G:”, and navigated there using command prompt. o Here, you need to execute Yo for angular-require along with appName. (SampleAngularJsProject) by typing (in command prompt). Type Y or n , depends on your choice, if you would like to share the usage statistic of the tool. It is preferable not to do that, so n is typed.
- 7. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 7 Configure Your Generator AngularJS generator provides an option to customize the application with the commonly developed libraries, so that it can speed up the development environment. Here, it gives an option to use Sass (with Compass) and include Twitter Bootstrap. In this, Bootstrap is included and Sass is avoided. Enter n then y , respectively, to these options. Generator will prompt to select the Angular Modules that you would like to include in the application.
- 8. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 8 You can check/un-check the modules using UP / DOWN arrow key and use the SPACE bar to select it. Let’s go ahead with the default selected one (until you are keen to include the other two modules)). Press Enter to see what Yeoman has in store for you. It should execute/install some commands and you should be back to your command prompt without any error. Review the Yeoman-generated Application Open up your “SampleAngularJsProject” directory to take a look at what was actually scaffolded. It'll look like this:
- 9. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 9
- 10. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 10 In “SampleAngularJsProject”, we have: app: a parent directory for our application index.html: the base html file for our Angular application 404.html, favicon.ico, and robots.txt: commonly used web files so you don’t have to create them yourself scripts: JS files app.js: Entry point to Angular application code controllers: ngular controllers styles: CSS files views: directory for Angular templates bower_components, bower.json: our JavaScript/web dependencies, installed by Bower Gruntfile.js, package.json, and node_modules: configuration and dependencies required by our Grunt tasks test: a scaffolded out test runner and the unit tests for the project, including boilerplate tests for our controllers Run the Application in the Browser To run the application, you do not have to worry about setting up the web server locally. All of it is considered by Yeoman. Start the server o To start the server, run a grunt task to create local, node based HTTP server on localhost:9090 by typing ( In command prompt):
- 11. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 11 And, your web browser should open up, automatically, and it should launch the newly created AngularJS web application. Auto-reload the changes in your files o Yeoman has generated an application for you in a way, so that if you make any changes in any of your file it will, automatically, force a browser refresh. o This is called live reloading. o Live reload has been configured in the gruntfile.js and it keeps a watch on certain set of files and it, automatically, reloads them if it detects any changes.
- 12. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 12 Making the Application Perfect and De-coupled Yeoman has made it easy to create the Angularjs project structure and has given us an outline and idea of how the structure should look. However, there are few suggestions, which you might want to consider, which will make your application more decoupled, maintainable and neat. If you notice the project structure above, you will see “script” folder which has app.js and a nested folder named “controllers”, which will store all the JS files of the application. There is another folder named “views”, which is used to store all the html files of the application. This is the place where the changes need to be incorporated : o Instead of saving all the application JS files in “controllers”, it is recommended to create nested folder named “modules” under “scripts” and eliminate “controllers” folder. o Coming to “modules” folder, you should create the nested folder under “modules”, depending on the Modules you have for the application. Login module, for example. o So, you create a folder named “login” under “modules”. In “login” folder, the JS, HTML & CSS files are saved, corresponding to Login module. By doing so, you can eliminate “views” folder as well, because, the HTML’s are there in the corresponding module folder. So, the updated code structure should look like.
- 13. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 13 If you notice, there is no “controllers” & “views” folder any more but couple of other new folders, “modules”, “login” & “accounts”, each of which have their own JS, HTML & CSS files.
- 14. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 14 Conclusion AngularJS is a great option which enables you to extend HTML vocabulary for your application. The environment, thus obtained, is expressive, easily readable, and fast to develop. AngularJS is an essential toolset for building the framework which is most suited to application development. It is fully extensible and works efficiently. You are able to modify each and every feature or replace them to suit the needs and requirements of the development workflow. AngularJS has been dominating JavaScript framework and the popularity, that it has gained, reveals that the dominance will prevail in the future. This document addresses queries on AngularJS and hope the information is useful for you. Please feel free to post your queries, feedback, comments and suggestions at [email protected] Reference AngulurJS - http://www.w3schools.com/angular/angular_intro.asp Yeoman toolset - https://github.com/yeoman/yo Yeoman Generator - http://yeoman.io/codelab/install-generators.html Controllers – http://www.w3schools.com/angular/angular_controllers.asp Modules – https://docs.angularjs.org/api/ng/function/angular.module Scripts - https://docs.angularjs.org/api/ng/directive/script HTML - http://www.w3schools.com/html/ CSS - http://www.w3schools.com/css/ NoodleJS - http://damodaran.github.io/Books/Nodejs/noodlejs.html Bower- https://github.com/angular/bower-angular Grunt - https://www.npmjs.com/package/grunt-angular-builder Node Js- http://www.tutorialspoint.com/nodejs/ GIT – https://en.wikipedia.org/wiki/GitHub Npm - https://github.com/npm/npm
- 15. AngularJS Project Setup Step By Step Guide © RapidValue Solutions 15 About RapidValue RapidValue is a leading provider of end-to-end mobility, omni-channel and cloud solutions to enterprises worldwide. Armed with a large team of experts in consulting, UX design and application engineering, along with experience delivering global projects, we offer a range of services across various industry verticals. RapidValue delivers its services to the world’s top brands and Fortune 1000 companies, and has offices in the United States and India. Disclaimer: This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful. © RapidValue Solutions www.rapidvaluesolutions.com/blogwww.rapidvaluesolutions.com +1 877.643.1850 [email protected]