angular4入门 （angluar与elementUI环境搭建、路由配置、get请求运用）

环境搭建说明：
1、全局安装angluar脚手架
    npm install -g @angular/cli
    
2、初始化项目（支持scss）
    ng new 项目名称 --style=scss
    // 进入项目
    cd 项目名称
    运行代码可以是：serve或者 npm install(安装依赖)  npm start（运行）
    
3、安装element
    npm i --save element-angular
    a、在跟模快app/app.module.ts文件中引入
        import { NgModule } from '@angular/core'
        import { BrowserModule } from '@angular/platform-browser'
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
        import { RouterModule } from '@angular/router'
        import { AppComponent } from './app.component'
        import { ElModule } from 'element-angular'
        // 引入实例组件ExAppComponent
       import { ExAppComponent } from '路径'
        @NgModule({
           declarations: [
              AppComponent，
              ExAppComponent, // 实例组件
           ],
           imports: [
              BrowserModule,
              BrowserAnimationsModule,
              ElModule.forRoot(),
           ],
           providers: [],
           bootstrap: [ExAppComponent],
        })
        export class AppModule {
        }
        
    b、在src/style.scss文件下添加一行代码
       @import "~element-angular/theme/index.css"; （引入element样式）
       
4、安装路由
    npm i --save @angular/router
    a、在跟模快app/app.module.ts文件中引入
    import { RouterModule, Routes } from '@angular/router';
    import { Demo01Component } from './demo01/demo01.component';
    const appRoutes: Routes = [
      { path: 'demo', component: Demo01Component },];   // 这里需要注意，路由地址不能加/
    @NgModule({
      imports: [
        RouterModule.forRoot(
          appRoutes,
          { enableTracing: true } // <-- debugging purposes only
        ),
        其他的模块写入
      ]
    })
    
    b、去模块下进行调用路由
        <nav>
          <a routerLink="/demo" routerLinkActive="active">Crisis Center</a>
        </nav>
        <router-outlet></router-outlet>
    
5、get接口调用
   a、在app文件下创建一个文件夹名为config,在config文件下创建service服务
      在config.service.ts中输入
        import { Injectable } from '@angular/core';
        import { HttpClient } from '@angular/common/http';
        @Injectable({
          providedIn: 'root'
        })
        export class ConfigService {
          constructor(private http: HttpClient) {
          }
          getConfig(myUrl: string) {
            return this.http.get(myUrl);
          }
        }
   b、app/app.module.ts文件中引入
      import { HttpClientModule } from '@angular/common/http';
      import { ConfigService } from './config/config.service';
      @NgModule({
        declarations: [
          AppComponent,   // 主文件
          ProjectActivityComponent,  // 子文件
        ],
        imports: [
          BrowserModule,
          HttpClientModule
        ],
        providers: [ConfigService],
        bootstrap: [AppComponent]
      })
      
   c、去project-activity.component.ts文件下进行调用接口
       引入文件  import { ConfigService } from '../config/config.service';
       export class ProjectActivityComponent implements OnInit {
         constructor(private myServce: ConfigService) {}
         ngOnInit() {
           // 界面初始化的时候进行调用
           this.showConfig();
         }
         showConfig() {
           this.myServce.getConfig('http://jsonplaceholder.typicode.com/users')
             .subscribe((result) => {
              console.log(result, 'ddd');
             });
         }
       }

标签：文件,angluar,elementUI,app,ts,angular4,import,config,angular
来源： https://blog.csdn.net/CuiCui_web/article/details/89354124