我们在上节中学会了新建组件。 但聪明的你的一定会想到，这个组件目前还只是仅仅可以用在`ng-app="phonecatApp"`模块中。因为当我们将组件中的模块名改为其它名字时，会报一个未定义的错误。 那我们说，总不能一个组件建好后，只能应用到`phonecatApp`这个模块中吧。当我们想把组件共享给其他人应用时，总不能强制他必须把模块名起为`phonecatApp`吧。 的确，你的想法是对的。如果是那样，这个轮子就太不灵活了。下面，让我们共同把轮子建的更灵活一些。 我们再次修改组件中的模块名为'yunZhi'： `phone-list.component.js` ~~~ angular. - module('phonecatApp'). + module('yunZhi'). ~~~ 测试：  然后，我们来解决这个yunZhi模块不可用的错误。既然它说不可用，那么我就手动定义这样一个模块，让其可用。 `phone-list.component.js` ~~~ + // 定义一个yunZhi模块，供组件使用。 + angular.module('yunZhi', []); angular. module('yunZhi'). ~~~ 刷新网页并查看控制台：网页不显示任何信息，而且控制台也没有报错。 这是什么原因造成的呢? 1、网页不显示任何信息 我们查看一下生成的代码：  是的，<phone-list>标签并没有得到正确的解析。这是由于phone-list标签现在属于模块yunZhi，并不属于模块phonecatApp。那么在phonecatApp中去应用这个标签，不被解析就是正常的，又由于html也不认识这个标签，所以最终输出的是空白信息。 2、控制台没有报错 组件phoneList需要依赖于yunZhi模块，yunZhi模板被我们在前面定义了，也就是说要依赖的模块被成功找到了。不报错，当然也是正常的了。 > angular.module('yunZhi', [])与angular.module('yunZhi')起的作用是不一样的。 `angular.module('yunZhi', []); // 定义一个yunZhi模块` `angular.module('yunZhi'); // 调用yunZhi模块`