I have an app built using ionic framework, I follow the instructions on ionicframework learn page and now I am using the native sidemenu. The problem is, I can't use controller alias. Here is a snipet of my app.js with the route config:
angular.module('checklist-atendimento', [
'ionic',
'oc.lazyLoad',
'ngStorage',
'ngCordova',
'ngMask'
])
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/app/atendimento/1');
$httpProvider.interceptors.push('TratamentoDeErrosService');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
views: {
'conteudo': {
templateUrl: 'app/templates/menu.html'
}
}
})
.state('app.inicio', {
url: '/inicio',
views: {
'menuContent': {
templateUrl: 'app/views/inicio.html',
controller: 'InicioController',
}
}
})
.state('app.atendimento', {
url: '/atendimento/:codMenu',
views: {
'menuContent': {
templateUrl: 'app/views/atendimento.html',
controller: 'AtendimentoController',
controllerAs: 'atendimentoCrl'
}
}
})
});
As you can see, I have 2 states, one without controllerAs (InicioController) and the other using controllerAs (AtendimentoController).
In controller I put
$scope.test ="TEST!!!"
and in the view I put
<b>{{atendimentoCtrl.test}}<b>
Nothing happens, if I use just {{test}}, but the text is shown.
Anyone knows how to do it ?
EDIT:
HERE there is a example of what a talking about:
http://plnkr.co/ohL5HE
Look inside ItemCtrl and inside index.html, on item.html.
I tried use an alias to controller but it don't works.
You need to change
$scope.test ="TEST!!!"
to:
this.test ="TEST!!!"
The issue here is just a typo... This is a controller state
.state('app.atendimento', {
url: '/atendimento/:codMenu',
views: {
'menuContent': {
templateUrl: 'app/views/atendimento.html',
controller: 'AtendimentoController',
controllerAs: 'atendimentoCrl'
}
}
})
where we can see 'atendimentoCrl'. And here is a view statement
<b>{{atendimentoCtrl.test}}<b>
where we can see atendimentoCtrl (compare Ctrl suffix and Crl above)
So, there is missing t in the controllerAs
Related
I'm kinda new with this UI-Route I know it's very powerful but i'm having problem working on it, I have use AngularJS before but not that often and this time i really want to use it so given that my questions goes like this (I've search everywhere regarding this but no luck for me):
The scenario is I have Index.html on that page I have two views
which are "News" and "Testi" both are confined on a div
So knowing that I added App.js (which will contain the initial code for my AngularJS implementation):
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/Views/Index.html',
views: {
'main': {
templateUrl: '/Views/App/home.html'
},
'testi': {
templateUrl: '/Views/App/testimonial.html'
}
},
controller: 'HomeCtrl'
})
});
and my controller goes like this (homeController.js)
'use strict';
app.controller('HomeCtrl', function ($scope, $state) {
$scope.welcomeMessage = 'Welcome to WeRCheese';
});
my problem is that I'm trying to access that "welcomeMessage" on my home.html page but wasn't able to, what strange is that when i put in a breakpoint on my controller it wasn't hit it seems the controller does not exist.
Maybe I'm doing it wrong because I don't have any problem when i use ngRoute before.
Lastly, how do you add in a factory?
app.controller('HomeCtrl', function ($scope, $state, homeFactory) {
});
or
app.controller('HomeCtrl', ['$scope', '$state', 'homeFactory', function ($scope, $state, homeFactory) { }]);
TIA.
I was having problem adding a comment my mistake for not realizing that I need to edit my question here. Anyway for my problem I was able to load the controller via different page but I'm still having problem loading the controller on the Index.html i tried updating the .state -> tried on different approach i.e. use '', '/', 'index' in the views.
.state('home', {
url: '', or '/', or 'index',
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl'
But still the controller is not loading, to be specific I have tried adding this line on my Index.html {{ welcomeMessage }} just to verify that the controller was/has been loaded properly.
When you have add views property to a state, the original template, templateUrl properties will be ignored, so you have to bind controllers in views.
$stateProvider.state('home', {
url: '/home',
templateUrl: 'Views/Index.html', <----- will be ignored
views: {
'main': {
templateUrl: 'Views/App/home.html',
controller: 'HomeCtrl'
},
'testi': {
templateUrl: 'Views/App/testimonial.html',
controller: 'HomeCtrl'
}
},
controller: 'HomeCtrl' <----- will be ignored
})
For factory: after defined it, you can inject it by both the ways you posted.
refer this plunker.
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: '/Views/App/home.html',
controller : 'HomeCtrl'
},
'testi': {
templateUrl: '/Views/App/testimonial.html',
controller : 'HomeCtrl'
}
},
})
});
you can do this
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl',
controllerAs: 'vm'
},
'main#home': {
templateUrl: '/Views/App/home.html'
},
'testi#home': {
templateUrl: '/Views/App/testimonial.html'
}
}
});
using controllerAs is a best practice
I am pretty new to angularjs and ionic and I've been running into one problem. Below I posted some code from the app.js file, and I've noticed that any time I define a new controller (the commented out line) causes the app not to load.
I've compared my code to other app templates and it seems like everything in the app.js file is correct so I'm at a complete loss as to what's causing this problem! Has anyone ever seen something like this??
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.userJobs', {
url: '/userJobs',
views: {
'menuContent': {
templateUrl: 'views/userJobs.html'
// controller: 'ujobsCtrl'
}
}
})
Exactly as #Claies said, you would need to define the ujobsCtrl as a controller. That line you're un-commenting isn't a definition - it's actually a request for the ujobsCtrl controller; and if you haven't defined it (I'm assuming you haven't!), then things definitely will fail to work. Some docs to check out: ui-router's docs on controllers; and then AngularJS's docs on Controllers.
The following code would be options for you to use:
Option #1: Use an anonymous function as your controller:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.userJobs', {
url: '/userJobs',
views: {
'menuContent': {
templateUrl: 'views/userJobs.html'
// controller: 'ujobsCtrl' // <-- Can't use this, it's not defined
controller: function ($scope, $log){
$log.log('yay!');
}
}
}
})
Or Option #2, where you define a separate controller, named ujobsCtrl:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.userJobs', {
url: '/userJobs',
views: {
'menuContent': {
templateUrl: 'views/userJobs.html'
controller: 'ujobsCtrl' // <-- defined below, so we can now use this
}
}
})
.controller('ujobsCtrl', function ($scope, $log){
$log.log('yay!');
})
For larger apps, Option #2 is going to be the cleaner way of having lots of controllers - you can break these out into individual files in a controllers/ directory, and get that logic out of your .config block and the state definitions. For a sanity check though, Option #1 is a good starting place.
just a quick question. Can named views in the ui-router for angular have routes and an url? And if so, how can I activate them?
I searched through the wiki, but can't find any info on that.
What I want is a app with three different child routes so only one can be active at a time, but they're supposed to be in different views, so I can nicely animate between them with an accordion effect.
Any help there?
Thanks!
EDIT: Here's some code of my routing so far:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
//templateUrl: 'app/main/main.html',
//controller: 'MainController',
//controllerAs: 'main',
views: {
'' : {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
},
'contact': {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
},
'profile': {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
},
'works': {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
}
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
I'd recommend just creating different states for each view. There's no reason you can't animate smoothly between different states.
So:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('home.contact', {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
})
.state('home.profile', {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
params: {
"user" : {}
}
})
.state('home.works', {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
})
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
In your ui-sref links, you can pass data to those views using parameters, like this: <a ui-sref="home.profile({user: contact.user}) along with the 'params' section in the state definition as I've included above.
Routing is serverside so if you call any address your serverside routing needs to launch proper html or javascripts which will let you render what you want.
For more accurate answer please respond with more details: what is your serverside engine, which version of angular you use etc.
I'm currently working on an app, build using Ionic. My problem is that $state.go is only working in the browser but not on the phone. This seem to be a common problem, but after reading a lot of answers to the same questions, I still can't figure out how to fix it.
The general fix seems to be to ensure you're using relative URLs as explained here: Using Angular UI-Router with Phonegap but I still can't get it to work. What am I missing?
Link to plunker: http://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8?p=preview
App.js structure:
....
$stateProvider
.state('parent', {
url: "/",
templateUrl: "parent.html"
})
.state('parent.child', {
url: "child",
templateUrl: "child.html"
})
$urlRouterProvider.otherwise("/")
})
....
For state.go to work you have to inject $state dependency to your controller
app.controller('ParentCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state
}]);
app.controller('MenuCtrl', ['$scope', '$state', function($scope, $state){
$scope.goTo = function(){
$state.go('menu.kategorier');
}
}]);
and you have to register the state you want to goto in $stateProvider
$stateProvider
.state('menu.kategorier', {...})
and to get to that state you have to go from parent state like 'menu' in this case. you cannot change state from 'parent' to 'menu.kategorier' but you can goto 'parent.child' from 'parent'
I solved it by changing my setup for the nested views, based on this example: http://codepen.io/mhartington/pen/Bicmo
Here is my plunker, for those who are interested:
Plunker: http://plnkr.co/edit/2m5bljMntpq4P2ccLrPD?p=preview
app.js structure:
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
template: "<ion-nav-view name='menuContent'></ion-nav-view>"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.home.home1', {
url: "/home1",
views: {
'inception' :{
templateUrl: "home1.html"
}
}
})
Right now i am using routeProvider to change between views which works awesome. But now i want to create a view which contains 4 different tabs which should contain 4 different controllers. ive read here that it could be done with stateProvider:
Angular ui tab with seperate controllers for each tab
here is my code:
var WorkerApp = angular.module("WorkerApp", ["ngRoute", 'ngCookies', "ui.bootstrap", "ngGrid", 'ngAnimate', 'ui.router']).config(function ($routeProvider, $stateProvider) {
$routeProvider.
when('/login', {
templateUrl: 'Home/Template/login', resolve: LoginCtrl.resolve
})
.when('/register', { templateUrl: 'Home/Template/register', resolve: RegisterCtrl.resolve })
.when('/', { templateUrl: 'Home/Template/main', resolve: MainCtrl.resolve })
.when('/profile', { templateUrl: 'Home/Template/profile', controller: "ProfileController" })
.when('/contact', { templateUrl: 'Home/Template/contact', controller: "ContactController" })
$stateProvider.state('tabs', {
abstract: true,
url: '/profile',
views: {
"tabs": {
controller: "ProfileController",
templateUrl: 'Home/Template/profile'
}
}
}).state('tabs.tab1', {
url: '/profile', //make this the default tab
views: {
"tabContent": {
controller: "ProfileController",
templateUrl: 'Home/Template/profile'
}
}
})
.state('tabs.tab2', {
url: '/tab2',
views: {
"tabContent": {
controller: 'Tab2Ctrl',
templateUrl: 'tab2.html'
}
}
});
});
but i cant get it really to work because default of routeprovider is set to send over to work because my routeprovider is sending over to "/" on default, which makes "/tabs" invalid. so i cant actully figure out if it is possible to switch to states on specific url. Or change state on specific URL in routeProvider?
I can't tell you for sure exactly what's wrong with the code you've provided, but I'm using Angular UI-Router with the same use case you described, and it's working for me. Here's how I have it configured and how it's different from your configuration:
I don't use $routeProvider at all (none of your $routeProvider.when statements). I'm pretty sure you should not be using $routeProvider since you're using $stateProvider.
I have one use of the $urlRouterProvider with an 'otherwise' statement to specify a default URL:
$urlRouterProvider.otherwise("/home");
My calls to $stateProvider.state is a little different from yours. Here's the one for the parent view of the tabs:
$stateProvider.state('configure', {
url: "/configure",
templateUrl: 'app/configure/configure.tpl.html',
controller: 'ConfigureCtrl'
});
Here's an example of the child state (really the same except for the state name being parent.child format, which you already have in your code; and I added a resolve block but you could have that on the parent as well):
$stateProvider.state('configure.student', {
url: "/student",
templateUrl: 'app/configure/student/configure.student.tpl.html',
controller: 'ConfigureStudentCtrl',
resolve: {
storedClassCode: function($q, user, configureService) {
return configureService.loadMyPromise($q, user);
}
}
});
Also, I'm using version 0.2.8 of Angular UI-Router with version 1.2.9 of Angular. I think this would work with any version of Angular 1.2.0 or later.