Complete the feature to render words in the page from json file

PeachScript · PeachScript · commit dc0c49f4b3af · 2014-12-04T14:02:40.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,6 @@
-node_modules/
-bower_components/
+
+/node_modules/*
+/app/bower_components/*
+
+/app/styles/main.min.css
+/app/styles/main.css
diff --git a/app/index.html b/app/index.html
@@ -7,19 +7,19 @@
         <script src="bower_components/angularjs/angular.min.js"></script>
         <script src="scripts/app.js"></script>
     </head>
-    <body ng-app="abstackVarLib">
+    <body ng-app="abstackVarLib" ng-controller="mainCtrl">
         <header>
             Abstack Tech Variables Library
             <input type="text" class="search-box" placeholder="Type some keywords...">
         </header>
-        <ul class="word-list">
-            <li>
-                <h3><button class="btn-copy">COPY</button><a href="javascript:;">Settings</a></h3>
+        <ul class="word-list ng-hide" ng-show="wordsList">
+            <li ng-repeat="word in wordsList">
+                <h3>
+                    <button class="btn-copy">COPY</button>
+                    <a target="_blank" ng-href="{{ word.url?word.url: 'http://www.dict.cn/' + word.word }}" ng-bind="word.word"></a>
+                </h3>
                 <span class="tag-box">
-                    <em>设置</em>
-                    <em>设置</em>
-                    <em>设置</em>
-                    <em>设置</em>
+                    <em ng-repeat="tag in word.tags track by $index" ng-bind="tag"></em>
                 </span>
             </li>
         </ul>
diff --git a/app/json/words.json b/app/json/words.json
@@ -0,0 +1,37 @@
+[
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+},
+{
+    "word": "settings",
+    "url": "http://www.dict.cn/settings",
+    "tags": ["设置", "设定", "偏好"]
+}
+]
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -3,4 +3,13 @@
 *
 * Description: main
 */
-angular.module('abstackVarLib', []);
+angular.module('abstackVarLib', [])
+    .controller('mainCtrl', ['$http', '$scope', function($http, $scope){
+
+        $http.get('/json/words.json')
+            .success(function(data){
+                $scope.wordsList = data;
+            });
+
+
+    }]);
