angular basic commands

The version of npm is 3.10.10. Now that we have nodejs and npm installed, let us run the angular cli commands to install Angular 4. You will see the following commands on the webpage −
npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve
Let us start with the first command in the command line and see how it works.
To start with, we will create an empty directory wherein, we will run the Angular CLI command.
We have now installed Angular 4. Let us now create our first project in Angular 4. To create a project in Angular 4, we will use the following command −
ng new projectname
We will name the project ng new Angular 4-app.
Now that we have the file structure for our project, let us compile our project with the following command −
ng serve
The ng serve command builds the application and starts the web server.
The web server starts on port 4200. Type the url http://localhost:4200/ in the browser and see the output. Once the project is compiled, you will receive the following output −
Let us complete the project setup. If you see we have used port 4200, which is the default port that angular–cli makes use of while compiling. You can change the port if you wish using the following command −
ng serve --host 0.0.0.0 –port 4205  (yellow background noneed ie ng serve --port 4201)
The Angular 4 app folder has the following folder structure −
Let us now run the command to create the component.
ng g component new-cmp

How to Create Custom Directives?

In this section, we will discuss about Custom Directives to be used in components. Custom directives are created by us and are not standard.
Let us see how to create the custom directive. We will create the directive using the command line. The command to create the directive using the command line is −
ng g directive nameofthedirective

e.g

ng g directive changeText
To create a service, we need to make use of the command line. The command for the same is −
C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>
The files are created in the app folder as follows −



Comments

Post a Comment

Popular posts from this blog

reactjs questions part 4

A prop change does not re-render a component if the prop is stored as a local variable. It only re-renders when the prop is stored as a state variable. =======  I take 2-3 interviews per week on average for react devs. The most common one I ask my candidates is this: Explain how react works under the hood to me like I'm 5 yr old What problem did react come to solve? What are composable components? How do you separate logic and style? What are the security measures to be taken to avoid data leak in frontend TYPESCRIPT specific How do you validate form input data  How do you design typesafe components GENERAL what are accessible components, how do you design them ? State management - redux vs context API.  --------------------------2------------------------------- Here are some key API-related questions to prepare for your React.js interview: API Calls and Data Manipulation How do you make API calls in a React application and handle the response data? What is the best pract...
Read more

ReactJS: How and when to force a React component to re-render

Image
What is force re-rendering? Force re-rendering in React is like pressing the refresh button on a webpage, even when the page seems just fine. In React, it means telling a component to update and redraw itself, even if nothing has really changed in the data (stat/props) it uses. Although React is usually good at knowing when it is time to update a component, there are moments when you want to take the reins and tell it to refresh a certain part of the codebase. In this article, we will explore this in more detail. Understanding React’s rendering behavior Let’s take a closer look at how React’s rendering process works by default. To understand when and why you might need to nudge React into re-rendering, you need to get familiar with its underlying architecture. At the heart of  React’s rendering  magic lies the Virtual DOM. Imagine it as a clone of the actual DOM, the structure of your webpage. React uses this Virtual DOM to figure out what needs to be updated when your data ch...
Read more

Q: Error Boundary in React that catches an error and displays a fallback UI

ErrorBoundary Component : This catches errors in its child components and displays a fallback UI ( Something went wrong. ). MyComponent : This component intentionally throws an error to demonstrate how the error boundary works. App Component : Wraps  MyComponent  with  ErrorBoundary  to catch and handle errors  When you run this code, you'll see "Something went wrong." displayed on the screen because MyComponent throws an error, which is caught by the ErrorBoundary .  CREATING SAMPLE: Let's create a simple example of an error boundary in React that catches an error and displays a fallback UI when an error occurs in a component. 1.ErrorBoundary Component import React , { Component } from " react " ; class ErrorBoundary extends Component {   constructor ( props ) {     super ( props ) ;     this . state = { hasError : false } ;   }   static getDerivedStateFromError ( error ) {     ...
Read more