Angular 2.0项目结构基本介绍

大大源码 • 2023年4月19日 pm11:24 • 其他

使用Angular-cli新建项目后，基本可以得到如下目录结构：

1.根模块

其中app.module.ts是该项目的一个根模块，使用@NgModule修饰，表示该Class是一个模块，declarations表示该模块包含的视图类，imports表示该模块需要其他模块导出的类，provider是模块包含的service，bootstrap包含该模块启动时，需要启动的根组件，因此AppComponent是该项目的根组件。

2.根组件

不管是根组件还是普通组件，都是有@Component修饰，templateUrl表示该组件对应的html，styleUrls表示该模块对应的css, selector表示templateUrl在那个html元素开始显示。下面这个截图表示的就是，app.component.html对应的代码将在<app-root></app-root>中显示。

如果是根组件的话，还需要在templateUrl对应的html代码中增加如下代码：

<router-outlet></router-outlet>

这样其他组件对应的
selector才能找到位置去显示。

3.服务

其中http.service.ts就是service,

@Injectable()
export class HttpService {

  constructor() { }

 
}

服务可以依赖注入，需要使用
@Injectable修饰。当某个
component需要使用某个
service时,在
component对应的
construct中需要依赖注入对应的
service,比如如下
UserConponent需要使用
HttpService,所以需要在
construct中依赖注入。