2.4.2 规划目录结构 · angularjs

现在，我们有了`phone-list`和`hello-yunzhi`两个组件，都存在于`phone-list.component.js`中。显然，这有一点问题。因为我们的`hello-yunzhi`组件，更愿意有自己的专属文件----`hello-yunzhi.component.js`。下面，让我们共同规划下这两个组件。规划组件以前，我们在根目录下，新建`yun-zhi`文件夹，用以存放`hell-yunzhi`及`phone-list`组件。文件夹建立后，将`phone-list.component.js`移动到此文件夹。移动后，目录结构如下： ~~~ . ├── app.js ├── bower_components │ └── angular │ ├── LICENSE.md │ ├── README.md │ ├── angular-csp.css │ ├── angular.js │ ├── angular.min.js │ ├── angular.min.js.gzip │ ├── angular.min.js.map │ ├── bower.json │ ├── index.js │ └── package.json ├── index.html ├── test.html └── yun-zhi └── phone-list.component.js ~~~ ## 剥离`hello-yunzhi`组件新建 `hello-yunzhi.component.js` 代码如下： ~~~ // 定义一个yunZhi模块，供组件使用。 angular.module('yunZhi', []); // 在yunzhi模块上注册'helloYunzhi'组件 angular. module('yunZhi'). component('helloYunzhi', { template:'<h2>Hello Yunzhi</h2>', }); ~~~ 同时，删除`phone-list.component.js`中关于组件`hello-yunzhi`的定义。 ## 重新引用`hello-yunzhi`、`phone-list` `index.html` ~~~ ... <head> <meta charset="UTF-8"> <title>hello</title> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="yun-zhi/phone-list.component.js"></script> <script src="yun-zhi/hello-yunzhi.component.js"></script> </head> ... ~~~ 测试： ![](https://box.kancloud.cn/2016-07-20_578f3934742da.png) ## 重构尽量不去制造重复的轮子。通过观察代码，我们发现，在两个组件中，存在重复的轮子，即对yunZhi模块的定义。现在，我们新增一个文件，专门来进行模块的定义，去掉一个重复的轮子。 `yun-zhi/yun-zhi.module.js` ~~~ // 定义一个yunZhi模块，供组件使用。 angular.module('yunZhi', []); ~~~ 然后去掉两个组件中上面的代码，并在index.html中引用我们刚刚建立的`yun-zhi.module.js` `index.html` ~~~ <head> <meta charset="UTF-8"> <title>hello</title> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="yun-zhi/yun-zhi.module.js"></script> <script src="yun-zhi/phone-list.component.js"></script> <script src="yun-zhi/hello-yunzhi.component.js"></script> </head> ~~~ ![](https://box.kancloud.cn/2016-07-20_578f393494bff.png) 没错，效果仍然不变。 * * * * * 各文件代码如下： `app.js` ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', ['yunZhi']); // 定义控制器 phonecatApp.controller('PhoneListController', function($scope) { $scope.phones = [{ name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' }, { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' }, { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }]; }); ~~~ `yun-zhi/yun-zhi.module.js` ~~~ // 定义一个yunZhi模块，供组件使用。 angular.module('yunZhi', []); ~~~ `yun-zhi/hello-yunzhi.component.js' ~~~ // 在yunzhi模块上注册'helloYunzhi'组件 angular. module('yunZhi'). component('helloYunzhi', { template:'<h2>Hello Yunzhi</h2>', }); ~~~ `yun-zhi/phone-list.components.js` ~~~ angular. module('yunZhi'). component('phoneList', { template: '<ul>' + '<li ng-repeat="phone in $ctrl.phones">' + '<span>{{phone.name}}</span>' + '<p>{{phone.snippet}}</p>' + '</li>' + '</ul>', controller: function PhoneListController() { this.phones = [{ name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' }, { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' }, { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }]; } }); ~~~