Home Web Front-end JS Tutorial How to create an Angular project using Angular CLI

How to create an Angular project using Angular CLI

Jun 02, 2018 pm 01:58 PM
angular create use

This time I will show you how to use Angular CLI to create an Angular project, and what are the precautions for using Angular CLI to create an Angular project. The following is a practical case, let's take a look.

Before starting the project, you need to install node and npm first, and then execute npm install -g @angular/cli to install Angular CLI.

1: Use the command line to create a new project

ng new newApp --skip-install
cd newApp
cnpm install
ng serve --open
Copy after login

Executing the above command will automatically create a new Angualr project and start the project.

Among them, --skip-install means that the node package will not be installed first. It will be much faster if we then use cnpm install to install it.

2: Directory structure

Now let’s take a look at what the ng command helps us generate, which is the directory structure of the project, which is First, have a general understanding of what it does. You don’t have to know everything, but first remember the following ones that I feel are important:

1.src: where the application code is stored;

2 .src/app: The main place where your code is stored. This may not be appropriate, but when you develop, you spend most of your time modifying the code here;

3.src/assets: pictures, etc. Where it is stored, it will be copied to the release package when building;

4.src/main.js: You will basically not modify it, it is the main entry of the program;

5.src /styles.css: Specially used styles are written in the corresponding places. As will be mentioned later, public styles will be written here;

6.karma.conf.js: Unit test configuration for Karma. It is used when running ng test.

Three: Self-defining components

import { Component } from '@angular/core';
@Component({
  selector: 'my-comp',
  template: '<ul><li *ngFor=&#39;let row of dataList&#39;>ID:{{row.id}} INFO:{{row.info}}</li></ul>',  
  styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
  
})
export class MyComponent {
  dataList = [
    { id: 1, info: "Angular" },
    { id: 2, info: "React" },
    { id: 3, info: "Vue" }
  ];  
}
Copy after login
A very simple component has been defined above, but in Before use, you still need to define it in the module. At this time, register it in src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
  declarations: [
    MyComponent
  ]  
})
......
Copy after login
Now that it is registered, you can use it. Use the above example The method is very simple, just customize a label my-comp, which is exactly the same as the normal p.

It should be noted that for the convenience of viewing, I have removed irrelevant code in the registration example. Fortunately, the actual situation includes registration of startup, other components, services, etc. You can look at the command line For other instructions automatically generated, here we mainly explain more important things, the same below.

Similar to AngularJS, Angular's selector has other features besides the custom tags above:

1.selector: 'element-name'//Custom

Label selector

2.selector: '.class'//Style selector;

3.selector: '[attribute]'//

Attribute selector;

4.selector: '[attribute=value]'//Attribute value selector;

5.selector: ':not(sub_selector)'//Invert selector;

6.selector: 'selector1, selector2'//Multiple selectors.

Four: Custom service

Like components, let’s define a service first.

import { Injectable } from '@angular/core';
export class DataFormat { 
  id: number; 
  info: string; 
}
@Injectable()
export class MyServ {
  getData(): DataFormat[] {
    return [
      { id: 1, info: "Angular" }, 
      { id: 2, info: "React" }, 
      { id: 3, info: "Vue" }
    ];
  }  
}
Copy after login
Next, let’s register it. The registration of services and components is a bit different. Let’s register it on the main component first. The default is to register it in the arc/app/app.component.ts file:

The use of the

import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
  providers: [MyServ]  
})
Copy after login
service is also very simple. We use the

constructor to demonstrate it here:

import { MyServ } from './my.service';
......
export class MyComponent {
  dataList: any[];  
  constructor(private demoService: MyServ) {
     this.dataList = this.demoService.getData();
    }  
}
Copy after login
Do you still remember the code of the custom component? We demonstrated the usage of the service in it, and only the modified part of the code is given above.

5: The use of routing

We give a simple usage of routing here. The specific details are similar to the above and will be discussed separately. To discuss, the purpose of this article is to get started quickly.

For the convenience of demonstration, we have defined two components by default: MyComponent and My2Component.

First of all, you need to make sure that is defined in the head tag of the index.html page or the script that dynamically generates this element.

We first register the route in src/app/app.module.ts:

......
import { RouterModule } from '@angular/router';
@NgModule({
  declarations: [MyComponent,My2Component],  
  imports: [  
    RouterModule.forRoot([    
      {path: 'my',component: MyComponent},      
      {path: 'my2',component: My2Component}      
    ])
  ]
  ......
})
......
Copy after login
It is very simple to use:

