How to create an Angular project using Angular CLI-JS Tutorial-php.cn

How to create an Angular project using Angular CLI

php中世界最好的语言

Release： 2018-06-02 13:58:47

Original

1268 people have browsed it

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中文网其它相关文章！