I am totally new with angularjs and the ionic framework, but for a school project I need to make a app so I thought this was the best was.
But right now I face a problem, I am using the ionic tabcontroller and I want to give a variable with the tabs.
Here is a screenshot to explain how it need to works.
I hope someone can help me.
Edit:
routes.js:
.state('tabsController.dos', {
url: '/dos/:itemid',
views: {
'tab1': {
templateUrl: 'templates/dos.html',
controller: 'dosCtrl',
controller: function ($stateParams, $location, $http, $scope, $sce) {
$scope.reload = function() {
$state.reload();
};
console.log($stateParams.itemid);
$http.get('https://host/app/php/info.php?landid='+$stateParams.itemid+'&actie=dos')
.success(function(response){
$scope.dynamicHtml = $sce.trustAsHtml(response);
});
}
}
}
})
.state('tabsController.dont', {
url: '/donts/:itemid',
views: {
'tab2': {
templateUrl: 'templates/dont.html',
controller: 'dontCtrl'
}
}
})
Related
I'm trying to resolve $scope for component-usage reasons but it seems to be a problem... please look at the code and let me know if you see a problem or have a different idea of how to implement it.
angular.module('app').config(
function ($stateProvider) {
$stateProvider.state('home', {
url: '/home',
views: {
'': {
template: `<my-comp user-logged-in="userModel"></my-comp>`
}
},
resolve: {
'$scope': function ($rootScope) {
var scope = $rootScope.$new();
scope.userModel = {userId:1, name:'user'};
return scope;
}
}
})
});
As you can see I'm trying to pass the userModel's data directly to the component controller, but it fails...
Currently I'm using the following logic which work's fine but i'm trying something new :)
views: {
'': {
template: `<my-comp user-logged-in="$ctrl.userModel"></my-comp>`,
controller: function (userLoggedIn) {
this.userModel = userLoggedIn;
},
controllerAs: '$ctrl'
}
},
resolve: {
userLoggedIn: function (userLoggedIn) {
return userLoggedIn;
}
}
Please advise.
I have various states that use the same resolve to load a timeLog into my controller $scope before the controller loads. I would like to not reproduce this code but share it between these views. I'm fairly new to JS frameworks, and especially Angular JS.
I'm having a hard time googling this and not finding any decent information. Maybe I'm searching incorrectly or not thinking about this correctly. Any Suggestions?
.config(function($stateProvider) {
$stateProvider
.state('tab.edit-log-summary', {
url: '/logs/edit-log-summary/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-log-summary.html',
controller: 'EditLogSummaryCtrl'
}
},
resolve: {
timeLog: function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
},
}
})
.state('tab.edit-time-log', {
url: '/logs/edit-time-log/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-time-log.html',
controller: 'EditTimeLogCtrl'
}
},
resolve: {
timeLog: function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
},
}
})
})
This really goes down to vanilla Javascript. The resolves are objects. Just define them as a single object somewhere above and pass it to the resolve property each time.
.config(['$stateProvider',function($stateProvider) {
var timeLogResolve = {
timeLog: ['config','$stateParams','DailyLog',function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
}]
};
$stateProvider
.state('tab.edit-log-summary', {
url: '/logs/edit-log-summary/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-log-summary.html',
controller: 'EditLogSummaryCtrl'
}
},
resolve: timeLogResolve,
}
})
.state('tab.edit-time-log', {
url: '/logs/edit-time-log/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-time-log.html',
controller: 'EditTimeLogCtrl'
}
},
resolve: timeLogResolve,
}
})
}])
One suggestion- use inline array notation for providing dependencies. This helps protect your code from breaking if you minify it. I did that myself in the demo above, but I leave it to your discretion to keep it.
I tried to re-use a url for several states with angular UI-Router.
I tried to do that :
.state('app.contracts', {
url: '/contracts',
controller: function($rootScope, $scope, $state) {
if ($rootScope.isDistributor) {
$state.go('app.contracts-distributor');
} else if ($rootScope.isShop) {
$state.go('app.contracts-shop');
} else if ($rootScope.isVendor) {
$state.go('app.contracts-vendor');
}
}
})
.state('app.contracts-distributor', {
controller: 'ContractDistributorController',
templateUrl: 'views/contracts/list-distributor.html'
})
.state('app.contracts-shop', {
controller: 'ContractShopController',
templateUrl: 'views/contracts/list-shop.html'
})
.state('app.contracts-vendor', {
controller: 'ContractVendorController',
templateUrl: 'views/contracts/list-vendor.html'
})
But when I try this I have an infinite loop.
Any idea what I'm doing wrong?
There is a working plunker
Not sure about the concept, what is the real goal ... but it should work. This is the adjusted state (just to go somewhere on ELSE):
.state('app', { template: '<div ui-view=""></div>', })
.state('app.contracts', {
url: '/contracts',
controller: ['$rootScope', '$scope', '$state',
function($rootScope, $scope, $state) {
if ($rootScope.isDistributor) {
$state.go('app.contracts-distributor');
} else if ($rootScope.isShop) {
$state.go('app.contracts-shop');
} else { // if ($rootScope.isVendor) {
$state.go('app.contracts-vendor');
}
}]
})
I used array controller notation and ng-strict-di, just to avoid later issues with minification. And assured, that parent state app has target ui-view=""
Check it here
i am just learning basics of angular and today it started to change my app using a factory to get data and implementing route provider ! So far everything works fine! But when I try to add data on another view and head back to my list view scope is reloaded again from factory and no added data shows up.
My approach won't work because each time change my view I will call my controller which reloads data from factory! What can I do to make my Add template will work and changes data everywhere else too.
Maybe somebody can give me a tip how to cope with this problem ?
script.js
var app = angular.module('printTrips', ['ngRoute']);
app.factory('tripFactory', function($http) {
return{
getTrips : function() {
return $http({
url: 'trips.json',
method: 'GET'
})
}
}
});
app.controller('TripController', function($scope, $filter, tripFactory) {
$scope.trips = [];
tripFactory.getTrips().success(function(data){
$scope.trips=data;
var orderBy = $filter('orderBy');
$scope.order = function(predicate, reverse) {
$scope.trips = orderBy($scope.trips, predicate, reverse)};
$scope.addTrip = function(){
$scope.trips.push({'Startdate':$scope.newdate, DAYS: [{"DATE":$scope.newdate,"IATA":$scope.newiata,"DUTY":$scope.newduty}]})
$scope.order('Startdate',false)
$scope.newdate = ''
$scope.newiata = ''
$scope.newduty = ''
}
$scope.deleteTrip = function(index){
$scope.trips.splice(index, 1);
}
});
});
view.js
app.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'TripController',
templateUrl: 'view1.html'
})
.when('/view1',
{
controller: 'TripController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'TripController',
templateUrl: 'view2.html'
})
.when('/addtrip',
{
controller: 'TripController',
templateUrl: 'add_trip.html'
})
.otherwise({ redirectTo: 'View1.html'});
});
Here is my plunker
Thanks for your help
You should use Service instead of Factory.
Services are loaded each time they are called. Factory are just loaded once.
app.service('tripFactory', function($http) {
return{
getTrips : function() {
return $http({
url: 'trips.json',
method: 'GET'
})
}
}
});
Angular started off easy to understand but today I'm completely lost and would appreciated any help that is offered here for this problem I've come across.
So I have a two column page, one side the filters and the other the list of things to be filtered. This page is created using the bit of html injected in to the DOM. I have a filter template and a list template and they both have their own controllers (filterCtrl and filterCtrl).
I understood that I needed to seperate the http request for the controllers in to factories, so at the moment an example factory and controller in my app look like this.
fpApp.controller('listController', ['$scope', 'eventsFactory',
function($scope, eventsFactory) {
eventsFactory.eventList().then(
function(data){
$scope.events = data;
}
);
}
]);
and
fpApp.factory('eventsFactory', function ( $http ) {
return {
eventList: function() {
return $http.get('/js/db/events.json')
.then(
function(result) {
return result.data;
});
}
};
});
at the moment every thing is grand, I have a interface built up from partials and everything is outputting what I need. My problem is that I need to apply those filters to the list but have no idea how to get the information out of one controller in to the other controller or even one template to the other.. Once I'm able to get data from one to the other ill be good.
fpApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/grid");
//
// Now set up the states
$stateProvider
.state('grid', {
url: '/grid',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/grid.html' },
'filerList#grid': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#grid': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#grid': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
})
.state('list', {
url: '/list',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/list.html' },
'filerList#list': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#list': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#list': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
});
});
So in summary how do I affect the list controller when the user is clicking filters in the filterController?
Thank you for your time in advance.