首先创建一个angular项目,方便以后学习
1、首先安装node和npm
2、安装angular CLI
npm install -g @angular/cli
3、进入要创建项目的目录,在cmd命令框中输入:ng new +项目名称
ng new angulardemotest
终端会让你选择一些配置如下图,路由和css样式
4、安装后文件目录
运行项目:在当前项目目录下
npm i //下载相关依赖
npm start //启动项目
访问页面成功
经常在angular项目中开发组件都是在app文件中
然后我们仔细看一下在angular项目中组件的构成:
1.html文件:标签都是一样的,但是在页面中有一个title
2.ts文件:我们在与html文件同级目录下找到ts文件,就是这个组件的ts代码了,在这里就有title,对他修改后页面也会有相应的变化。
然后我把代码复制过来说明一下@component中的都是什么意思
@Component({ //用于修饰当前类
selector: 'app-root', //与项目中index.htnl中的标签一样。把当前组件放到哪里,显示出来。
templateUrl: './app.component.html', //模板的路径,就是上面的html文件路径啦。
styleUrls: ['./app.component.scss'] //自己css路径,是一个数组,可以多写几个哈哈哈哈
})
export class AppComponent {
//定义一个类,里面的属性值都可以在当前模板中使用
title = '这是第一个angular项目';
}
3.module文件
//修饰模块
@NgModule({
declarations: [
//我可以向外提供哪些模块
AppComponent
],
imports: [
//当前模块需要依赖哪些模块
BrowserModule,
AppRoutingModule
],
exports:[], //当前组件导出想用于其他组件使用
providers: [],//当前模块中使用的服务
//跟模块需要有这个属性,引导
bootstrap: [AppComponent]
})