Search code examples
angularjsangularjs-service

New to AngularJS - basic customer management app


I'm still extremely new to AngularJS and am trying to make a fairly basic app to show a list of customers with one view, and a list of devices owned in another view.

What (I think) I'm struggling with is ng-view and controllers. I've been looking over the material and examples on how these work and haven't found a good answer. I hope I'm just overlooking something, but I may be completely off base. Basically I'm trying to take advantage of the SPA features and replace the material beneath the logo with a table that populates the relevant data (company/devices) for each selected page.

Here's my main.html file:

<!doctype html>
<html data-ng-app = "techSupportApp">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles/app.css"/>
</head>
<!------------------------------------------------------------------------------------------
Labeling
------------------------------------------------------------------------------------------->
<!--Titlebar display-->
<title>
  Tech Support
</title>

<div>
  <div data-ng-view=""></div>
</div>

<!--Placeholder logo, navigates back to companySearch page when clicked."-->
<div id="logo">
  <a href="#/companySearch"><img src="common/img/logo.jpg" alt="logo"/></a>
</div>

<!--------------------------------------------------------------------------------------------
Placeholder for view change
--------------------------------------------------------------------------------------------->

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/controllers.js"></script>
<script src="scripts/main.js"></script>

</html>

Here's my app.js file:

var techSupportApp = angular.module('techSupportApp',[]);

//Right now this code breaks the search device page. It will only show the databinding, no actual data
//Investigate (maybe a good thing?!) :)
techSupportApp.config(function ($routeProvider){
  $routeProvider
    .when('/companySearch',
    {
      controller: 'MainController',
      templateUrl: '../html/views/companyDetails.html'
    })
    .when('/deviceSearch',
    {
      controller: 'MainController',
      templateUrl: '/html/views/deviceSearch.html'
    })
     .otherwise({redirectTo: '/companySearch'});
    })

Here's my controllers.js file:

//---------------------------------------------------------------------------
// Resellers list view
//---------------------------------------------------------------------------
techSupportApp.controller("MainController", function MainController($scope, $http){
  $http.get('https://www.example.com').success(function(data) {
    $scope.resellers = data;
  });

//---------------------------------------------------------------------------
// Devices list view
//---------------------------------------------------------------------------
  $scope.devices =
    [
      {
        company: "John's AV",
        deviceName: "Basement Box",
        model: "WB:XXX",
        serial: "123456789101113",
        mac: "12:34:56:78:90:11:12",
        firmware: "xxx.xxx",
        status: "XXX",
        time: "HH:MM:SS"
      },

      {
        company: "Wonderful AV",
        deviceName: "Bridge",
        model: "WB:XXX",
        serial: "123456789101112",
        mac: "12:34:56:78:90:11:13",
        firmware: "xxx.xxx",
        status: "XXX",
        time: "HH:MM:SS"
      },

      {
        company: "Ghostbusters",
        deviceName: "Capture Room",
        model: "WB:XXX",
        serial: "123456789101111",
        mac: "12:34:56:78:90:11:14",
        firmware: "xxx.xxx",
        status: "XXX",
        time: "HH:MM:SS"
      },

      {
        company: "LexCorp",
        deviceName: "R & D",
        model: "WB:XXX",
        serial: "123456789101110",
        mac: "12:34:56:78:90:11:15",
        firmware: "xxx.xxx",
        status: "XXX",
        time: "HH:MM:SS"
      }
    ];

  $scope.orderProp = "company";
});

Again, I'm new and have been trying to learn so chances are I'm missing something simple. Any and all help is much appreciated!


Solution

  • Alright, after some tweaking some of my code after looking at the very helpful plunker above I think I had a misconception about how to use the controllers. Basically, what I wanted to do was based in how to use ng-view, not calling the controller directly. Here's an updated plunker to show an ugly version of what I was attempting to do.

    plnkr.co/edit/iq9Tf3J0yLyYYejarl3v?p=preview

    Thanks again, and I can't thank you enough!