Develop Reference

AngularJS - Update controller var on route change

I'm pretty much a newbie in the AngularJS world.
This is my problem. I would like to update the selected tab based on the url, so that the selected tab changes when the url changes.
This is my js:
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: '/views/pages/page1.html',
controller: "TabController",
tab: 1
})
.when('/page2', {
templateUrl: '/views/pages/page2.html',
controller: "TabController",
tab: 2
})
.otherwise({
template: "Error 404"
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
});
//Tabs
app.controller("TabController", function($scope, $route){
$scope.activeTab = 0;
if(typeof $route.current != "undefined"){
setTimeout(function(){$scope.activeTab = $route.current.activeTab; console.log($scope.activeTab);},100);
}
});
And this is my html:
<div ng-controller="TabController">
<!-- Tabs -->
<section class="section section--xs">
<div class="container">
<div class="tab">
<div class="tab__single" ng-class="{active: activeTab === 1}">
Page 1
</div>
<div class="tab__single" ng-class="{active: activeTab === 2}">
Page 2
</div>
</div>
</div>
</section>
<!-- ./tabs -->
<!-- Content -->
<ng-view></ng-view>
<!-- ./content -->
</div>
I try and if I log the tab value, it actually updates, because it logs the correct value, but then the new tab doesn't get selected. Any suggestions?

You could create a function to search in your url parameters:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
HTML:
<div class="tab">
<div class="tab__single" ng-class="{active: isActive('page1')}">
Page 1
</div>
<div class="tab__single" ng-class="{active: isActive('page2')}">
Page 2
</div>
</div>

Angular ui.router Reload Template

First of all, I'm sorry for a long question, but it just has to be like that. Unfortunately...
I have a couple of templates and a couple of routing logic, all linked in separate files. For some reason the template I want to load (which depends on the region selected), doesn't load its region template. It loads, if I click it second time. Please note I have tried ever solution from this topic:
Reloading current state - refresh data
Nothing worked for me.
I have managed to resolve one (another region) of them by placing "{reload:true}" inline in the html code, like this:
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
Now I did the same for another template and it is not working. This is my html:
<div class="btn us-btn" data-ng-controller="carCtrlUs">
<script type="text/ng-template" id="careersTplUs.html">
<div class="closer">
<span class="close-me" data-ng-click="ok()">X</span>
</div>
<uib-accordion close-others="true">
<div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false">
<uib-accordion-heading>
<p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Client Relationship Manager</a></li>
</ul>
</div>
<div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false">
<uib-accordion-heading>
<p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Web Developer</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Marketing Coordinator</a></li>
</ul>
</div>
</uib-accordion>
<div class="show-me" ui-view></div>
</script>
<button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button>
</div>
app.js:
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
controller, for this template:
app.controller('carCtrlUs', function($scope, $http, $uibModal) {
$http.get('json/jobs-us.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTplUs.html',
controller : 'modalContentCtrlUs',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.web-dev);
}
});
});
app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
factory.js:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("us-intro", {
url:"/intro",
templateUrl: "templates/us/start.html"
})
$stateProvider
.state("us-web", {
url: "/web-developer/",
templateUrl: "templates/us/web-developer.html",
})
.state("us-crm", {
url: "/crm/",
templateUrl: "templates/us/crm.html"
})
/*next .state*/
}]);
Template:
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
As you can see I'm using ui-bootstrap (modal and accordion, since it is all in a modal window).
What can I do to make it refresh instantly? I'm stuck for days on this and it is frustrating... What am I doing wrong here?
EDIT: Please note that I know "::" is for one-way data binding. I've tried without it and the result is the same. I can probably resolve this by placing the data in question in the .json file, but that would really be an ugly hack.

<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
The "::" avoid data binding to reduce digest cycle. Try to remove them.

<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
// it should be
<a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>

I have solved this..What I wanted to do is to make the "URL" the same. I have changed the url to manifest the region by the region code, so it is working now.
For example:
UK:
$stateProvider
.state("de-web", {
url: "/web-developer-de",
templateUrl: "templates/de/web-developer.html",
})
.state("de-crm", {
url: "/crm-de",
templateUrl: "templates/de/crm.html"
})
Italy:
$stateProvider
.state("it-web", {
url: "/web-developer-it",
templateUrl: "templates/it/web-developer.html",
})
.state("it-crm", {
url: "/crm-it",
templateUrl: "templates/it/crm.html"
})
United States:
$stateProvider
.state("us-web", {
url: "/web-developer-us",
templateUrl: "templates/de/web-developer.html",
})
.state("us-crm", {
url: "/crm-us",
templateUrl: "templates/de/crm.html"
})
Although this works, I'm not happy. How can it be achieved that the templates are being loaded into the same url?

