初始化
1.安装cli： npm install -g @angular/cli
2.安装目录及初始化： ng new my-app
3.启动开发服务器 cd 到当前目录运行： ng serve (--open或-o)
常用命令
1.创建一个名为 heroes 的新组件: ng (generate 或 g） component heroes
注：组件可以指定目录如: component/heroes
2.创建类似于vuex的服务如: ng g service services/common
用法：
1.app.module.ts里引入服务
//引入服务
import { StorageService } from './services/storage.service';
//引用http(可选，用就引入)
import { HttpClientModule } from '@angular/common/http';
//引入form(可选，用就引入)
import { FormsModule } from '@angular/forms';
@NgModule({
...
imports: [
FormsModule, //引入form (可选，用就引入)
HttpClientModule //引入http (可选，用就引入)
],
providers: [StorageService], //服务
})
2.直接抛出定义方法即可
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CommonService {
public domain = "http://xxx.com/";
constructor(public http: HttpClient) { } //引入http方法
get(api: string) { //定义方法
return new Promise((resolve, reject) => {
//http用法
this.http.get(this.domain + api).subscribe((response) => {
resolve(response)
})
});
}
}
3.引用页面用法
import { CommonService } from '../../services/common.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
public list: any[] = [];
constructor(public common: CommonService) {} //类初始化引用
ngOnInit() {
//调用
this.common.get("api/productlist").then((response: any) => {
this.list = response.result;
})
}
}
模块化开发设置自定义模块
命令：ng g module module/user （加 --routing 是给模块里建路由用，实现模块懒加载）
1.模块创建完需要暴露出去：在创建的模块module里的
@NgMoule（{
...
exports:[xx(模块名)]
}）
注：模块里创建的模块除非exports里暴露出去的组件，否则组件没法在全局引用
2.在app.module.ts里引入模块先头部import {xx} from '路径' 引入在把名字加到
@NgMoule（{
...
imports:[xx(模块名)]
}）
给模块里建组件：ng g component module/user/component/home
注：创建服务或其他也是： ng g service module/user/services/common
模块路由懒加载
命令：ng g module module/user --routing
1.app-routing里引入
const routes: Routes = [
//模块懒加载
{ path: 'login', loadChildren: './module/login/login.module#LoginModule' },
//设置没有路由默认值
{ path: '**', redirectTo: 'login' }
];
网友评论