I have the following in my app.js:
var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var home = {
name: 'home',
url: '/home',
views: {
'nav-sub': {
templateUrl: '/Content/app/home/partials/nav-sub.html',
}
}
};
$stateProvider.state(home)
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);
in admin.js:
angular
.module('admin', ['ui.state'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/admin',
views: {
'nav-sub': {
templateUrl: '/Content/app/admin/partials/nav-sub.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: admin,
url: '/content', views: {
'grid#': {
templateUrl: '/Content/app/admin/partials/content.html',
controller: 'AdminContentController'
}
}
}
$stateProvider.state(admin).state(adminContent)
}])
I am confused about how to wire up my AdminContentController. Currently I have the following:
app.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:
app.controller('AdminContentController',
or should this belong to the module 'admin'. If it should then how should I wire it up?
Based on what you have shared, the the controller should be created on admin module such as
var adminModule=angular.module('admin'); // This syntax get the module
adminModule.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
You could also define the controller in continuation of your admin module declaration.
Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.
Related
I am using UI Router Tabs for navigation/routing. There are three tabs [User, Address and Service]. Individual tab have their own state, url, controller and template.
How can I pass request params (saved object ID, firstname and lastname) from User tab [UserCtrl.js] to AddressCtrl.js and ServiceCtrl.js.
HOW CAN I ACHIEVE THIS?
What I have done so far?
app.js
'use strict';
var app = angular.module('xyzApp', [ 'ui.router','ngResource', 'ui.bootstrap', 'ui.router.tabs']);
app
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$interpolateProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $interpolateProvider, $locationProvider) {
// CSRF Support
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$urlRouterProvider.otherwise('/');
$stateProvider
.state('new', {
url: '/',
controller: 'MainCtrl',
templateUrl: 'partials/base.html'
})
.state('new.user', {
url: '/new/user',
controller: 'UserCtrl',
templateUrl: 'partials/user-tab.html'
})
.state('new.address', {
url: '/new/address',
controller: 'AddressCtrl',
templateUrl: 'partials/address-tab.html'
})
.state('new.service', {
url: '/new/service',
controller: 'ServiceCtrl',
templateUrl: 'partials/service-tab.html',
})
}]);
MainCtrl.js
'use strict';
app
.controller('MainCtrl', ['$scope', function($scope) {
// Inititalise the new personnel page tabs
$scope.initialise = function() {
$scope.go = function(state) {
$state.go(state);
};
$scope.personneltabinfo = [
{
heading: 'User',
route: 'new.user',
//params: {
// userId: $scope.userId
//},
},
{
heading: 'Address',
route: 'new.address',
},
{
heading: 'Service',
route: 'new.service'
}
];
};
$scope.initialise();
}]);
UserCtrl.js
'use strict';
app
.controller('UserCtrl', ['$scope', '$rootScope', '$http', '$compile', '$timeout', 'userServices',
function($scope, $rootScope, $http, $compile, $timeout, userServices) {
$scope.userId = '';
$scope.savePerson = function() {
console.log("This is userData:" + $scope.userData);
// user resource service
userServices.addUser($scope.userData)
.then(function(data) {
// pass $scope.userId to [Account and Service] routes view.
// pass firstname and secondname value to [Account and Service] routes view so it’s value can be shown on their panel-title.
$scope.userId = data.id;
toastr.success('Personnel ' + $scope.baseData.first_name + ' record saved into database');
}, function(data, status, headers, config) {
toastr.error('Field Error:' + " Please fill all fields mark with * ");
});
};
}]);
I'm angular beginner!
If I understand your question, you want to pass the data from a controller to another controller.
You can check on: Passing data between controllers in Angular JS?
You can use :
a service: https://docs.angularjs.org/guide/services,
$rootScope but that's not the best solution,
or the binding data between components: https://docs.angularjs.org/guide/component
I have a problem, a Controller called OrderController standing on two modules, Sales and Supply. When I make the route that will use this controller as I can define which of the two controllers I want to use, how can I define which controller's module? I tried to register the route separately in each module, but still not the right.
Full code: https://plnkr.co/edit/iLUuUNKWZJhg23rrk1zB?p=preview
acmeModule.js
var app =
angular
.module('acme', [
// Angular UI
'ui.router',
// Acme modules
'acme.sales',
'acme.supply',
]);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
template: "Home"
})
}
salesModule.js
var app =
angular
.module('acme.sales', ['ui.router']);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state("orderBySales", {
url: "/orderBySales",
templateUrl: "content.html",
controller: 'OrderController',
controllerAs: 'vm'
});
}
app.controller('OrderController', OrderController);
function OrderController() {
var vm = this;
vm.Content = "Order by Sales";
}
supplyModule.js
var app =
angular
.module('acme.supply', ['ui.router']);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state("orderBySupply", {
url: "/orderBySupply",
templateUrl: "content.html",
controller: 'OrderController',
controllerAs: 'vm'
});
}
app.controller('OrderController', OrderController);
function OrderController() {
var vm = this;
vm.Content = "Order by Supply";
}
You have to name the controller differently, otherwise one controller overwrites the other one. In this constellation (plunker) it is the controller of module acme.supply.
Call it SupplyOrderController and SalesOrderController.
This is my Angularjs .config file that opens lead.html page whenever 'tasks' is activated from another html using ui-router.
App
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
.state('tasks', {
templateUrl: {{name}}.html,
controller:"TasksController"
});
}]);
This is my Taskscontroller.js
App
.controller(
"TasksController", [function($scope, $http,$window) {
var self = this;
self.name = 'lead'; // I wanna use this parameter in templateUrl
console.log("In tasks Controller");
}]);
I want to make the templateUrl take parameter from TasksController so that it redirects to relevant page based on the parameter set in TasksController.
Please guide me how to do this.
Thanks
You could try using $stateParams:
App.config(['$stateProvider', '$urlRouterProvider', '$stateParams', function($stateProvider, $urlRouterProvider, $stateParams) {
$stateProvider
.state('tasks', {
params: {
page: null
},
templateUrl: {{$stateParams.page}}.html,
controller: "TasksController"
});
}]);
Then in your controller:
App.controller("TasksController", [function($scope, $http, $window, $stateParams, $state) {
var self = this;
self.$stateParams.page = 'some_url.html';
self.$state.go('tasks');
}]);
Don't forget the injection in the controller too. Haven't tested this but you may need the $state go like this:
self.$state.go('tasks', { page: 'some_url.html' }, { });
I originally had my app set up with ng-route and I'm now switching over to ui-route. I used to use "when('/json/galleries/:projectId')" to generate a gallery when a thumbnail was clicked. Now with "state" I can't seem how to pass my projectId to the gallery state to generate my gallery.
App Module
(function() {
'use strict';
var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'mm.foundation', 'appControllers']);
bhamDesignsApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/home.html',
controller: 'ProjectsController'
})
.state('gallery', {
url: '/gallery/:projectId',
templateUrl: 'partials/gallery.html',
controller: 'GalleryController'
});
});
})();
App Controller
(function() {
'use strict';
var appControllers = angular.module('appControllers', []);
appControllers.controller('ProjectsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('app/json/projects.json').success(function(data){
$scope.projects = data;
});
$scope.orderProp = '-year';
}]);
appControllers.controller('GalleryController', ['$scope', '$stateParams', '$http',
function($scope, $stateParams, $http) {
$http.get('app/json/galleries/' + $stateParams.projectId + '.json').success(function(data) {
$scope.gallery = data;
});
}]);
})();
HTML
.row
.small-12.medium-3.columns(ng-repeat="project in projects | orderBy:orderProp | filter:categoryFilter")
.tmbnail-container
a(ui-sref="gallery")
img.tmbnail(ng-src="{{project.thumbnail}}")
.text
h5 {{project.title}}
h6 {{project.year}}
.small-12.medium-6.columns
a(ui-sref="gallery")
You don't pass any ID to the state.
Change it to
a(ui-sref="gallery({projectId: project.id})"
(assuming project has an id field that holds its ID)
Documentation that explains how to use ui-sref: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
I'm getting unknown state provider: editProvider <- edit <- FooController in my code:
var app = angular.module('myApp', ['ui.router']);
app.handler.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('edit', {
url: '/foo/edit',
resolve: {
values: ['FooService',
function (FooService) {
return FooService.getSomeData();
}]
},
templateUrl: '',
controller: 'FooController'
});
}]);
app.controller('FooController', ['$scope', '$http', '$state', 'FooService', 'edit', function ($scope, $http, $state, FooService, edit) {
console.log(edit.data);
}]);
The error appears inside the controller code - what's wrong?