I have a page in which I want to load three controllers when the user clicks the link retrieve total data, I want the total data view to load three controllers.
I have done the following so far. But it only loads one controller.
HTML
<a href="#/total" > Get Total Data </a></br></br>
<div ng-view style="position: absolute; text-align: left; ">>
</div></p>
</div>
<div>
<script type="text/ng-template" id="test.html">
<h1 class= "tile tileLargo amarelo" >Total Places: {{places.places}}</h1>
<h1 class= "tile tileLargo azul" >Total Users: {{users.users}}</h1>
<h1 >Total Coolios: {{coolios.coolios}}</h1>
</script>
</div>
Angular:
Route:
myApp .config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/total', {
templateUrl: 'test.html',
controller: 'TotalplacesCtrl'
}).
when('/total', {
templateUrl: 'test.html',
controller: 'TotalUserCtrl'
}). when('/total', {
templateUrl: 'test.html',
controller: 'TotalCoolioCtrl'
}).
Contollers:
myApp.controller('TotalUserCtrl', function($scope,$http) {
$http.get('http://94.125.132.253:8001/gettotalusers').success(function (data) {
$scope.users = data;
console.log(data);
}
)}); //Total coolios
myApp.controller('TotalCoolioCtrl', function($scope,$http) {
$http.get('http://94.125.132.253:8001/gettotalcoolios').success(function (data) {
$scope.coolios = data;
console.log(data);
}
)});
//Total coolios
myApp.controller('TotalplacesCtrl', function($scope,$http) {
$http.get('http://94.125.132.253:8001/gettotalplaces').success(function (data) {
$scope.places = data;
console.log(data);
}
)});
How can I fix it? I am very new to angular. But this is what I have done so far.
Only your last route handler will fire in this case as each definition overwrites the last. There's a couple of alternatives I can think of - use the UI Router and use nested states or specify the controller directly on each element that you want to render using that controller... E.g.
Javascript
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/total', {
templateUrl: 'test.html',
controller: 'TotalCtrl'
});
}])
.controller('TotalCtrl', function($scope) {
})
.controller('TotalPlacesCtrl', function($scope) {
$scope.places = {
places: 24
};
})
.controller('TotalUsersCtrl', function($scope) {
$scope.users = {
users: 55
};
})
.controller('TotalCooliosCtrl', function($scope) {
$scope.coolios = {
coolios: 18
};
});
** Template **
<script type="text/ng-template" id="test.html">
<h1 ng-controller="TotalPlacesCtrl">Total Places: {{places.places}}</h1>
<h1 ng-controller="TotalUsersCtrl">Total Users: {{users.users}}</h1>
<h1 ng-controller="TotalCooliosCtrl">Total Coolios: {{coolios.coolios}}</h1>
</script>
Also Plunker to demonstrate.
Related
I have one arguments undefined but i don't understand why.
If I put my controller in app.js folder but everything works as I intend to create a good structure nothing works.
structure:
index
app
app.js
components
home
views
job_offers.html
controller
employer_controller.js
My controller:
var app = angular.module('myApp.employerCtrl', []);
app.controller("employerCtrl", ["$scope", function($scope) {
$scope.title = "Fronteend Software Engineer";
$scope.company = "Bee Engineering";
$scope.city = "Lisbon";
$scope.schedule = "Full-time";
$scope.date = "17-10-2016";
console.log($scope.city,$scope.title);
}]);
App.js
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl: "app/components/home/views/job_offers.html",
controller: "employerCtrl"
})
.when("/job" , {
templateUrl: "app/components/job/views/job.html",
controller: "job"
})
.when("/formation" , {
templateUrl: "app/components/formation/views/formation.html",
controller: "formation"
})
.when("/news" , {
templateUrl: "app/components/news/views/news.html",
controller: "news"
})
.otherwise({
redirectTo: '/login'
})
});
html
<html lang="en" data-ng-app="myApp" >
<!-- About Section -->
<section id="slide" class="about-section" >
<div class="container">
<div class="row content" ng-view>
</div>
</div>
</section>
You dont have to declare the module for the controller again,
//remove this line
var app = angular.module('myApp.employerCtrl', []);
app.controller("employerCtrl", ["$scope", function($scope) {
$scope.title = "Fronteend Software Engineer";
$scope.company = "Bee Engineering";
$scope.city = "Lisbon";
$scope.schedule = "Full-time";
$scope.date = "17-10-2016";
console.log($scope.city,$scope.title);
}]);
On loading '/', I am getting 'content' and 'sidebar'using 'myService' and resolve option in route provider and I can render the 'content' to the template ($scope.contents = content;).
But $scope.sideBar = sideBar; is not working. This is because sideBar is outside the template ?
How can I render sidebar items on loading '/' ? Is it possible to pass this data (sidebar) to the indexCtrl?
app.js
var myApp = angular.module("MyApp", ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'contents.html',
controller: 'Myctrl',
resolve: {
content: function(myService){
return myService.getContent();
},
sideBar: function(myService){
return myService.getSideBar();
}
}
}).
otherwise({
redirectTo: '/'
});
}]);
myApp.controller('Myctrl', function (content, sideBar, $scope) {
$scope.contents = content;
$scope.sideBar = sideBar;
});
myApp.controller('indexCtrl', function($scope) {
});
myApp.service("myService", function () {
this.getContent = function () {
return 'Main contents';
}
this.getSideBar = function () {
return 'side bar'
}
});
index.html
<div ng-app="MyApp" ng-controller="indexCtrl">
<div class="sidebar">
{{sideBar}}
</div>
</div>
<div class="main">
<div ng-view></div>
</div>
</div>
contents.html
<div>{{contents}}</div>
You can inject your myService into your indexCtrl and access the function getSideBar like this
myApp.controller('indexCtrl', function($scope, myService) {
$scope.sideBar = myService.getSideBar();
});
this will get the string from your getSideBar function when your indexCtrl is first initialized. If you do this:
myApp.controller('indexCtrl', function($scope, myService) {
$scope.sideBar = myService.getSideBar;
});
and inside index.html:
<div class="sidebar">
{{sideBar()}}
</div>
The string will update when the data in your service updates.
I am new to angular JS.How can I redirect to another page when the button is clicked.
My code here
var app = angular.module("plunker", [])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/home',
{
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about',
{
templateUrl: 'about.html',
controller: 'AboutCtrl'
});
$routeProvider.when('/contact',
{
templateUrl: 'contact.html',
controller: 'ContactCtrl'
});
$routeProvider.otherwise(
{
redirectTo: '/home',
controller: 'HomeCtrl',
}
);
});
app.controller('NavCtrl',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
}]);
app.controller('AboutCtrl', function($scope, $compile) {
console.log('inside about controller');
});
app.controller('HomeCtrl', function($scope, $compile) {
console.log('inside home controller');
//redirect when button click
function Cntrl ($scope,$location) {
$scope.redirect = function(){
window.location.href = '/about';
}
}
});
app.controller('ContactCtrl', function($scope, $compile) {
console.log('inside contact controller');
});
my html markup is
<div ng-controller="Cntrl">
<button class="btn btn-success" ng-click="changeView('about')">Click Me</button>
</div>
You entered :
How to get this.help me to solve this .
Just use a standard HTML link :
<div ng-controller="Cntrl">
<a class="btn btn-success" ng-href="#/about">Click Me</a>
</div>
No need to create a scope function for that. You can also handle that dynamically thanks to ng-href :
<div ng-controller="Cntrl">
<a class="btn btn-success" ng-href="#/{{view}}">Click Me</a>
</div>
Last thing, you should consider using ui-router which handle even better this cases
Why do you need to send the view as a param:
Try this:
$scope.changeView = function() {
$location.path(#/about);
}
If solution that Cétia presented does not work, then it is possible that you do not have your routes defined. Make sure that you have your route defined withing app.js like this :
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/Login', {
templateUrl: 'Navigate/LoginView',
controller: 'someLoginController'
})
]);
You can as well use angulars state provider (do some research) and from state provider you can access your routes within html as :
<a href="state.routName" />
I have two angular js controllers. When the click the ng-href link in recorddetails.html,
I am able to see the result binded as "The activity name is Exercise" but the same if I do with ng-click by clicking button with find() in send.html. I am able to see the recorddetails.html but the page is displaying without the data being binded as "The activity name is {{activity}}".I have provided the code belowe for reference.Kindly, provide some valuable solutions.
index.html
<div ng-controller="controllerOne">
<a ng-href="#/recorddetails/100">Running</a>
</div>
recorddetails.html
<div ng-controller="controllerTwo">
<p> The activity name is {{activity}}</a>// The scope name is Exercise
</div>
send.html
<div ng-controller="controllerThree">
<button ng-click="find()">
</div>
JS file
angular.module('exampleapp', ['ngRoute').config(
[ '$provide', '$httpProvider', '$routeProvider', function($provide, $httpProvider, $routeProvider) {
$routeProvider.
when('/recorddetails/:id', {
templateUrl: '/records/recorddetails.html',
controller: 'controllerTwo'
.otherwise({
redirectTo: '/defaultpage'
});
app.controller('controllerOne',
[ '$scope','$location',function($scope,$location) {`enter code here`
}
app.controller('controllerTwo',
[ '$scope','$location',function($scope,$location) {
$scope.activity = "Exercise";
}
app.controller('controllerThree',
[ '$scope','$location',function($scope,$location) {
$scope.find = function(){
$location.path("/recorddetails/100");
}
}
var app=angular.module('binding',['ngRoute'])
app.config(['$routeProvider',function ($routeProvider)
{
$routeProvider
.when('/',
{
templateUrl:'one.html',
controller:'controllerOne'
})
.when('/recorddetails/:id', {
templateUrl: 'recorddetails.html',
controller: 'controllerTwo'
})
.when('/send', {
templateUrl: 'send.html',
controller: 'controllerThree'
})
}])
app.controller('controllerOne',function($scope,$location){
})
app.controller('controllerTwo', function($scope,$location) {
$scope.activity = "Exercise";
})
app.controller('controllerThree',function($scope,$location) {
$scope.find = function(){
console.log('in 3');
$location.path("/recorddetails/100");
}
})
<html ng-app="binding">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="routefile.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Somehow my app stopped working during development and I really cannot get what's wrong with it.
I've removed everything, the only code remaining is:
function handlerControl($scope, $routeParams, $location){
$scope.route = $routeParams;
}
var app = angular.module('Hello', []).config(
function($routeProvider){
$routeProvider.when('/:a/:b', {controller: handlerControl});
}
);
and html is
<body ng-app="Hello">
<div ng-controller="handlerControl">
{{route}}
</div>
</body>
omitting head part with including everything.
When I go to
http://helloday/#/a/b/
I'm getting an empty hash while expecting to get {a: 'a', b: 'b'}
What I'm doing wrong?
Bit modified(to make it work) jsFiddle: http://jsfiddle.net/wWDj2/http://jsfiddle.net/wWDj2/
Routing requires you use ngView, and that you specify either a template or a templateUrl:
App code.
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/foo/:id', {
controller: 'FooCtrl',
template: '<h1>Foo {{id}}</h1>'
})
.when('/bar/:test', {
controller: 'BarCtrl',
templateUrl: 'bartemplate.html'
})
.otherwise({
controller: 'DefaultCtrl',
template: '<h1>This is the default</h1>'
});
});
app.controller('FooCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
app.controller('BarCtrl', function($scope, $routeParams) {
$scope.test = $routeParams.test;
});
app.controller('DefaultCtrl', function($scope){});
Your main page's markup:
<div ng-app="myApp">
Foo 123
Bar Blah
Default route
<hr/>
<div ng-view>
<!-- your processed view will show up here -->
</div>
</div>