angular-自定义组件（漫威粉丝官网，英雄界面小demo）

最终效果如下,顶部导航栏，中间图片（hover后显示出来的按钮（档案）也是一个导航按钮）

具体项目我放在自己的coding中，https://coding.net/u/pandaCat5_/p/angular-marvelHero-demo/svn，因为要登陆coding，所以可以忽略这个地址，这里展示部分功能

 

  根据导航，显示对应英雄的数据

 

 

项目目录如下：

静态资源都在assets中

1：如何引入自定义模块

1.1、自定义模块

ng g m modules/demo01 --routing

1.2、要在根模块app.module中引入demo01这个自定义模块

直接引入，并且在ngModule中声明

 

2：如何使用懒加载和嵌套路由，访问自定义模块中的组件

2.1、在根组件的路由中使用懒加载来载入自定义模块demo01

2.2、在自定义组件的路由demo01-routing中，配置默认路由

 

2.3、我想访问demo01中的heroList组件

就在demo01-routing中引入该组件，然后配置路由path为‘hero'

这样  http://localhost:4200/hero   就可以访问到英雄列表组件对应的页面了

http://localhost:4200/heroes/0 就可以访问到英雄详情组件对应的页面了（id不同，显示不同英雄)

 

3:自定义组件使用服务（http）

使用http请求资源，我没有使用后台交互，所以自己写了一个json文件

然后把这个请求资源的操作写在service中（可以直接写在组件中，根据你需求来)

命令行生成自定义组件的服务

ng g service modules/demo01/config

然后把请求写成一个函数

在组件中调用

想在组件中调用，先把刚才生成的服务放到自定义模块中

然后在组件中引入服务，调用即可，这个是在页面初始化的时候调用的

其他的就不展示了，本人还处于小菜鸟阶段，欢迎大神指点