CodeWithAbi

Angular In Depth - Part 1

Angular In Depth - Part 1

Subscribe to my newsletter and never miss my upcoming articles

Exploring core concepts of Angular in depth

This series of Angular in depth will cover all the following features part by part :

  • Basic Understanding of Angular and features
  • Custom components with Basic Understanding of Angular and features

    Things required to start Angular development

    • Understanding on HTML, CSS, Typescript
    • Node installed in system

    Download | Node.js

    • install angular cli to scaffold application
    npm install -g @angular/cli
    

    Take a tour of the example application

    Lets take a tour on example application "Crazy developers" together by exploring all Angular topics one by one

    Create new Angular application using Angular CLI

    ng new crazydevelopersapp
    
    • ng : referring to angular CLI
    • new : is the keyword to create new angular application
    • crazydevelopersapp : application name

    If project needs to be created in existing folder

    ng new *crazydevelopersapp* --directory ./
    

    CLI asks to enable routing choose yes and choose SCSS for stylesheets. folder structure after scaffolding the template looks like this

    Untitled.png

    Okay now Why Angular ?

    we will see main features of Angular Core with an example

    • custom HTML content: You can create your own custom HTML content and extend application functionality.

    app-root is the custom HTML Tag for app component html

    Untitled 1.png

    • separating data or the model of the application from view template

      below example shows title in html tag is a variable consists of string "crazydeveloper" in component.ts

    Untitled 2.png

    • component based architecture co ordinates between view and data

    Untitled 3.png

    • built in change detection mechanism which is completely transparent which synchronizes with view

    • Updating of data in secure way

    We will discuss on components, In-Depth Angular - Medium

    CodeWithAbi

    Other than technical follow me on instagram

    instagram.com/abi_aradhya

#angular#frontend-development#basics#web-development
 
Share this