这不是我以前知道的angular，也不知道哪里有可以模仿的好例子，所以求大家帮忙。
我想使用 ES2015 + angularJS + Webpack 框架更新此页面的右侧部分而不刷新页面。
我想要不同的 Controller ，现在页面有一个 Controller 作为“主页”。 当用户点击左侧时，我想更新它的右侧，并为右侧使用一个单独的 Controller 。
我所知道的是，我可以只写 ng-controller = ... 但是使用 ES2015 和 webpack，我开始感到困惑。
这是我目前拥有的。
首先是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
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'
});
}'
这里有问题，这个'export default function routers($stateProvider) {}' 不是我知道的angular 写法，有人可以在这里解释一下吗？
这就是我定义 HomeController 的方式，我想遵循标准并为页面的正确部分创建不同的 Controller 。
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，以便您可以根据它给我指示。
<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>
提前致谢!
最佳答案
你在这里的问题比较笼统，但由于我知道背景，我可以详细回答。
你的第一个问题:
export default function routers($stateProvider) {}
那是 ES6 + angular-ui-router - 您应该使用 UI-Router 特定路由来定义状态。
为了实现您的设计，您需要将 static/index.html 更改为:
<body>
<div class="container">
<div ui-view="navbar">
</div>
<div ui-view></div>
</div>
</body>
并在 stateprovider 中定义一个导航栏 View ，指向 navbar.html，其中将包含:
<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',
})
这应该可以帮助您入门。
关于javascript - 如何使用带有 angular-webpack-seed 的 ES6 语法更新部分 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35070169/