Configuring Angular app with Devops Git

1) download the Git.exe from the internet
2) - To get the git version
   > git --version

-- To add the Devops project Git Repository to store the project files
   > git remote add origin https://VSMarket@dev.azure.com/VSMarket/VSMart/_git/VSMart

-- To verify the remote git Orgin path
   > git remote -v


-- Stage all the changes before commit
   > git add .

-- Commit all the changes with comment
   > git commit -m 'first commit'

-- Push all the code changes to the Devops Git Repository
   > git push --set-upstream origin master



Then in Visual Code
1) Install the Git repos extention
2) In the bootom blue color section , click on Team tab beside master* link
3) It will ask for Access token from your organization
4) Go to the Profile -> Under Security - select Personal Acces token --> click new token +  button
5) Give the requred fields , it will generate new access token
6) Remeber to store/copy this accees token, it will not show again.
7) paste in visual code and add from step 2 .

8) Now you are fully connected to Azure  Git repos


Steps to be followed to setup angular app and git repository in the system

Step 1:
-1- Create an azure account
https://portal.azure.com
--  Remeber username and password for microsoft account

-2- Download the visual studio code and install from below link
https://code.visualstudio.com/download
-3- download the git set up and install
https://git-scm.com/

Step 2:
-- Create a folder in local drives(D/E/F) and clone the code from devops.It will download the source code from devops repositorty
-- Go to the extentions tab on right side icon menu,in the search fieldd enter azure repos
-- In the extentions tab ,search git repos and install the extenstion
-- open the visual studio code - From menu options click on "Terminal" - select new termial
-- change the directory to  project folder , where the package.json file exists.
-- type below git commands
1) git remote -v - repository
2) git status  ---- changes
3) git add . -- after making any code changes and tested thoroughly
4) git commit -m 'write your comment'
5) git push

Step 3:
1) confgure angular in Windows OS is
a)  in command prompt > ng --version
    if the above command gives you error
  install cli
            npm install -g @angular/cli
b) In Windows OS

•  Right Clicked on My Computer (windows)
• Selected Advanced System Settings
• Clicked "Environment Variables"
• Under "Path" variable, made the FIRST value listed %AppData%\npm

c) Even if you are getting error use the below command
     Set-ExecutionPolicy Unrestricted -Scope CurrentUser

Step 4:
 1) In visual studio code , open the new terminal from Menu items
 2) Key board shot-cuts usefull while developement are
        ctrl + ' (tick )
        ctrl + c - to stop ng serve
3) Use full commands are
        1) "ng serve" == "npm start"
        2) "ng build" for local build & "ng build --prod" for production


Step 5: Use full git coomands to create a new branch and merge the changes to master branch

git branch - get the list of branches

git branch new_branch_name -  to create a new branch

git checkout new_branch_name - switch to new branch

After making the changes in new local branch, merge the changes to master(production branch)
 -- first switch to master branch, then merge the new branch code
git checkout master 
git merge new_branch_name

git branch -d new_branch_name --  delete the branch

Angular 8 & 9 Features and Advantages

Angular is a platform and framework for building single-page client applications in HTML and TypeScript. Angular is written in TypeScript.

The advantages of using the angular are listed below

    1)Two way data binding, using banana in a box syntax “[(ngModel)]”
    2)Dependency injection
    3)Uses MVC pattern
    4)Supports animations and event handler
    5)Provides client server communication
    6)Custom directives creation
    7)Community support for development queries

The disadvantages are

    1)Complex single page Applications (SPA)
    2)Dynamic nature of applications
    3)Learning of angular is difficult


New Futures in Angular 8 are

    1) AOT compiler – AOT is default rendering engine – for compilation
IVY compiler preview is introduced. The AOT compilation step only ran when we executed using   the production flag

ng build –prod.

    2) Bezel engine

When you use Angular CLI build commands such as ng build and ng serve, Bazel is used behind the scenes.

   3) Lazy loading

For large apps with lots of routes, consider lazy loading — a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

   4) Web workers
   5) Support for Typescript 3.4 and 3.5

New Futures in Angular 9 are

1) Angular Ivy  Engine – is the default rendering engine – for compilation
2) Support only Typescript 3.7 or greater  - Typescript 3.4 and 3.5 are no longer supported

  - Version 9 is more about changes to the framework, not the code that we wrote
  - Ivy introduces more comprehensive type-checking within templates.
  - AOT compilation with Ivy is faster and should be used by default.
  - Angular 9 brings AOT to the dev build, too! The Ivy compiler makes our builds much    faster in build.

ng serve

  - Ivy, the default compiler that can reduce bundle size, improve debugging, and much more.
  - For building the application, aot: true, is set to true.i.e, the default compilation is using IVY along with aot.

  Angular.json Contains the below configurations for aot in build section

Lession-2- Angular Application folders and files

Hi Techies,

Thank you for visiting my pages, please write your queries and comments in the comments section at the end of this post. Please share this pages to other audiences of your colleagues, friends.

