Angular is a framework for building client applications in html css and javascript or a language like ts that compile to js,
ts is more common in angular community because angular itself work on ts
if you have never been work on ts before then don`t worry about it, We learn very soon now
Why Do You Need Angular?
And it is very hard to test the application build by javascript and jQuery.
We can use JS and jQuery but whenever application get complex then its very hard to maintain code, We need the way to properly manage structure and codebase.
Thats been over a time various framework are build and evolve make application development easier.Angular is an example of such framework.
Benefits Of Angular
- Give applications clean structure and loosely couple structure to easy to maintain
- Includes reusable code
- Applications are easy to testable
Architecture
Installation
ng new <application-name>
It will Create an angular application and for open it on IDE we can install VS code IDE
Now open VSCode and open your newly created application in VSCode.
Now serve the angular APP
ng serve
Now your application successfully working on port 4200.
Default structure and files you can check on VSCode.
Files and its meaning
- e2e: end to end test for application. automatic test for web application.
- node modules: Folder to store third party libraries that application dependant.
- src: Actual source code of an application,
In src folder application component modules default created by ng command,
Every application must have one module and component folder.
src includes app folder for actual application source code,
assets folder for static assets things(img, html, txt),
environments folder giving configuration according to deployed environments
favicon icon which is displayed in browser
index.html file which contain angular application, link and script we can dynamically inserted into this page.
main,ts : Starting point of an application, for bootstrapping main module of an application.
Polyfills.ts : It includes some file which is required running angular, polyfills fill the gap between features javascript an angular need and the feature supported by current browser.
styles.css : for global style css
test.ts : for testing purpose
Outside Src folder
.angular-cli.json : Configuration file for angular, pre standard configuration file
.editorconfig : for editor setting
.gitignore: this file for your git configuration which you want git should be ignore
karma.conf.js: Configuration file for test runner for javascript code
Package.json: Every node project have package.json
It maintain name version , scripts and dependencies(Libraries) Third-party or custom libraries in which your app dependant upon.
devDependencies is dependency we needed on development time for developer, dependencies for develop he application.
protractor.conf.js: Tools to run end 2 end test case for angular
tsconfig.json: It is the file use by typescript compiler, typescript compiler looks at the setting and based on the setting its compile the typescript code into javascript that browser can understand.
tslint.json: Which include number of setting for tslint. It check typescript code for readability, maintainability and functionality error
angular.json:
README.md:
Above is The Basic Structure of an Angular Applications.
Angular CLI uses a tool called webpack which is build automation tools, it gets all our scripts,styles combine it in bundle and then minified that bundle, this is for optimization,
Bundles like
polyfilles.js which fills gap between the version of javascript that angular need and version of javascript supported most browsers.
main.js : main source code
styles.css: css code
vendors.js: thirdparty library code
runtime.js:
HMR(Hot Module Replacement/Reloading): Whenever source code get modified application will automatically reloading.
Angular Version History
Difference between AngularJS , Angular 2 and Angular + x
AngularJS: It is published in 2010 code written in js to develop frontend application, Its JS framework for building client application, soon it get popularity and companies started using it but it has some drawbacks like code not design as per today expectation also it is overlay complex.So angular team decided to rewrite angular framework using the typescript.
Angular 2 : published in mid 2016 with all code rewritten in typescript.
Angular 3 was not published because of @angular/router 3.3.0
After that version prefix remove from angular and the n its simply we can say Angular.
Angular 4
Angular 4 and so on
