Below is my HTML and the code to do a web service call and display the data in ngGrid. The problem is with the route provider, I'm not being able to show the grid in my separate view, but if I do the exact same code without the route provider,and load just that page, it works perfectly fine.
Since I'm very new to angularJS, any suggestions would be appreciated.I've done lot of research but did not work, at least for me. Please consider this if I have missed related post somewhere. Thanks ahead!
<div>
<!--Placeholder for views-->
<div ng-view=""></div>
</div>
//this is what I have in one of my view for grid.
<div class="gridStyle" data-ng-grid="gridOptions">
</div>
/* display/get/call the JSON data from the web service and bind it to the view */
var app = angular.module('salesApp',['ngGrid']);
app.config (['$routeProvider', function ($routeProvider){
$routeProvider
.when('/sales',
{
controller:'salesCtrl',
templateUrl:'Partials/sales.html'
})
.when('/associate',
{
controller:'assocCtrl',
templateUrl:'Partials/associate.html'
})
.otherwise({redirectTo:'/sales'});
}]);
app.controller('salesCtrl', function($scope, $http) {
$http.jsonp('http://some url...')
.success(function (data) {
$scope.sales = data;
});
$scope.gridOptions = {data: 'sales',
columnDefs:[{field:'Region_Num', displayName: 'Region Num'}
],
showGroupPanel: true
};
});
This is an older post; but I was having the same problem. It turns out when I defined the app/Moduile; I was not passing ngGrid in as one of the options:
myApp = angular.module('myApp', ['ngGrid']);
That is clearly not your problem; as I do see the statement in your code; so this answer is probably for other people who find this question via Google.
Related
I have an angular app which has a ng-view which (like any good MVC should) manipulates how the model is shown. The data (model) comes from a database, and I call it into the app's component. From there I want to propagate (if that's the right word) the model into ng-view, which loads a template to display the data based on the route. I also want to be able to filter the data/model that goes into the view with a "top-bar"
I.e:
INDEX.HTML:
<html ng-app="app">
<head>...</head>
<body ng-controller="appController">
<top-bar></top-bar>
<div ng-view></div>
</body>
</html>
APP.JS:
angular.module('app', ['top-bar','view-one','view-two', 'ngRoute']);
angular.module('app').controller('appController', function() {
var self = this;
this.myData = [];
$http.get('theQuery').then(res => self.myData = res.data);
});
angular.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/view-one', {template:'<view-one></view-one>'})
.when('/view-two', {template:'<view-two></view-two>'});
});
angular.module('top-bar', ['ngRoute']);
angular.module('top-bar').component('top-bar', {
templateUrl: './app/top-bar/top-bar.template.html',
controller: function(filterFilter) {
this.filters = filterFilter(...);
}
});
angular.module('view-one', ['ngRoute']);
angular.module('view-one').component('view-one', {
templateUrl: './app/view-one/view-one.template.html',
controller: function(filterFilter) {
// appController.data and topBar.filters would somehow
// need to be gotten from those respective modules.
this.data = appController.data;
this.filter = topBar.filters;
}
});
What I am trying to figure out is how to get the data from the main app's controller (appController) and the top-bar component, and send it to whatever view is currently loaded into ng-view.
I've been searching the web, I cannot find if the better way to do this would be to use binding (i.e. binding: {data:'<'})in the view-one controller/component, a system of $scopes, a custom service or something else. I also can't find out I would accomplish using either one to get the data in there. Thus any answers that also include a) code samples and b) links to further documentation I could read up on would be would be much appreciated.
The recommended way for doing this is to create a service, and let the different controllers work with the reference to the objects provided by the service.
Possible duplicate of enter link description here
I have an application with a parent controller called DashboardCtrl, and multiple child controllers (DashboardBuyerCtrl, DashboardSellerCtrl...)
I'd like to be able to share the results of an HTTP request between the different controllers.
At the moment, I'm executing my HTTP request in every controller, but I think that this is not ideal performance wise.
I've read that I should use service, but I'm stuck here.
can anyone help?
Thanks
Using services is, in general, a good practice because helps you to organize and share the code across your application, I've created a small app to showcase how services could be created and reused in controllers:
var app = angular.module('testApp', []);
app.controller('ctrlA', function($scope, getIp) {
getIp().then(function(resp) {
$scope.data = resp.data.origin;
});
});
app.controller('ctrlB', function($scope, getIp) {
getIp().then(function(resp) {
$scope.data = resp.data.origin;
});
});
app.service('getIp', function($http) {
return function() {
return $http.get('https://httpbin.org/ip');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
<div ng-controller="ctrlA">
First controller
<p>IP: {{data}}</p>
</div>
<div ng-controller="ctrlB">
Second controller
<p>IP: {{data}}</p>
</div>
</div>
Regarding performance, I'd suggest using caching option if content is not being updated frequently(or not updated at all), like so:
$http({
url: '...',
method: 'GET',
cache: true
});
This will save request's response for future use.
You can read more about services in the official documentation.
I am using node for the backend and angular for the frontend and am trying to display the products, however, nothing is being displayed. For the database, I am using Postgres (Sequelize) (everything works here and I dont have any problems with my models etc. I have been looking at other code, searched this forum etc but dont know what is wrong with my code-could be either the backend route is wrong or the angular code but I cant tell what it is. Also, I am using Gulp(so no script tags are necessary).
Could anyone help? Thanks!
Ps. if I missed to include anything, pls let me know. I didnt include my database code as Im sure (so far) the problem is not there.
the backend (with node):
server/app:
app.use('/api', require('./routes'));
server/app/index.js:
var router = require('express').Router();
module.exports = router;
router.use('/products', require('./products'))
router.use(function (req, res) {
res.status(404).end();
});
server/app/routes/products:
var router = require('express').Router();
var Products=require('../../db/models/products');
router.get('/', function(req,res,next){
Products.findAll()
.then(function(all){
res.send(all)
})
.catch(next);
})
module.exports = router;
frontend with angular:
browser/js/shop/shop.controller.js:
app.controller('ShopCtrl', function ($scope, ProductsFactory) {
ProductsFactory.fetchAll()
.then(function(products){
$scope.products=products;
})
$scope.allProducts={};
browser/js/shop/shop.js:
app.config(function ($stateProvider) {
$stateProvider.state('shop', {
url: '/shop',
controller: 'ShopController',
templateUrl: 'js/shop/shop.html',
});
});
browser/js/shop/shop.html:
<div ng-repeat="product in products">
<h1>{{ product.title }}</h1>
</div>
In browser/js/shop/shop.js: you use "ShopController" as the controller for the route but you named it "ShopCtrl" in shop.controller.js
Rename either so they match
I have gotten a list of users from my sails back end into an angular view using $http. However, all I need is the information of the current user, and I need to access each attribute individually. Can someone provide for me an example of how I might go about this?
In api/controllers/UserController.js. This sails function returns the current user information in req.user.
module.exports = {
getUser: function(req,res) {
return res.send(req.user);
};
In config/routes.js. This is the route to the 'getUser' function in UserController.js.
'/getUser': {
controller: 'UserController',
action: 'getUser'
}
In assets/js/controllers.js, here is the $http request to the 'getUser' function in UserController.js. This is how you get the information from req.user into the front end.
angular.module('myApp.controllers', []).
controller('myCtrl', ['$scope', '$http', function($scope, $http) {
$http.get("http://localhost:1337/user/getUser").then(function(result) {
$scope.currentUser = result.data;
})
}]);
In assets/js/app.js, make sure your angular route is set to your view.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view', {templateUrl: 'partials/view.html', controller: 'myCtrl'});
}]);
After putting this code (with your own variables/routes/server info) in the correct places, you can access the current user in your view like this
<div ng-controller="myCtrl">
{{ currentUser.email }} <br>
{{ currentUser.username }} <br>
{{ currentUser.etc }}
</div>
I searched the internet high and low for a week for an answer on how to do this and eventually came up with this. I see that a lot of people (on this site especially) have asked the same question, and I never really found a good, explicit answer. So I thought I would post what I've come up with as an answer to my own question.
I have a basic app, that fetches some data through the $http service, however it doesnt render the data correct in the template, when the template is served from the template cache. My code looks like this:
angular.module('app', [])
api service:
.factory('api', function($http, $q) {
return {
getCars: function() {
return $http.get('api/cars');
}
};
})
the controller using the service:
.controller('carsCtrl', function($scope, api) {
api.getCars().success(function(data) {
$scope.cars = data;
});
})
the route setup:
.config(function($routeProvider) {
$routeProvider.when('/cars', {
templateUrl: 'cars.html',
controller: 'carsCtrl'
});
});
and the template cars.html
<div ng-repeat="car in cars">
{{ car }}
</div>
this works the first time the browser hits /cars, however, if I push the back on forward button in the browser to hit the url a second time without a page reload, the {{car}} is not being rendered. If the cars.html is put in the templateCache like this:
angular.module('app').run(function($templateCache) {
$templateCache.put('cars.html', '<div ng-repeat="car in cars">{{ car }}</div>');
});
the {{car}} binding is not rendered either.
I suspect this has something to do with Angular not unwrapping promises in templates anymore, but not totally sure. Does anyone know what I am doing wrong and how to write this code correctly?
Well, I saw some syntax errors in your code (maybe you didn't copy the code but typed it manually for SO not sure). Also you returned deferred instead of deferred.promise. What you trying to achieve works just fine:
Plnkr Example