Angular CLI is a command line interface tool that creates projects, adds files, and executes a lot of development tasks such as testing, packaging, and publishing. The quick start here is based on this command.
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: Create a new project using the command line
ng new newApp --skip-install cd newApp cnpm install ng serve --open
Execute the above command and automatically create a new Angualr project and start the project.
Among them, --skip-install means that the node package will not be installed first, and we will then use cnpm install to install it much faster.
Two: Directory structure
Now let’s take a look at what the ng command has helped us generate, that is, the directory structure of the project, and what it does. First, we have a general understanding. You may not know everything, but remember the following people who feel important:
: Where to store the application code;
/app: The main place for your code to be stored, it may not be appropriate to say this, but when you develop, you spend most of your time modifying the code here;
/assets: Where pictures and other storage are stored, they will be copied to the publishing package during construction;
/: You basically won't modify it, it is the main entrance to the program;
/: The styles specially used are written in the corresponding place, and later, the public styles will be written here;
: Configure Karma's unit tests, and it will be used when running ng test.
Three: Custom components
import { Component } from '@angular/core';
@Component({
selector: 'my-comp',
template: '<ul><li *ngFor='let row of dataList'>ID:{{}} 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" }
];
}
A very simple component has been defined above, but before use, you need to define it in the module, and then register it in src/app/:
import { NgModule } from '@angular/core';
import { MyComponent } from './';
@NgModule({
declarations: [
MyComponent
]
})
......
Now that you have registered, you can use it. The above example is very simple to use, which is to customize a tag my-comp, which is exactly the same as the usage of ordinary div.
It should be noted that for the sake of convenience of viewing, I removed the irrelevant code in the registration example. Fortunately, there are registrations including startup, other components, services, etc. You can take a look at other commands automatically generated by the command line. Here we mainly explain more important things, the same below.
Similar to AngularJS, Angular's selector has other options in addition to the above custom tags:
: 'element-name'//Custom tag selector;
: '.class'//Style selector;
: '[attribute]'//Attribute selector;
: '[attribute=value]'//Attribute value selector;
: ':not(sub_selector)'//Inverse selector;
: 'selector1, selector2'//Multiple selectors.
Four: Custom Service
Like components, let's first define a service.
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" }
];
}
}
Next, register it. The service and component registration are a bit different. Let’s register it first on the main component. By default, register it in the arc/app/ file:
import { Component } from '@angular/core';
import { MyServ } from './';
@Component({
providers: [MyServ]
})
The use of the service is also very simple. Let's use the constructor to demonstrate it here:
import { MyServ } from './';
......
export class MyComponent {
dataList: any[];
constructor(private demoService: MyServ) {
= ();
}
}
Remember the code for custom components? We demonstrated the usage of the service in it, and only some of the modified codes are given above.
V: Use of routes
We will give a simple usage of routing here. The specific details are similar to those above and will be discussed separately. 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, you need to determine whether the page's head tag is defined in <base href="/" rel="external nofollow" > or a script that dynamically generates the element.
Let's register the route in src/app/ first:
......
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [MyComponent,My2Component],
imports: [
([
{path: 'my',component: MyComponent},
{path: 'my2',component: My2Component}
])
]
......
})
......
It's very simple to use:
<a routerLink="/my">toMycomp</a> <a routerLink="/my2">toMy2comp</a> <router-outlet></router-outlet>
Click toMycomp or toMy2comp to jump to the corresponding routing settings component.
Six: HTTP
Since the HttpModule in the @angular/http library saves http-related services, it needs to be introduced first (here is introduced in src/app/):
import { HttpModule } from '@angular/http';
@NgModule({
imports: [HttpModule]
})
......
Now, http is a service. Here is a brief demonstration of a usage:
......
import { Http } from '@angular/http';
......
constructor(private http: Http) {
('assets/').forEach(function (data) {
(data['_body']);
});
}
......
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.