Previous and Next Page is Angular

I am building a site on my main page. I'm grabbing some data from JSON, and displaying it all. It includes a bunch of albums with fields like album title, album artist, etc. When I click on one album, it sends another call to the api via angular and grabs the data for just that album and displays it.
On this page, I want to have ‘previous’ and ‘next’ buttons to display the previous albums data and the next albums
I'm not sure how to do this
this is the albums/ main page ...
<section class="container-fluid music-section pad-bottom-60 pad-top-20 pad-top-30-l">
<div class="clear album-collection">
<div class="row">
<div ng-repeat="albums in music">
<a href="/music/{{albums.slug}}" class="col-12 col-1-5-xl col-1-4-l col-1-2-m album-collection__cover transition">
<img ng-src='{{albums.better_featured_image.source_url}}'>
<div class="album-overlay">
<div class="album-overlay__text-container animate">
<div class="album-overlay-text">
<span>JMP-{{albums.acf.album_cat_no}}</span>
<br><br>
<h3>{{albums.title.rendered}}</h3>
<br><br>
<span>View Album</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
this is one album page :
<section class="container-fluid music-album-section pad-bottom-60">
<div class='clear row'>
<div class="col-2-5-l col-12 music-album__left-section">
<img class="pad-top-60-l pad-top-20 animate fade-in-left-big" ng-src='{{album.better_featured_image.source_url}}'>
</div>
<div class="col-1-2-l push-1-l col-12 music-album__right-section pad-top-60-l pad-top-20 pad-bottom-50 animate fade-in-big">
<a class="back-to-all-music-link pad-bottom-50" href="/music/"><img src="../img/left-arrow.png">All Albums</a>
<span class="animate fade-in-left-big track-numbers">{{album.acf.album_track_number}} Tracks</span>
<span class="animate fade-in-left-big catalogue-number">JMP-{{album.acf.album_cat_no}}</span>
<div class="row">
<div class="col-12 col-4-5-l pad-top-10">
<h1 class="animate fade-in-left-big music-album-title">{{album.title.rendered}}</h1>
<article class="pad-bottom-30 pad-top-10">
<p class="animate fade-in-left-big" ng-bind-html="album.content.rendered"></p>
</article>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
<img src= "./img/play-button.png">
<span>Play Montage</span>
</button>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
Listen & download
</button>
</div>
</div>
<div class="next-previous-album-links pad-top-30-l pad-top-40-s pad-bottom-20">
<img src="./img/left-arrow.png">Previous Album
Next Album<img src="./img/right-arrow.png">
</div>
</div>
</div>
</section>
and my angular :
angular.module('app', ['ngRoute', 'ngSanitize'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
})
.when('/music', {
templateUrl: myLocalized.partials + 'music.php',
controller: 'Music'
})
.when('/music/:slug/', {
templateUrl: myLocalized.partials + 'album.html',
controller: 'Album'
})
.otherwise({
redirectTo: '/'
});
})
.controller('Main', function ($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/').success(function (res) {
$scope.posts = res;
});
})
.controller('Music', function ($rootScope, $scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/post_music').success(function (res) {
$rootScope.music = res;
console.log($scope.music)
});
})
.controller('Album', function ($scope, $http, $routeParams, $rootScope) {
$http.get('wp-json/wp/v2/post_music/?filter[name]=' + $routeParams.slug).success(function (res) {
$scope.album = res[0];
});
});

Angular routes giving 404 error

