TechQA.

Angular part in a html page doesn't appear if I using ngroute

71 views Asked by At

I want to have a fixed menu, this fixed menu is called: fixed_admin.html:

<!DOCTYPE html>
<!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; 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="">

    <link rel="shortcut icon" href="images/puzzle.png" />
      
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--    <link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" /> --> <!-- penso di poterlo togliere -->
    <link rel="stylesheet" href="styles/mainBoot.css">
    <link rel="stylesheet" href="styles/scrollbar.css">
    <link rel="stylesheet" href="styles/noscroll_numberfield.css">
    
 
 

  <!--  <script src="scripts/emailchecker.js"></script>  --> 
 
 <!--   <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> -->
   <!-- <script src="scripts/number-directive.js"></script> -->
    <script type="application/javascript"></script>
    
    <title>Pannello Amministratore</title>

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

    <!-- Custom styles for this template -->
    <link href="./styles/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[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]-->
  <style id="holderjs-style" type="text/css"></style></head>

  <body ng-app="myApp" background="images/sfondoblu3.png">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">FDDispenser</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="fixed_admin.html#/">Pannello Amministratore</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Settings</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Profile</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
           <li class="active"><a  href="fixed_admin.html#/showemp">Mostra Dipendenti</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Catalogo</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Macchinette</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Mostra Acquisti</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li class="active"><a href="edit_employee.html">Aggiungi/Modifica Dipendente</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Crea/Modifica Catalogo</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Famiglia</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Categoria</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Produttore</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Ingrediente</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Fabbrica di produzione</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Macchinetta</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Tipologia Macchinetta</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Aggiungi/Modifica Accessori</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Assegna Macchinetta a Dipendente</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Posiziona Macchinetta sul Territorio</a></li>
            <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Assegna Prodotti a Macchinetta</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            
          <div ng-view></div>
            
            
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  <!--  <script src="./Dashboard Template for Bootstrap_files/jquery.min.js.download"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->

      

   
      
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="scripts/main-admin.js"></script>

    <script src="scripts/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
      
    <script src="./scripts/bootstrap.min.js.download"></script>
    <script src="./scripts/docs.min.js.download"></script>
        

</body></html>

When I click on "Mostra Dipendenti" I want to see in the middle of the same page another page (in ), using ng-route from this js page called main-admin.js:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home_admin.html"
    })
    .when("/showemp", {
        templateUrl : "show_employee.html"
    })
    .when("/paris", {
        templateUrl : "paris.htm"
    });
});

The page that I want to see when I click that button is "show_employee.html":

<body   ng-app="StaffManagement" ng-controller="StaffController">
<h2 class="sub-header" style="color:#4e67c3;">Elensco dipendenti</h2>
          <div class="table-responsive">
            <table id="thetable">
                
             
                <tr> 
                    <th class="th2">Nome</th>  
                    <th class="th2">Cognome</th>  
                    <th class="th2">Data di Nascita</th>   
                    <th class="th2">Telefono</th>  
                    <th class="th2">&nbsp;&nbsp;Sesso&nbsp;&nbsp;</th> 
                    <th class="th2">&nbsp;StaffId&nbsp;</th>
                    <th class="th2">Email</th> 
             </tr> 
             
              
              <tr ng-repeat="staff in staffs">  
                 
            <td> {{ staff.name }}</td>  
            <td> {{ staff.surname }}</td>    
            <td> {{ staff.birthDate }}</td>
            <td> {{ staff.phone }}</td> 
            
   
            <td>
                <div ng-switch on="staff.gender">
                <span ng-switch-when="true">Uomo</span>
                <span ng-switch-when="false">Donna</span>
                </div>
            </td>
                    
            
            <td> {{ staff.idstaff }}</td>  
            <td> {{ staff.staffLogin.email }}</td> 
    

            </tr>  
          
            </table>
</body>
    
      <script src="./scripts/bootstrap.min.js.download"></script>
    <script src="./scripts/docs.min.js.download"></script>
               
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->

 <script src="scripts/deployeePanel.js"></script>
      <script src="scripts/rest-services.js"></script>
    <script src="scripts/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>
  <!--  <script src="scripts/emailchecker.js"></script>  --> 
    <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script>
   <!-- <script src="scripts/number-directive.js"></script> -->
    <script type="application/javascript"></script>

If I open only show_employee.html it works well:

edit_employee.html

But when I open it from the button on fixed_admin.html, angular part is empty:

fixed_admin.html#/showemp

No error from the console: enter image description here

I don't understand why angular doesn't work when I use ng-route. I want to see the element of the first image in fixed_admin.html#/showemp, but it is empty

javascript html angularjs ngroute route-provider
Original Q&A
1

There are 1 answers

0
Giacomo Brunetta On BEST ANSWER

Solved adding controller: "StaffController" and the controller in main-admin.js:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home_admin.html"
    })
    .when("/showemp", {
        templateUrl : "provaEmp.html",
        controller: "StaffController"
    })
    .when("/paris", {
        templateUrl : "paris.htm"
    });
});

    app.controller("StaffController", function($scope, $filter, $http) {  
                
                 
                $scope.staffs = [];  
                $scope.staffLast = [];  
                $scope.staffForm = {  
                      idstaff : -1,    
                        staffType: {
                        idstaffType: 2,
                        type: "Dipendente"
                      },
                      name: "",
                      surname: "",
                      birthDate: "",
                      phone: "",
                      gender: true,
                      working: true,
                      staffLogin: {
                        idstaffLogin: -1,
                        email: "",
                       // pass: "",
                         
                      }
                };  
                
                $scope.staffLoginForm = {  
                      idstaffLogin: -1,
                      email: "",
                    //  pass: ""
                };  
                
                $scope.selectg = [
                     {name:'uomo', type: true},
                     {name:'donna', type: false}
                ];
                
                 $scope.name = "Giacomo";
                    $scope.staffForm.name = "Giacomo";  
                     $scope.staffForm.surname = "Brunetta"; 
                     $scope.staffForm.phone = "3222565625";   
                    $scope.staffForm.idstaff = "1";
                $scope.staffForm.email = "[email protected]";
      

             
      });

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in NGROUTE

Related Questions in ROUTE-PROVIDER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions