Skip to main content

Create Your First Angular Application - My Flower Store

 



Last tutorial you have learned how to set up your environment to work with Angular. In this tutorial you will learn how create your first Angular application.

Steps to create the Angular Project

Open command prompt Run 

ng new <<your app name>>

Once you run the above command it will ask you to select the type of css that you need to use.

Then Angular CLI will install necessary npm packages and other dependencies.

ng new my-flower-store command


Within a minute or two CLI will create the project with all the necessary features that you can run your app.

Initial app contains

  • A new workspace, with a root folder named my-flower-store (project name you gave with ng new command)
  • An initial skeleton app project, also called my-flower-store
  • An end-to-end test project (in the e2e subfolder).
  • Related configuration files.

How to run your first Angular App

Type cd my-flower-store

Run ng serve --open


ng serve --open command

ng serve command will build the app and it will start the development server. This will rebuild your app whenever you do the changes to project files.

--open command will open new browser to http://localhost:4200

If you wanted to change the port, you can use command

ng serve –port <<port number>>

Congratulations! You have created your first angular application and you will see the sample html content as below in your browser.


My Flower Store App in Browser



Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Building robust APIs with Node.js

Node.js is a popular open-source JavaScript runtime environment that allows developers to build scalable and high-performance web applications. One of the key strengths of Node.js is its ability to build APIs quickly and efficiently. APIs, or Application Programming Interfaces, allow different systems to communicate with each other, enabling data exchange and other operations. Building robust APIs with Node.js requires an understanding of RESTful architecture, which is a widely adopted standard for creating APIs. RESTful APIs provide a standardized way to expose data and functionality over the web using a set of HTTP methods such as GET, POST, PUT, and DELETE. To build a robust Node.js API, developers must choose an appropriate framework and set up a development environment. They should also handle errors and exceptions, implement authentication and authorization, and use middleware to enhance the functionality of the API. Writing test cases, documenting the API using tools such as Swa...
Post a Comment
Read more

PrimeNG UI Components For Angular Application

Getting Started With PrimeNG Styling in Angular App  This chapter we are going to check how you can add PrimeNG card component to show available flowers in the stock. Before styling the app, I have added some images of flowers to our assets folder as below. In app.module.ts file you can import PrimeNG Card module as below. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; ; @NgModule({   declarations: [     AppComponent,     LandingComponent,     HomeComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     CardModule,        ],   provider...
Post a Comment
Read more

DevOps automation using Python - Part 1

DevOps automation is the practice of automating the process of building, testing, and deploying software. Python is a popular language for DevOps automation because of its simplicity and versatility. In this article, we will cover the basics of getting started with DevOps automation using Python. Prerequisites Before we begin, make sure you have Python installed on your system. You can download Python from the official website at https://www.python.org/downloads/ . We will also be using some Python packages, so make sure you have the following packages installed: pip : The package installer for Python. virtualenv : A tool that creates isolated Python environments. Setting up a Virtual Environment The first step in getting started with Python DevOps automation is to set up a virtual environment. A virtual environment allows you to create a separate environment for your Python project, which can help avoid conflicts with other packages on your system. To create a virtual environment, ope...
1 comment
Read more