Procházet zdrojové kódy

Adding bootstrap to angularJS Code Snippet single page application

David Leonard před 10 roky
rodič
revize
e817e517d3
2 změnil soubory, kde provedl 38 přidání a 3 odebrání
  1. 16 0
      angular/index.html
  2. 22 3
      angular/partials/snippets.partial.html

+ 16 - 0
angular/index.html

@@ -5,13 +5,29 @@
 
         <title data-ng-bind="pageTitle + ' | RestAPP'">RestAPP</title>
 
+        <!-- AngularJS -->
         <script src="vendor/angular/angular.js"></script>
         <script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
 
+        <!-- Bootstrap Core CSS -->
+        <link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+
+        <!-- jQuery -->
+        <script src="vendor/jquery/dist/jquery.min.js"></script>
+
+        <!-- Bootstrap Core JavaScript -->
+        <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
+
+        <!-- Main application file -->
         <script src="scripts/app.js"></script>
+
+        <!-- Controllers --> 
         <script src="scripts/controllers/appController.js"></script>
         <script src="scripts/controllers/restAppController.js"></script>
+
+        <!-- Factories -->
         <script src="scripts/factories/restAppFactory.js"></script>
+
     </head>
 
     <body>

+ 22 - 3
angular/partials/snippets.partial.html

@@ -1,5 +1,24 @@
-<div data-ng-repeat="data in restData">
-    <div data-ng-repeat="datum in data track by $index">
-        {{ datum }}
+<div class="row text-center">
+	<h1> Code Snippets </h1>
+</div>
+
+<div class="col-lg-12">
+    <div class="table-responsive">
+        <table class="table table-bordered table-hover table-striped tablesorter">
+            <thead>
+                <tr>
+                    <th class="header">Code</th>
+                    <th class="header">ID</th>
+                    <th class="header">Line Numbers</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr data-ng-repeat="data in restData">
+	                    <td>{{ data.code }}</td>
+	                    <td>{{ data.id }}</td>
+	                    <td>{{ data.linenos }}</td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 </div>