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!
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!