Category Archives: Javascript

Angular Tutorial Series – Angular CLI Introduction

Angular Command Line Interface aka Angular CLI

Angular CLI is used to generate code/files for various things used in Angular like Components, Services etc. We would be discussing these topics in more detail in upcoming posts.

If you have followed my previous post, then you would have already installed Angular CLI, if not then please go to the post and follow the steps there.

Now let’s use Angular CLI to generate our new project. In order to understand Angular we would be creating one sample application which would be similar to IMDB(Internet Movie Database). For those who don’t know what IMDB is, it’s a site where you can find information regarding various movies, seasons, actors and also watch trailers.

Let’s name our application as MDB(Movie Database).

Now, go to the command prompt and create a folder named as MDB and go to that folder in the command prompt. I would be using command prompt or terminal interchangeably so for Mac/Linux users it means Terminal and for Windows users it means Command Prompt.

Run the following command to create a project.

 ng new --directory . 

ng is the command used which is angular cli, new means new project and directory parameter lets you choose which directory you would choose for files. ‘.’ means current directory.

It would ask for few inputs below, choose the following for now.

? What name would you like to use for the new workspace and initial project? MDB
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass

For last option you can choose Sass, Css, Less or Stylus.

Once the command is completed, it would generate few files like below.

Now, lets examine few of the folders which are generated by Angular CLI.
1. e2e
2. e2e/src
3. node_modules
4. src
5. src/app
6. src/assets
7. src/environments

The folder e2e & e2e/src contains all the base setup files for running end to end tests. We would explore e2e tests later near the end of the series. End to end tests are run using protractor which are basically integration tests.

node_modules is created by npm which contains all the packages which we need in our project.

src & src/app are the main folder in which we would be writing our code.

src/assets is the folder which contains various assets, which you would need minimal in the initial stages of this series.

src/environments is the folder which contains various environments settings.

Now, run the following command to install all the dependencies needed by angular project.

npm install

It would take few seconds. This command would only work if you are running it under the folder MDB.

Now run the following command to run the application which is generated by Angular CLI.

ng serve -o

The above command would also take some time to compile the application and would open the browser and it would look something like below.

Congratulations! You have successfully setup the Angular application.

Advertisements

Angular Tutorial Series

In this series of posts I would like to go in depth of Angular 7+ versions. This page is the index/table of contents page and would be updated as I add more content to this series and all the articles would be linked from here. All the topics which are linked have content and others which are not linked are in progress. 

Some part of the tutorial would need Backend service, for which I would be using in memory web api npm module which provides an easier way to mimic the actual server which can be replaced with actual backend server calls of your choice.

I would be using VS Code editor, but you can code in any editor of your choice. I would also provide link to each coding exercise wherever necessary.

Below are some of the topics which I would be covering in this.

  1. Setup Angular Development environment
  2. Angular CLI – Introduction & setting up the application
  3. Different development parts in Angular Application
    1. Components
    2. Directives
    3. Services & Dependency Injection
      1. Data Services
      2. Services with some reusable functionality
    4. Pipes
  4. Bootstrapping
  5. Components/Directives Lifecycle
  6. Component Interactions
    1. Parent to Child
    2. Child to Parent
    3. Siblings
    4. State Service
  7. Angular Forms
    1. Template Driven forms
    2. Reactive Forms
    3. Validations
      1. Angular Validations
      2. Custom Validations
  8. Routing
  9. Rxjs – Overview
  10. Angular Change Detection
  11. Internationalization
  12. Modules
  13. Libraries
  14. Angular Materials
  15. NgRx – Intro
  16. Unit Testing
  17. End to End Testing
  18. Angular Animations
  19. Deployment
  20. Server side rendering
  21. Sample Project – E Commerce Application
  22. References & where to learn more

Please feel free to add comment if you like me to add additional content on Angular and related technologies.

Angular Tutorial Series – Setup Angular Development environment

Some pre-requisites for setting up development environment are:

1. Install nodejs and npm

npm is a node package manager which is used to install various libraries needed for angular and related libraries. In order to install npm we need to install node.js. You can download node.js from https://nodejs.org. 

You can verify the node.js and npm by running the following commands in terminal/command prompt.

To check the node version, run the following command:

node -v

To check the npm version, run the following command:

npm -v

2. Install Visual Studio Code aka VS Code

VS Code is a very light weight cross platform Code Editor which supports many languages, intellisense, debugging and lot of extensions to extend VS Code. You can work on any other Code editor of your choice as well if you want, but I would highly recommend VS Code as I have not seen any other code editor which is better than VS Code and is free. You can install VS Code from https://code.visualstudio.com/download.

3. Install Angular CLI

Angular CLI or Angular Command Line Interface is a tool which lets you generate code using some specific command in terminal or command prompt. You can install Angular CLI using npm by using the following command.

 npm install -g @angular/cli

The above command would install angular cli globally i.e. it would be available in any directory. If you want to install angular cli in specific project only, then go to that folder in terminal/command prompt and run the following command.

 npm install @angular/cli

Object Oriented Programming in JavaScript

In this article I would like to post about the better way to program in JavaScript. First, I would try to list down few concepts about Object Oriented Programming and then  I would try and explain how these concepts can be incorporated in JavaScript. This topic is big in itself so I would break this topic into various articles. Following are the articles related to this topic.

  1. OOP Part 1 – Basics of OOP, how to implement OOPs concepts in JS
  2. OOP Part 2 – Advance concepts of OOPs, how to implement OOPs concepts in JS
  3. OOP Part 3 – Working example of OOP in real world JS.

Continue reading

Call a JavaScript method/code from Asp.Net Code behind

In day to day development, we face a requirement that we need to call a JavaScript method or some lines of JavaScript code from code behind. There are several ways to accomplish this.

  1. Using ScriptManager Class.
  2. Using Page.RegisterClientScriptBlock or Page.RegisterStartupScript or Page.ClientScript object

Page.RegisterClientScriptBlock or Page.RegisterStartupScript methods are deprecated methods and they shouldn’t be used. Microsoft has replaced them with Page.ClientScript object methods.

ScriptManager class can also be used to do the same but with the slight difference, these methods are compatible with Asp.Net AJAX partial post backs where as the Page.ClientScript object methods are not compatible with Asp.Net AJAX.

Continue reading