I'm getting 404 errors when I try to click through my angular routes, and I'm not sure whats wrong. I have these links:
Home
Portfolio
About
Travel
And the routes are set up here in routes.js
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/portfolio', {
templateUrl: 'portfolio.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'mainController'
})
.when('/travel', {
templateUrl: 'travels.html',
controller: 'mainController'
});
});
My understanding is that when I click on the , for instance, the controller will look for /about in the routes provider. Then it will see that the template about.html fills that request, and then about.html will fill into ng-view. The request is just giving me a 404 at http://localhost:8000/about, though. What am I doing wrong?
Getting no errors, but here's the rest of my angular app for reference:
var app = angular.module('app', ['ngRoute']);
app.controller('mainController', ['$scope', '$routeParams', function($scope, $routeParams) { }]);
And the HTML
<div class="mountainSection">
<div class="ang-wrap" ng-view></div>
</div>
<div class="controlPanel">
<div class="buttonWrap">
<div class="home button">
Home
</div>
<div class="divider">|</div>
<div class="portfolio button">
Portfolio
</div>
<div class="divider">|</div>
<div class="about button">
About
</div>
<div class="divider">|</div>
<div class="intl button">
Travel
</div>
</div>
</div>

AngularJS routing multiple ui-views for the same URL?

I need multiple ui-views for one URL (my homepage). The limitation for ui-routing is that I can't have multiple <div ui-view></div> but they have to be in their nested states.
<div class="left-div">
<div ui-view></div>
<button ui-sref="1"></button>
<button ui-sref="2"></button>
<button ui-sref="3"></button>
</div>
<div class="right-div">
<button ui-sref="3"></button>
<div ui-view></div>
</div>
How do I make it so that ui-sref=1 and ui-sref=2 will update the ui-view inside:
<div class="left-div"></div>
and ui-sref=3 will update the ui-view inside <div class="right-div"></div>
The issue I encountered when I used ui-router was that upon changes from ui-sref from 1 -> 3 or 2 -> 3 the ui-view of left-div will disappear because the URL changes.
How do I approach this?
EDIT- My current state views
chatApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home')
$stateProvider
.state('friend', {
url: '/friend',
templateUrl: 'friend.html'
})
.state('group', {
url: '/group',
templateUrl: 'group.html'
})
.state('search', {
url: '/search',
templateUrl: 'search.html'
})
.state('home', {
url: '/search',
templateUrl: 'search.html'
})
.state('public', {
url: '/public',
views: {
'publicView': { templateUrl: 'private-chat.html' }
}
});
<div class="col-md-3 left-col-friends" ng-controller="friendListCtrl">
<div class="friends-list-navigation">
<div class="option-wrapper">
<div class="col-xs-3 home-option" ui-sref="public"><i class="fa fa-home fa-2x"></i></div>
<div class="col-xs-3 friend-option" ui-sref="friend"><i class="fa fa-user fa-2x"></i></div>
<div class="col-xs-3 group-option" ui-sref="group"><i class="fa fa-users fa-2x"></i></div>
<div class="col-xs-3 search-option" ui-sref="search"><i class="fa fa-search fa-2x"></i></div>
</div>
</div>
<div class="friends-list-display">
<div ui-view></div>
</div>
</div>
<div class="col-md-9 middle-col-chat" ng-controller="publicCtrl">
<div class="bubble-frame-public">
<div ui-view="publicView"></div>
</div>
<div class="input-fields-wrapper" emoji-form emoji-message="emojiMessage">
<div class="col-md-8">
<textarea class="col-md-4" id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
</div>
<div class="col-md-3">
<button class="btn btn-default btn-send-public-msg" ng-click="emojiMessage.replyToUser()"><i class="fa fa-paper-plane"></i></button>
<button class="btn btn-default" id="emojibtn">
<i class="fa fa-smile-o"></i>
</button>
<button class="btn btn-default"><i class="fa fa-video-camera"></i></button>
</div>
</div>
</div>

I'm taking a guess that the publicView is the view you're wanting to stay unchanged while the other views are changing. Here's one way to tackle it.
$stateProvider
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: 'search.html'
},
'publicView#': {
templateUrl: 'private-chat.html'
}
}
})
.state('home.friend', {
views: {
'#': {
templateUrl: 'friend.html'
}
}
})
.state('home.group', {
views: {
'#': {
templateUrl: 'group.html'
}
}
});
The default URL is /home. When it's accessed, publicView is populated with private-chat.html and the unnamed ui-view is populated with search.html.
For the friend and group states, they leave the publicView alone and they don't use new URLs, which is what I think you're going for. This is accomplished by making them children states of home and by specificying absolutely which views should be altered.