如何使用带有angular-webpack-seed的ES6语法更新部分html

本文介绍了如何使用带有angular-webpack-seed的ES6语法更新部分html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这不是我以前知道的角度，我不知道我能模仿的好榜样在哪里，所以我向你寻求帮助。

this is not the angular I used to know, and I don't know where is a good example I can mimic, so I ask you for help.

我想更新此页面的右侧部分而不使用ES2015 + angularJS + Webpack框架刷新页面。

I want to update the right part of this page without refresh the page using ES2015 + angularJS + Webpack framework.

我想拥有不同的控制器，现在页面的控制器为主页。 当用户点击左侧时，我想更新它的右侧部分，并为右侧部分使用单独的控制器。

I want to have different controllers, now the page has a controller as 'home'. When the user click the left side, I want to update the right part of it, and use a separate controller for the right part.

我所知道的是，我只能写 ng-controller = ... 但是使用ES2015和webpack，我开始感到困惑。

What I know is, I can just write ng-controller = ... But using the ES2015 and webpack, I start to confuse.

这是我目前所拥有的。

首先，index.html

First, the index.html

<html ng-app="abc" ng-strict-di>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>{%= o.htmlWebpackPlugin.options.title %}</title>
  </head>
  <body>
    <div class="container" ui-view></div>
  </body>
</html>

然后是router.js

And then the router.js

import HomeController from './home';

export default function routes($stateProvider) {
  'ngInject';
  $stateProvider
    .state('home', {
      url: '/',
      template: require('./home.html'),
      controller: HomeController,
      controllerAs: 'home',
    })
    .state('android', {
      url: '/android',
      template: '<h2>This is Android</h2>',
      parent: 'home'
    });
}'

在此问题，此'导出默认函数路由器（$ stateProvider）{}'不是我所知道的写角度的方式，有人可以在这里解释一下吗？

Question here, this 'export default function routers($stateProvider) {}' is not the way I know to write angular, can someone explain a little here?

这就是我定义HomeController的方法，我想遵循标准并为页面右侧部分创建不同的控制器。

This is how I define my HomeController, I want to follow the standard and create different controller for the right part of page.

export default class HomeController {
constructor($http) {
    'ngInject';
    this.currentPlatform = '';
    this.platforms = [
      {
        displayName: "WEB PORTAL",
        value : "WEB PORTAL"
      },
      {
        displayName: "ROKU",
        value : "ROKU"
      },
      {
        displayName: "Android",
        value : "ANDROID"
      },
      {
        displayName: "iPhone",
        value : "iPhone"
      }
    ];
    this.$http = $http;
    this.projectName = "";
    this.appId = "";
    this.version = "";
    this.fieldData = "";

  }
}

此外，我必须告诉你home.html，所以你可以给我说明。

Also I have to show you the home.html, so you can give me instructions based on that.

<div class="home">
  <div class="title">
    <h1 class="h3">Build/Configure Apps</h1>
    <span class="glyphicon glyphicon-remove"></span>
  </div>
  <div class="main">
    <div class="row">
      <div class="col-sm-4">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" ng-repeat="platform in home.platforms" ng-class="{active: home.isSelected(platform.value)}">
            <a ng-click="home.setPlatform(platform.value)">{{platform.displayName}}</a>
          </li>
        </ul>
        <div class="form-inline form-group">
          <div class="form-group">
            <label for="appId" class="control-label">App Id:</label>
            <input type="text" name="appId" ng-model="home.appId" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <button type="button" name="button" class="btn btn-sm btn-primary col-sm-8" ng-click="home.makeAjaxCall()">Submit</button>
        </div>
      </div>
      <div class="col-sm-8">
        <h2>This right content should be updated when click on the left nav bar, but the left should not</h2>
      </div>
    </div>
  </div>
</div>

提前致谢！

推荐答案

你的问题在这里是相当笼统的，但由于我知道背景，我可以详细回答。

Your question is here is rather general, but since I know the background I can answer it in detail.

你的第一个问题：

那是ES6 + angular-ui-router - 您应该使用特定于UI路由器的路由来定义状态。

That's ES6 + angular-ui-router - you should define a state by using UI-Router specific routes.

为了实现您的设计，您需要将 static / index.html 更改为：

In order to get your design implemented, you'd need to change static/index.html, to:

 <body>
    <div class="container">
       <div ui-view="navbar">
       </div>
       <div ui-view></div>
    </div>
  </body>

并在stateprovider中定义一个导航栏视图，指向navbar.html，其中包含：

and define a navbar view in the stateprovider, to point to navbar.html which will contain:

<ul class="nav nav-pills nav-stacked">
   <li role="presentation" ng-repeat="platform in home.platforms" ng-class="{active: home.isSelected(platform.value)}">
    <a ng-click="home.setPlatform(platform.value)">{{platform.displayName}}</a>
  </li>
</ul>

 $stateProvider
    .state('navbar', {
      template: require('./navbar.html'),
      controller: NavbarController,
      controllerAs: 'navbar',
    })

这应该可以让你入门。

这篇关于如何使用带有angular-webpack-seed的ES6语法更新部分html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！