2018-12-10Angular基础环境搭建

首先安装node和npm，其次用cnpm代替npm（百度都是）就不多说了

安装angular官方脚手架工具

cnpm -g i @angular/cli

其次利用脚手架创建项目，一路Y就行

ng new my-app

1.组件：

angular的核心就是组件

image.png

组件元数据装饰器：

@Component({ /*@component 是component装饰器，装饰器里的属性叫元数据selector,templateUrl,styleUrls*/
  selector: 'app-root', /*这个组件可以用app-root这个html标签调用<app-root></app-root>像这样*/
  templateUrl: './app.component.html',/*templateUrl制定html作为组件的模板*/
  styleUrls: ['./app.component.css']/*templateUrl制定html作为组件的模板*/
})
export class AppComponent {
  title = 'mydemo';
}
/*控制器是指被component装饰器装饰的typescript类*/

2. 模块

app的模块也是带着装饰器的typescript类

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [ /*declarations声明模块中有什么东西，只能声明组件，指令，管道*/
    AppComponent,
  ],
  imports: [/*引入angular的自有模块*/
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],/*只能声明服务*/
  bootstrap: [AppComponent]/*声明了模块的主组件是什么*/
})
export class AppModule { }

3. 引入第三方库（jquery,bootstrap)

cnpm i jquery --save
cnpm i bootstrap --save
cnpm install @types/jquery --save
cnpm install @types/bootstrap --save

2. 在 angular.json中配置如下

            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]