Angular Basics - aakash14goplani/FullStack GitHub Wiki

Topics Covered

What is Angular

Angular is a JavaScript framework that helps in creating reactive Single Page Application (SPAs).
It renders in browser by updating the already loaded DOM in runtime. It is way better to update DOM on client browser than to sent request to server each time.

What is npm

npm i.e. Node Package Manager is the world's largest Software Registry. The registry contains over 800,000 code packages. You can download all npm public software packages without any registration or logon. The name npm (Node Package Manager) stems from when npm first was created as a package manager for Node.js. All npm packages are defined in files called package.json.

npm includes a CLI (Command Line Client) that can be used to download and install software: npm install <package>

Angular CLI

  • The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
  • Installing Angular CLI - npm install -g @angular/cli
  • Running Project
    1. npm install -g @angular/cli
    2. ng new <app-name>
    3. cd <app-name>
    4. ng serve

Folder and File Structure

  1. .editorconfig:

    • configuration file for code editors e.g. Visual Studio Code that instructs for default configurations like - perform indentation in this project so that it can override your user default settings or to deny the default settings and make sure that the code and this project actually is the same for all users across the entire world no matter which editor they use.

  2. .gitignore:

    • Used when working with Git. Leaves out or Excludes all the files mentioned here while pushing code to repository.

  3. browserslist:

    • configuration file is picked up by the angular CLI when you build your project for production and it basically tells the angular CLI which browsers you want support with your project.
    • It will then use this information for example to adjust your CSS styles and prefix them to support all these browsers and also to load the right polyfills.

  4. karma.config.js:

    • used for testing where angular angular CLI uses it behind the scenes. It allows to find you and how your tests are executed and so on.

  5. package-lock.json:

    • which is generated based on your package.json file which in turn is a file that manages the packages your project uses and the workings of those packages.

  6. package.json:

    • The CLI command ng new creates a package.json file when it creates the new workspace. This package.json is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace.
    • Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios. You add packages to package.json as your application evolves.
    • it has scripts which we can execute using ng <script_command>.
    • It also lists dependencies that contains libraries and frameworks your app is built on, such as Vue, React, Angular, Express, JQuery etc. Required during development as well as in runtime. ng add <dependency>
    • The devDependencies contains packages which are used during development or which are used to build your bundle e.g., Nodemon, Babel, ESLint etc. These packages are necessary only while you are developing your project. Required only during development. npm install --dev <package-name>, here -dev is important
    • Whenever you add new package using npm install <package_name> command, this file gets updated with the information of that package.
    • It will also generate a entry in package-lock.json file to store the exact words off your third party dependencies.

  7. typescript.*:

    • these files configures options for typescript compiler.
    • it has compilerOptions specifies default typescript compiler settings.
    • angularCompilerOptions: specifies default options for the angular (AOT) compiler.

  8. tslint.json:

    • used for lending which checks your code quality and basically tells you whether you're following best practices and you wrote your code in a good way.

  9. angular.json:

    • This is a file which is generated automatically when you generate a new angular project and this is used by the CLI behind the scenes to run different commands.
    • $schema: angular.json file uses JSON format and follows a certain schema which is developed by the Angular team.
    • newProjectRoot: This controls where new projects are added.
    • projects: Details about current project. You can manage more than one project in a angular project folder.
    • projectType: Type of project. Defaults to application. Other available option: library.
    • schematics: read here
    • root: specifies root folder of this project.
    • sourceRoot: specifies root folder of this project source code i.e. src folder
    • prefix: this is added in front of every component. So if you don't want to use app you can use a different one here and then you get this architect command.
    • architect: rest of our project specific settings. Now here are the different commands you can execute can be configured.
    • build: one of the command under architecture which can be executed ng build --options.
    • outputPath: place where the final build project should be output into.
    • index: path for "src/index.html" file
    • main: path for "src/main.ts" file
    • polyfills: path for "src/polyfills.ts" file
    • tsConfig: path for "tsconfig.app.json" file
    • aot: Ahead of Time Compilation. Defaults to false.
    • assets: specify static assets like files, images etc.
    • styles: specify external CSS files
    • scripts: specify external JS files
    • configurations/production/fileReplacements/environment.*: configuration options can be configured for different environments for your options so you could say I want to have some options which are only taken into account if I build for production or if I build for development. This is in the environments folder and at the end this simply tells CLI that it should swap the environment he has file for the environment or property as file when it builds for production. This allows you to specify different environment variables in the end for the different productions you're building for.
    • serve: command to specify options during serve i.e. starting application and during build i.e. building application for production.

References from official documentation

File Structure File Name
Workspace configuration files .editorconfig, .gitignore, README.md, angular.json, package.json, package-lock.json, src/, node_modules/, tsconfig.json and tslint.json
Application project files src/
Application source files Top level of src/
app/, assets/, environments/, favicon.ico, index.html, main.ts, polyfills.ts, styles.sass and test.ts
Inside src/
app/app.component.ts, app/app.component.html, app/app.component.css, app/app.component.spec.ts and app/app.module.ts
Application configuration files browserslist, karma.conf.js, tsconfig.app.json, tsconfig.spec.json and tslint.json
End-to-end test files e2e/
Library project files src/lib, src/test.ts, src/public-api.ts, karma.conf.js, ng-package.json, package.json, tsconfig.lib.json, tsconfig.spec.json and tslint.json

Schematics

  • Schematics are a powerful tool that are basically blueprints which certain Angular commands can pick up and for example you can have schematics for:

    • ng generate to generate new building blocks in your app like components
    • ng add for adding for example libraries or certain capabilities to a project
    • ng update for keeping your project up to date

  • You can build your own schematics. Angular has some built in schematics which you have unlocked by default and the Angular CLI and third party packages can also add schematics.

Builders

  • With builders you can build your application for different environments.

  • There are some built-in builders:

    • ng build / ng test / ng lint: basically all executing code, compiling code analyzer code and then for example optimize it for production run tests on it or simply tell you how good your code quality is.
    • ng deploy: It will not only build your product for production but then also already go ahead and apply it to a certain host.

  • These are automation commands which you also can customize either by writing your own builder or deployment to builder or by hooking into the configuration and adjusting those builders.

Differential Loading

  • We have our angular app and we're hosting on server. We might have user A who has a modern browser and user B who has a legacy browser.

  • Now the thing is user A with a modern browser does not needs any polyfills, all the features we use will work there just fine and therefore we could ship a smaller code bundle to the user because our code doesn't have to be compiled down to super old versions of JavaScript.

  • So these packages which enables certain features in a browser user B on the other hand needs a polyfill so that your application compiles down to support older browser. So a bigger bundle needs to be shipped.

  • The problem is of course we can always ship a bigger bundle so did we support both B and A. If we always ship the most optimized and smallest bundle possible we ignore a user B. With differential loading we do both.

  • The Angular CLI actually produces multiple workings of your app when it builds it for production. You could say - it produces a small code file which runs first when a user visits your page to identify which browser does user is using and then this small initial code file determines which bundle gets served to the user.

  • So with differential loading user using a modern browser has to download less code than a user using an older browser and this gives you the best of both worlds you support all users but you make sure that every user just has to download the code it really needs.

  • This is built into angular in our dist folder. We actually see two versions of every file - one that supports modern browsers and other that has polyfills.

  • The differential loading feature what you get out of the box and you do partly configure it in the browserslist file. You tell Angular which browsers you want to support and this tells angular how it should build and optimize these different bundles.

  • List of generated files post build

Angular Libraries

⚠️ **GitHub.com Fallback** ⚠️