This angular version is unfamiliar to me, and I'm struggling to find a good example to follow. Can you provide some assistance?
https://i.sstatic.net/CJ6XC.png
I am looking to update the right section of this page without refreshing it using ES2015 + AngularJS + Webpack framework.
Currently, the page has a controller named 'home'. When the user clicks on the left side, I want to update the right section with a separate controller.
I know I can use ng-controller = ..., but transitioning to ES2015 and Webpack has left me confused.
Here's what I have so far.
Firstly, 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>
Next, 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'
});
}'
One question I have is, the syntax
is different than what I'm used to in Angular. Could someone clarify this for me?'export default function routers($stateProvider) {}'
This is how I've defined my HomeController, I aim to adhere to standard practices by creating separate controllers for different sections of the 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 = "";
}
}
Additionally, here is the home.html markup for reference.
<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>The right content should dynamically update when clicking on the left navigation, while the left side remains static.</h2>
</div>
</div>
</div>
</div>
Thank you in advance for your help!