Posts

Angular: Counter Project

Counter Project: Steps: 1. Create the Counter project  2. Create the User Interface 3. Connect User Interface with angular 1. Create the Counter Project     Create an angular app with command:   ng new counter-app      Note: If you have any issue creating a project you can refer to link below:        https://flauntprogramming.blogspot.com/2020/06/hello-world-angular.html 2. Create the User Interface We Added a heading Counter App We  have used String interpolation to display the value of counter {{counter}} It displays the value that has been stored in the variable named counter declared in app.component.ts We have add two buttons to increment and decrement the value of counter (click)="increment()" It means whenever plus button is clicked, it will call the function increment() defined in app.component.ts (click)="decrement()" It means whenever minus button is clicked, it will call the function decrement() defined in ap...
Post a Comment
Read more

Angular Flow: Working Behind Scenes

Image
Introduction        Angular is a popular single page application development platform backed by Google. It is complex framework. Thus, for beginners it is important to understand the flow of angular to get clear picture of what`s going on in the background 1. Angularjson.file It is a file which has various configurations and projects defined for the angular project. This is the first file looked by builder for paths, configurations and main file main property of build in angular.json tells the builder from which file to start the app.   src/main.ts is the file from which app will start to run. 2. Main.ts This file acts as the entry point of the application It helps in creating the browser environment for application to run. This is one is two steps:                a) platformBroswerDynamic is imported import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;             ...
Post a Comment
Read more

Creating First Angular Project

Image
Setup: 1. Node Installation 2. Angular CLI Installation  1. Node Installation We need to use  Node  and NPM compile them into js file so that we can deploy them in production. Download Node LTS for your Operating system from link below: https://nodejs.org/en/download/ 2. Angular CLI Installation To Install Angular Cli  1. Open Command Prompt 2. Type the command  npm install -g @angular/cli   3. Press enter Creating New Project in Angular Steps: 1. Create angular project using command  ng new my-app   ng - stands for angular new - option to create new project my-app - name of the project  2. Type yes to add angular routing 3. Choose the type of Styling : CSS, SCSS, Sass, Less, Stylus After installation we will get output like below. Running the Angular project Steps: 1. Go inside the angular project using  cd my-app   2. Hit the command  ng serve   3. Go to URL:  h...
Post a Comment
Read more

Introduction to Angular

Image
Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript. It has all the features that makes website development, developer friendly. Lets walk you through some basic features. Reusability:   Suppose we have designed a beautiful header and you want this header to be visible on every page of your website.  Normal approach would be to copy the header code and paste it in every page of your website. Angular saves us from all of that pain of writing that lines of code again an again. Angular has a feature called component. Everything inside a angular website is a component. So breaking a website into chunks we can different component.Header component, Footer Component, Sidebar Component and so on. Benefit of these components is that, it can be re-used many number of times. Coming back to header example. In Angular we would make a header component. Angular would give something called <custom-header/> tag. So, wherever we w...
Post a Comment
Read more