Tutorial 1 is the basic introduction part for angular application. Today we are going to learn few more basic concepts for starting the angular application development. As i said simple angular, lets start with simple concepts. But this knowledge is very important for facing your interviews.

I am writing this post as a notebook, not like a tutorial.All the points i covered here, are the most important topics. You can refer this notes every day at least twice a day, so that your mind will remember them better.

We start with Application Structure and it's folders.

1) node_modules folder
      This folder is used for storing all the packages/references used in the application. If you install a new package using CLI (command line interface) , Those packages are added under this node_modules folder.

Example:
cli cmd-/

   npm install --save bootstrap
   npm install --save Jquery

These bootstrap & Jquery packages will be added under node_modules folder and used as reference for this application.

2) src folder
     This is the main folder for used in the application design. It internally contains below folders and files.
              a) app folder
              b) assets folder
              c) index.html file
              d) main.ts file
              e) styles.css file
              d) test.ts file

We will discuss about these folder and files in detail in below sections.

a) app folder
      app folder is the application folder. All the components, modules, service that we create during the development will be added under this app folder only. The main important files under this app folder are given below

     1) app.module.ts
     2) app.component.ts
     3) app.component.html
     4) app.component.css

These files are the heart of  angular application. These files contain the logic for running the application.We will discuss about these file in detail at the end of this post.As a developer most of the time, i.e 80% , we interact with these above four files only.

b) asset folder
     This folder contains the images, icons, data files and XML files used in the application.

c) index.html file
    This is the most important file. In tutorial 1, we said angular is used to design complex single page application(SPA), this is the file with complex java-script and html code.

**Angular compiles all the components, modules , services written in typescript and Html templates into a simple JavaScript, html code and stores in the index.html file.

This process of converting the typescript to java-script is called "Transpiling".

This page contains the pre-compiled code for all the component used in the application. So that, when a user request for a component or navigate from one page to other page from menu, the page will be rendered(loads) faster with out any delay.

Only the content inside the document will be updated. It will not refresh the entire browser page. Url path in the address bar will be changed. Hence the angular applications performs better compared to other asp.net, MVC applications.

Angular Application - Folder structure

  d) main.ts file
      This is the main entry point of the angular application. This file compiles the App Module and renders the requested components in the browser.

 e) Styles.css
     This is a style sheet file which contains the styles for html dom elements.Styles specified in this file are applied globally in the application.


Let's discuss about the app folder files here

1) app.module.ts
    This Typescript file is the root module class for the application. we provide or group all the components, modules, service references in @NgModule () decorator.  @NgModules takes a metadata object that tells angular how to compile and launch the application.

@NgModule({

  declarations: [

    AppComponent,

    HeaderComponent,

    FooterComponent,

    ProductListComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [

    DBDataService

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

2) app.component.ts
    This Typescript file contains  @Component() decorator. This file is the root component class. This file contains the logic or methods to  control the application UI.

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

3) app.component.html
     This is the root Html file used in the index.html.We will add the individual component template directives in this file.

<!--Header component tags-->

<app-header></app-header>

<!--other application component tags -

    You can specify any number of components-->

<app-product-list></app-product-list>

<router-outlet></router-outlet>

<!--End of other application component tags-->

<!--Footer component tags-->

<app-footer></app-footer>

4) app.component.css
    This is the root file for styling the index.html file. it contains styles for elements in the document.

Let's discuss in depth about these files in the next post. Along with this you can go through the official angular website for more information.Please write your queries and comments in the comment section below.

Thank you..

Lession-1 - Angular 8 introduction

Hi Techies,

Welcome to our simple learning platform for angular.

As I said Simple, means these topics are for immediate developement. You no need to swim into deep, you just learn to float on water. So that you can survive. Once you got confidence,  you can do actual deep swimming. I hope you understand the meaning of Simple Angular. So let's begin the lession.

Angular is a simple, easy to learn app design framework.
Angular uses typescript, html, css programming.
Once you learn this language, it is very easy  to develop cross platform applications for desktop, tabs and mobiles.

Angular is the trending technology for developers who are from programming background like JAVA, Jquery, C# , Dot Net.


Angular uses TYPE SCRIPT, which is  developed by MICROSOFT and is maintained by GOOGLE. So there is good a future for this framework.

Angular is an App design framework
Angular is used to design complex single page applications.
Angular is a component based programing.
Angular follows MVC pattern architecture.
Angular has the separation of code files.


Angular file types are given below,

    1) .css - styling the page
    2) .html - template design markup
    3) .ts - typescript for logic
    4) .json -  for configurations settings

Angular has 3 major configuration files

  1) Angular.json
  2) Typescript.json
  3) Package.json

Angular has root folders and files like

   1) src folder
   2) node_modules folder
   3) configuration files shown above

                            Angular  basic folder  structure

 Angular user CLI for faster application development.  CLI is called as Command Line Interface for generating the files such as
   1) components
   2) modules
   3) services
   4) classes.

We will learn more about these topics in next post. These are the basic topics and are very usefull for interview.

I  hope you got a better  understanding of the Angular application structur, folders and files. In the next post we will discuss these topics futher.