Создание углового приложения из html для рендеринга данных из конечной точки http rest, используя $ http

Я являюсь абсолютным новичком с angularjs. Моя проблема заключается в том, чтобы извлечь данные из базы данных и показать ее как сетку. Я пытаюсь отобразить данные из конечной точки останова при нажатии на тег привязки «Профилирование данных». что это лучший способ сделать это.

Это мой первый пост в stackoverflow, поэтому, пожалуйста, извините за ошибки в сообщении.

<!DOCTYPE html> 
<html lang="en" ng-app="d2vapp"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>D2V</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/landing-page.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 
    <!-- Header --> 
    <a name="about"></a> 
    <div class="intro-header" ng-controller="d2vappcontroller"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="intro-message"> 
         <h1>Data to Value</h1> 
         <h3>Your one stop data explorer</h3> 
         <hr class="intro-divider"> 
         <ul class="list-group"> 
         <table align='center' width=100%> 
         <tr> 
         <td> 
         <a href="#" class="btn btn-danger btn-lg"><span class="network-name">Data Catalogue</span></a></br></br> 
         </td> 
         <td> 
         <a href="#" class="btn btn-danger btn-lg"><span class="network-name">Data Exploration</span></a></br></br> 
         </td> 
         </tr> 
         <tr> 
         <td> 
         <a href="#" id="rundeck" class="btn btn-danger btn-lg"><span class="dataprofiling">Data Profiling</span></a></br></br> 
         </td> 
         <td> 
         <a href="#" class="btn btn-danger btn-lg btn-md"><span class="network-name">API Catalogue</span></a></br></br> 
         </td> 
         <tr> 
         <td> 
         <a href="http://cstg-sa-adm-dev-01:4440/" class="btn btn-danger btn-lg"><span class="network-name">RUNDECK</span></a></br></br> 
         </td> 
         <td> 
         <a href="http://cstg-sa-ssot-dev-07:8000/kibana/#/dashboard/PDI-Prod-DashBoard?_g=(time:(from:now-90d,mode:quick,to:now))&_a=(filters:!(),panels:!((col:1,id:prod-pdi-job-average-processed-time,row:1,size_x:6,size_y:7,type:visualization),(col:7,id:prod-pdi-job-start-time-and-end-time,row:1,size_x:6,size_y:7,type:visualization),(col:1,id:prod-pdi-actual-log,row:8,size_x:12,size_y:13,type:search)),query:(query_string:(analyze_wildcard:!t,query:'*')),title:'PDI%20Prod%20DashBoard')" class="btn btn-danger btn-lg"><span class="">Infra Management</span></a></br></br> 
         </td> 
         </tr> 
         </table> 
         </ul> 
        </div> 
       </div> 
      </div> 

     </div> 
     <!-- /.container --> 

    </div> 
    <!-- /.intro-header --> 

    <!-- Page Content --> 

    <!-- Footer --> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <ul class="list-inline"> 
         <li> 
          <a href="#">Home</a> 
         </li> 
         <li class="footer-menu-divider">&sdot;</li> 
         <li> 
          <a href="#about">About</a> 
         </li> 
         <li class="footer-menu-divider">&sdot;</li> 
         <li> 
          <a href="#services">Services</a> 
         </li> 
         <li class="footer-menu-divider">&sdot;</li> 
         <li> 
          <a href="#contact">Contact</a> 
         </li> 
        </ul> 
        <p class="copyright text-muted small">Copyright &copy; Cisco 2016. All Rights Reserved</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 
    <!-- AngularJS javascript --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

</body> 

</html>

источник

2016-09-16 Anonymous

В контроллере вы должны впрыскивать $ HTTP и $ Сфера

angular.module('d2vapp').controller('d2vappcontroller' , function($scope, $http){ 
     $scope.getDataProfiling = function(){ 

      $http.get('path/to/your/route') 
       .success(function(response){ 
        //do something with your response 
       }) 
       .error(function(error){ 
        //handle your error 
       }); 
     } 
});

В вашем HTML добавить защелкивающийся действие

<a href="#" id="rundeck" class="btn btn-danger btn-lg" ng-click="getDataProfiling()"><span class="dataprofiling">Data Profiling</span></a></br></br>

Примечание: Пожалуйста пройдите через angularjs documentation, чтобы лучше понять, как различные c компоненты угловой работы

источник

2016-09-16 11:57:20

Я попробовал код, который вы указали, но он не работает при нажатии. –

Создание углового приложения из html для рендеринга данных из конечной точки http rest, используя $ http

ответ

Смежные вопросы