I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time.
Here is my test code on plunker: http://embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview
Looks like ng-enter animation class, setting before, template uploads. Please, help.
It looks like the animation isn't working as your templates are getting loaded out of turn. I recommend either using directives for implementing tabs, or ngRoute.
I have made an example with ngRoute here:
http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview
I'm not entirely sure what your app is supposed to do, so I may have broken your initial setup.
But I see you're using a lot of rootScope. I recommend using a service for storing shared data between the controllers. Like this (using example from here: Passing data between controllers in Angular JS?)
app.service('productService', function() {
var productList = [];
addProduct = function(newObj) {
productList.push(newObj);
};
getProducts = function(){
return productList;
};
});
Update: It is possible to use dynamic templateUrls in the $routeProvider, like this. This is also possible with the controller. That way you don't have to specify a seperate route for every one of your steps.
Ok, i'm found solution for my own question, if you have same problem, you must use a $templateCache service, and here is code on plunker:
http://embed.plnkr.co/mnB6VwXqHSt6L3IEUvCI/preview
Related
I have recently started working on ANGULARJS in which I was encountered a case where I need some guidance to go through. Am implementing a message section in my application(ASP NET MVC - ANGULARJS).Currently I have implemented the message section for a specific module under a particular ng-app and under particular ng-controller. Now I need the same functionality to be used inside another module. It's like duplicating the same code again that ng-app under that ng-controller which was not a good approach. I just wanted like and plug and play kind of approach for my ANGULARJS code.
I have used 2 service,1 directive under that particular ng-app and some functions inside a particular controller. All I want is to make these one a common code and to be used inside under any ng-app and ng-controller.
Is this possible? If so how can I achieve.
Let me know if the query was unclear
You said you used 2 service, 1 directive, and controller etc for your messaging feature. If you want to re-use it across various applications, you need to bundle all of this as a module. for example:
angular.module('customMessaging', [])
.controller('messagingCtrl', function(messenger, messageManager) {
....
})
.directive('messagingDir', function() {
return {
controller: 'messagingCtrl'
...
}
})
.service('messenger', function() {
...
})
.service('messageManager', function() {
...
})
Now you can specify this as a dependency of any of your angular applications as shown below to access the directive, services and controller anywhere in the app:
angular.module('myfirstApp', ['customMessaging']);
angular.module('mySecondApp', ['customMessaging']);
Thanks for the suggestions. I have moved the message related functions such as services, directive and controller related functions into separate JavaScript file . And invoked this JavaScript file where I need message related functionalities.
Let us say that JS as Message.JS . In Message.JS I have used the app variable(Instantiated app from the JS Specific to the page globally).
JS specific to that page
var app = angular.module('appname',[]);
app.controller(...)
Message.JS
I have used the same app in my message.JS since message controller falls under that app.
app.service(...)
app.controller('messagecontroller',[]...)
When ever I need to invoke a function inside MessageController I will use Broadcast in angular to achieve this.For more info http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html
Regards,
Selvam.M
Is it possible to have multiple controllers on one route / page. I want to show 2 features of my application on one page. But they are not directly related so each would need it's own controller, model and (partial) view.
But I can't seem to figure out how I could do this.
It seems that I must use the {{render}} option here.
Is it possible to have a subdirectory structure here?
When I have {{render "dashboard.users"}} for the template it does look in template/dashboard/users.hbs but for the controller I can't seem to find where it looks and what the naming conventions should be.
E.g. should it be
App.DashboardUsersController = ... ?
edit:
Looks like it should be, but I shouldn't place it in a subfolder of controllers but name it dashboard_users_controller.js
You get this effect by rendering templates into multiple outlets of their parent template: Guide and API Docs
Here is a running JSBin demonstrating it
This should be simple but I'm fairly new to Angular and really can't understand the documentation for UI-Map form the Angular UI team.
https://github.com/angular-ui/ui-map
There are a few things I don't understand so it's probably easier for me to number them.
1) The docs talk about using Bower to install which I don't use. It says I have to load UI-map and UI-event but I'm loading Angular UI from cdnjs.com, So I think that bundles all the directives I need, or am I wrong?
2) The docs say that I have to listen to the callback parameter when loading the Google Maps API using the following code..
function onGoogleReady() {
angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
}
But I don't know what this is doing or where it is being called? Does google call this automatically when it's ready? Why is it attaching the map to an element with ID "map", surely I need to be able to dynamically use the map on many elements using the directive?
To add to the confusion, their own demo calls the function "initCall", instead of "onGoogleReady".
3) The docs say I have to add it as a dependency on my app module.
var myAppModule = angular.module('app.ui-map', ['ui.map']);
What is the app. before ui-map? My current app declaration looks like this and only has dependencies named in the array...
var portal = angular.module('portal', ['ngAnimate','ui.router', 'ui.bootstrap', 'restangular'])
Maybe I'm being really stupid, but I added 'ui-map' into the array but it didn't seem to work :(
I know this might seem easy to some but as I said I'm new to Angular and still don't totally get how dependency injection works or what order things are loaded/initialized in. Any help would really be appreciated.
It doesn't look like Angular UI maps is supported any more (I might be wrong), so I used Angular Google Maps instead.
http://angular-google-maps.org/
I'm new to Angular, and I've got two seperate controllers that work fine separately, but when I try to combine them in the same page, on of them gets broken. You can check them out here:
http://plnkr.co/edit/RUKCNUsiLLHja5BCsOXi?p=preview
http://plnkr.co/edit/UkGEaquNkXGfUgbuYBki?p=preview
I've tried to combine both controllers like this:
var app = angular.module('App', ['audioPlayer'], [ngSocial]);
But that breaks it as well. Do you think it has anything to do with the Ionic framework I'm using?
Thanks for any help!
EDIT: Here's the working demo http://plnkr.co/edit/0eQZ0O?p=preview
Could you show the third example where it actually breaks. It looks like you should have:
var app = angular.module('App', ['audioPlayer', 'ngSocial']);
If you're actually talking about combining modules. The first parameter to angular.module is the string name of the module you're defining, the second parameter is the array of dependencies.
I'm working on a Sencha Touch app, which currently isn't using controllers. I would like to use Ext.Router to take the visitor to a particular card in a panel. I've seen suggestions that it is possible to use the Ext.Router without using a strict MVC setup. But the example in the API looks like this (see: http://dev.sencha.com/deploy/touch/docs/?class=Ext.Router):
map.connect('dashboard', {controller: 'home', action: 'index'});
Is there a way to, for instance, put a function into map.connect that would show a particular card in a panel?
Second question: is it even worth trying to wrestle with this, or would it be easier to update the app with controllers? (It's a pretty small app in the early stages of development, and would probably have 3 controllers if we went that route.)
I had this same question and was hell bent on not using a controller because I had no time to restructure the code I was given. Like the chosen post reluctantly suggested I used the Ext.History class. If you call this in your onReady function it will activate the myPanel panel with the URL: www.mypage.com/#my-url-slug
function initialiseHistory() {
Ext.History.init();
urlToken = Ext.History.getToken();
if(urlToken == 'my-url-slug') {
Ext.getCmp('tabpanel').setActiveItem('myPanel', false);
}
}
Dirty I know.. but did the job.
The Router is kinda married to the controller and doesn't really provide a way to do what you're asking. If what you're trying to do is show a card based on the URL hash then ya go with a controller cause its trivial to implement.. if you're hell bent on not using a controller for some reason the only thing that comes to mind is Ext.History fires a 'change' event when the url hash changes, you could listen for that event and take appropriate action I suppose.