Angular

Last Updated: 6/15/2023

Structure of Angular Projects

https://angular.io/guide/file-structure

  • e2e folder:

    • Write end to end test for application
    • Automated test that simulate real user
    • Write code to launch our browser - navigate to home page - click links - fill form - click button - assert something on the page

  • node_modules:

    • store all the third party libraries the application depends
    • purely for development - when compile our app - parts of third party lib are put in bundles and deployed in our app
    • this folder is not deployed to the server

  • src

    • actual source code of the application
    • app.module.ts, app.component.ts
    • every app has atleast 1 module and 1 component

  • assets:

    • store static assets of our app like image, icons, text

  • environments:

    • store configuration settings for different environments
    • environment.prod.ts - for production
    • environment.ts - for development

  • index.html

    • html page that contains our angular app
    • no reference to scripts & stylesheets - they are dynamically inserted

  • main.ts

    • starting point of our application
    • bootstraping the main module of our application - AppModule

  • polyfills

    • imports scripts for running angular
    • angular framework uses features of javascript that are not available in the current version of javascript supported in most browsers
    • fills the gap between the features of javascript angular needs and features of javascript supported in current browser

  • styles.css - add global styles for the application. each component can have own styles

  • test.ts - setting up our testing environment

  • angular-cli.json - config for angular cli -.editorconfig - when working in team environment - all developers use same settings in their editors -.gitignore - excluding certain files and folders from git repository.

  • git: tool for managing and versioning your source code

  • karma.conf.js - config file for test runner for javascript code

  • package.json

    • a standard file every node project has
    • dependencies: libraries the application depends upon
    • devDependencies: libraries we need to develop our application - not needed to run our app on prod server

  • protactor.conf.js - config file for protactor - tool for running end to end test for angular

  • tsconfig.json

    • bunch of settings for typescript compiler
    • typescript compiles ts code to js code that browser can understand

  • tslint.json

    • tslint - static analysis tool for typescript code
    • checks typescript code for readability, maintainability and functionality errors

  • Webpack

  • angular cli uses a tool called webpack which is a build automation tool -

  • get all scripts & styles - combines them and puts into bundle & minifies the bundle - this for optimization

  • polyfills.bundle.js - all the scripts to fill the gap between the version of javascript angular needs and version of javascript supported in current browser

  • main.bundle.js - source code of the app

  • style.bundle.js - includes all stylesheets - styles are stored in javascript bundle

  • vendor.bundle.js - all third party libs

  • any changes in ts, css, html - webpack automatically recompiles your app - refresh the bundle

  • HMR (Hot Module Replacement or Reloading) a feature of webpack - when one of the source code file is modified - webpack automatically refreshes the browser

  • Webpack - automatically inject scripts in index.html

Previous
Next