<a routerLink="/my">toMycomp</a>
<a routerLink="/my2">toMy2comp</a>
<router-outlet></router-outlet>
Copy after login

点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。

六:HTTP

由于@angular/http库中的HttpModule保存着http相关的服务,需要先引入进来(这里是在src/app/app.module.ts中引入):

import { HttpModule }  from '@angular/http';
@NgModule({
  imports: [HttpModule]  
})
......
Copy after login

现在,http就是一个服务,下面简单演示一种用法:

......
import { Http } from '@angular/http';
......
  constructor(private http: Http) {  
    http.get('assets/XXX.json').forEach(function (data) {    
      console.log(data['_body']);      
    });    
  }  
......
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何使用Vue.js中router传参

如何使用nodejs读取并去重excel文件

The above is the detailed content of How to create an Angular project using Angular CLI. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to personalize your iPhone on the latest iOS 17 How to personalize your iPhone on the latest iOS 17 Sep 21, 2023 am 08:17 AM

How to Personalize Calls on iPhone Apple’s iOS 17 introduces a new feature called Contact Posters that allows you to personalize the look of your call screen on your iPhone. This feature allows you to design a poster using selected photos, colors, fonts, and Memoji as contact cards. So when you make a call, your custom image will appear on the recipient's iPhone exactly as you envisioned. You can choose to share your unique contact poster with all your saved contacts, or choose who can see it. Likewise, during a call exchange, you will also see other people's contact posters. Additionally, Apple lets you set specific contact photos for individual contacts, making calls from those contacts

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

How to create pixel art in GIMP How to create pixel art in GIMP Feb 19, 2024 pm 03:24 PM

This article will interest you if you are interested in using GIMP for pixel art creation on Windows. GIMP is a well-known graphics editing software that is not only free and open source, but also helps users create beautiful images and designs easily. In addition to being suitable for beginners and professional designers alike, GIMP can also be used to create pixel art, a form of digital art that utilizes pixels as the only building blocks for drawing and creating. How to Create Pixel Art in GIMP Here are the main steps to create pixel pictures using GIMP on a Windows PC: Download and install GIMP, then launch the application. Create a new image. Resize width and height. Select the pencil tool. Set the brush type to pixels. set up

How to use GitLab for project document management How to use GitLab for project document management Oct 20, 2023 am 10:40 AM

How to use GitLab for project document management 1. Background introduction In the software development process, project documents are very important information. They can not only help the development team understand the needs and design of the project, but also provide reference to the testing team and customers. In order to facilitate version control and team collaboration of project documents, we can use GitLab for project document management. GitLab is a version control system based on Git. In addition to supporting code management, it can also manage project documents. 2. GitLab environment setup First, I

How to create a family with Gree+ How to create a family with Gree+ Mar 01, 2024 pm 12:40 PM

Many friends expressed that they want to know how to create a family in Gree+ software. Here is the operation method for you. Friends who want to know more, come and take a look with me. First, open the Gree+ software on your mobile phone and log in. Then, in the options bar at the bottom of the page, click the "My" option on the far right to enter the personal account page. 2. After coming to my page, there is a "Create Family" option under "Family". After finding it, click on it to enter. 3. Next jump to the page to create a family, enter the family name to be set in the input box according to the prompts, and click the "Save" button in the upper right corner after entering it. 4. Finally, a "save successfully" prompt will pop up at the bottom of the page, indicating that the family has been successfully created.

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

How to create a Gantt chart using Highcharts How to create a Gantt chart using Highcharts Dec 17, 2023 pm 07:23 PM

How to use Highcharts to create a Gantt chart requires specific code examples. Introduction: The Gantt chart is a chart form commonly used to display project progress and time management. It can visually display the start time, end time and progress of the task. Highcharts is a powerful JavaScript chart library that provides rich chart types and flexible configuration options. This article will introduce how to use Highcharts to create a Gantt chart and give specific code examples. 1. Highchart

How to Create a Contact Poster for Your iPhone How to Create a Contact Poster for Your iPhone Mar 02, 2024 am 11:30 AM

In iOS17, Apple has added a contact poster feature to its commonly used Phone and Contacts apps. This feature allows users to set personalized posters for each contact, making the address book more visual and personal. Contact posters can help users identify and locate specific contacts more quickly, improving user experience. Through this feature, users can add specific pictures or logos to each contact according to their preferences and needs, making the address book interface more vivid. Apple in iOS17 provides iPhone users with a novel way to express themselves, and added a personalizable contact poster. The Contact Poster feature allows you to display unique, personalized content when calling other iPhone users. you

See all articles