我們在上節中學會了新建組件。 但聰明的你的一定會想到，這個組件目前還只是僅僅可以用在`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模塊`