step-4 Directory and File Organization

gkalpak · gkalpak · commit 8649b86f1a27 · 2020-06-05T16:52:14.000+03:00
- Refactor the layout of files and directories, applying best practices and techniques that will
  make the application easier to maintain and expand in the future:
  - Put each entity in its own file.
  - Organize code by feature area (instead of by function).
  - Split code into modules that other modules can depend on.
  - Use external templates in `.html` files (instead of inline HTML strings).
diff --git a/app/app.js b/app/app.js
diff --git a/app/app.module.js b/app/app.module.js
@@ -0,0 +1,7 @@
+'use strict';
+
+// Define the `phonecatApp` module
+angular.module('phonecatApp', [
+  // ...which depends on the `phoneList` module
+  'phoneList'
+]);
diff --git a/app/index.html b/app/index.html
@@ -6,8 +6,9 @@
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
     <script src="lib/angular/angular.js"></script>
-    <script src="app.js"></script>
-    <script src="phone-list.component.js"></script>
+    <script src="app.module.js"></script>
+    <script src="phone-list/phone-list.module.js"></script>
+    <script src="phone-list/phone-list.component.js"></script>
   </head>
   <body>
 
diff --git a/app/phone-list/phone-list.component.js b/app/phone-list/phone-list.component.js
@@ -2,15 +2,9 @@
 
 // Register `phoneList` component, along with its associated controller and template
 angular.
-  module('phonecatApp').
+  module('phoneList').
   component('phoneList', {
-    template:
-        '<ul>' +
-          '<li ng-repeat="phone in $ctrl.phones">' +
-            '<span>{{phone.name}}</span>' +
-            '<p>{{phone.snippet}}</p>' +
-          '</li>' +
-        '</ul>',
+    templateUrl: 'phone-list/phone-list.template.html',
     controller: function PhoneListController() {
       this.phones = [
         {
diff --git a/app/phone-list/phone-list.component.spec.js b/app/phone-list/phone-list.component.spec.js
@@ -3,7 +3,7 @@
 describe('phoneList', function() {
 
   // Load the module that contains the `phoneList` component before each test
-  beforeEach(module('phonecatApp'));
+  beforeEach(module('phoneList'));
 
   // Test the controller
   describe('PhoneListController', function() {
diff --git a/app/phone-list/phone-list.module.js b/app/phone-list/phone-list.module.js
@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `phoneList` module
+angular.module('phoneList', []);
diff --git a/app/phone-list/phone-list.template.html b/app/phone-list/phone-list.template.html
@@ -0,0 +1,6 @@
+<ul>
+  <li ng-repeat="phone in $ctrl.phones">
+    <span>{{phone.name}}</span>
+    <p>{{phone.snippet}}</p>
+  </li>
+</ul>
