Angular JS is not just another javascript library but an client side javascript framework developed and maintained by Google. AngularJS brings in a revolution in the field of Single Page Application (SPAs) allowing to write a propered architectured, maintainable and testable client side code. It's ability to bring in the power of MVC framework in client side programning is one of the reason it's being popular these days. As we know good software design has High Cohesion(how well does that one thing stick to do just one thing) and Loose Coupling(least possible dependency of one component on another component)Angular JS offers MVC/MVVM paradigm to create components more flexible and loosely coupled
Having said that let's install this powerful framework into our machine to explore morescript with type is typescript and script without type is JavaScript 😂🤣#devQuotes— ashwin (@AshwinJung) October 22, 2017
- First install latest version of nodeJS(for executing JavaScript code outside the browser) and then npm(node package manager to install third party libraries)
- Install angular command line interface(cli) using command:
npm install -g @angular/cli
(g stands for global(system) so that you don't need to install angular cli for every project.)- you can also check the version of installed angular/cli
ng -v
- Now we can create a new angular application using installed angular/cli in desired directory.
ng new "DesiredApplicationName"
- e2e: e2e stands for end to end, this is where we write end to end tests files(these tests are automated test that simulate real user) for our application.
- node-modules: This is where all third party libraries that the application depend upon are stored. Node modules packages are purely for development; so when we compile our application, parts of this third party libraries are bundled and deployed in our application.
- src Directory: This directory is where we write all our AngularJS code for application development.
- app: Inside src directory app folder consists of component and module. Every application has atleast one component and one module.
- assets: Inside this directory all the static resources like image files, text files, icons are placed here.
- environment: This is where we configure configuration settings for different environments(production and development environment).
- main.ts: This TypeScript file is basically a starting point of our application as main method in java.
- styles.css: For applying global styles to our application.
- .editorconfig: setting up editor configuration
- .gitignore: excluding certain files and folders from git repository.
- karma.conf.js: karma is a test runner for JavaScript code, here it uses jasmine framework for testing.(files preceding with . are configuration files which are not much concerned for us.)
- package.json:Generally for managing all the libraies and dependencies used in the application.
- protractor.conf.js: Tool for running e2e tests files.
- tsconfig.json: Configuration file for TypeScript compiler.
- tslint.json: Configuration file for tslint (checks for readability, maintainability and functionality errors for TypeScript codes).
ng serve
ng serve --host 0.0.0.0 --4201
Voila !! Now you are up and running with Angular JS version 4.....! Keep Learning By Doing !
Comments
Post a Comment