AngularJS新增-基本客户管理应用程序
我对AngularJS还是非常陌生，我正在尝试制作一个相当基本的应用程序来显示一个视图中的客户列表，以及另一个视图中拥有的设备列表 （我认为）我正在挣扎的是ng视图和控制器。我一直在查阅有关这些工作原理的材料和示例，但没有找到一个好的答案。我希望我只是忽略了一些东西，但我可能完全偏离了方向。基本上，我试图利用SPA功能，用一个表格替换徽标下的材料，该表格填充每个选定页面的相关数据（公司/设备） 这是我的main.html文件：AngularJS新增-基本客户管理应用程序,angularjs,angularjs-service,Angularjs,Angularjs Service,我对AngularJS还是非常陌生，我正在尝试制作一个相当基本的应用程序来显示一个视图中的客户列表，以及另一个视图中拥有的设备列表 （我认为）我正在挣扎的是ng视图和控制器。我一直在查阅有关这些工作原理的材料和示例，但没有找到一个好的答案。我希望我只是忽略了一些东西，但我可能完全偏离了方向。基本上，我试图利用SPA功能，用一个表格替换徽标下的材料，该表格填充每个选定页面的相关数据（公司/设备） 这是我的main.html文件： <!doctype html> <html dat
<!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>
//---------------------------------------------------------------------------
// 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";
});
再说一次，我是新手，一直在努力学习，所以很可能我错过了一些简单的东西。非常感谢您的任何帮助 好吧，在查看了上面非常有用的plunker之后，对我的一些代码进行了一些调整，我认为我对如何使用控制器有一个误解。基本上，我想做的是基于如何使用ng视图，而不是直接调用控制器。这里有一个更新的plunker来展示我尝试做的丑陋版本 plnkr.co/edit/iq9tf3j0ylyyyyejarl3v？p=预览
再次感谢你，我真是太感谢你了 请尽量更具体地回答你的问题，不要抛出一堆代码，并问为什么它不起作用。你遇到了什么问题？有错误吗？你的代码在哪里中断？基本的代码结构看起来很好…肯定组织得很好，很容易阅读。。。如果只是解释一下什么不起作用，就会很快得到帮助。另外，如果你能在plunker中创建一个复制问题的演示，它总是有助于Shere是一个plunker，但我不知道你的模板中有什么。。。这只是一个建议，但我会做两个单独的控制器，一个为您的经销商和一个为您的设备。在您的index.html中，我会将指向每个路由的链接放入以切换视图。另外，路由的根路径也不相同，可能是输入错误（../html和/html）？看看你的开发控制台（F12），看看模板是否被找到（加载）而不是404。好吧，在查看了非常有用的plunker之后，我对一些代码进行了一些调整，我想我对如何使用控制器有一个误解。基本上，我想做的是基于如何使用ng视图，而不是直接调用控制器。这里有一个更新的plunker来展示我尝试做的丑陋版本。再次感谢你们，我真是太感谢你们了！
//---------------------------------------------------------------------------
// 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";
});