Question

我仍然是AngularJS的新手，我正在尝试创建一个相当基本的应用程序，以显示具有一个视图的客户列表，以及另一个视图中拥有的设备列表。

我正在努力的是ng-view和控制器。我一直在查看有关这些工作方式的材料和示例，但没有找到一个好的答案。我希望我只是忽略了一些东西，但我可能完全偏离了基础。基本上我正在尝试利用SPA功能，并用一个表格替换徽标下面的材料，该表格填充每个选定页面的相关数据（公司/设备）。

这是我的main.html文件：

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

这是我的app.js文件：

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'});
    })

这是我的controllers.js文件：

//---------------------------------------------------------------------------
// 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";
});

同样，我是新手并且一直在努力学习，所以我很有可能错过了一些简单的东西。任何和所有的帮助非常感谢！

Answer 1

好吧，经过一些调整我的一些代码后，看看上面非常有用的plunker，我想我对如何使用控制器有一个误解。基本上，我想要做的是基于如何使用ng-view，而不是直接调用控制器。这是一个更新的plunker，显示我试图做的丑陋版本。

plnkr.co/edit/iq9Tf3J0yLyYYejarl3v?p=preview

再次感谢，我不能够感谢你！

AngularJS新手 - 基本客户管理应用程序

1 个答案: