How can I apply animation in ui-views?
I found the code
// Unfortunately there is no neat way to ask $injector if a service exists
var $animator; try { $animator = $injector.get('$animator'); } catch (e) { /* do nothing */ }
But how can I inject an animator?
This is not a relevant question. If you're using a sufficiently recent version of AngularJS (i.e. 1.1.5), it works by itself.
See the documentation for details: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate
Related
I have a parsley-config.js file in which I have successfully added lots of customizations to parsley, utilizing the methods described on Parsley's defaults.js documentation. However I'm having trouble figuring out how to add some attributes to elements upon validation. the classHandler method looked promising but only ran on initialization, not when validating.
Here's a little of the code I'm thinking of using. I just need to know what Parsley method I should stick it in.
var ParsleyConfig = {
mysteryMethod: function(parsleyField) {
var $field = parsleyField.$element;
// Acessibility attributes based on error or not
if (parsleyField.validationResult.length > 0) {
$field.attr({'aria-describedby': parsleyId, 'aria-invalid': true});
} else {
$field.removeAttr('aria-describedby').attr({'aria-invalid': false});
}
...
}
Best is probably to listen to the events field:success and field:error or similar...
in all documentation and tutorials for HTTP request i found that recomanded usage is something like:
var ax = {
getCaseData: function() {
api.cases.getCase(caseManager.data.id).then(function(res){
// puting my response to $scope.something
$scope.something = res.data;
});
},
}
I really don't feel like senior so please tell me if I am wrong but I thing many times you don't need to store something like this on scope, for example you want to just resolve promise once and display data (you are not doing anything else with it)
So I was thinking if is there an option to make a promise as:
var ax = {
getCaseData: function() {
return api.cases.getCase(caseManager.data.id);
},
}
and after this call tempalte something like:
<li ng-repeat="ax.getCaseData()"></li>
This was handled automatically in old version of AngularJS (<1.2), but was removed since then.
Some posts state that the feature can be re-enabled manually by adding this line in your ".config" function :
$parseProvider.unwrapPromises(true);
But this is not advised as a solution. You are currently doing it the right way.
If you have plenty of cases like this, you can probably create your own "promises wrapper" function, and use it from your template.
See : https://stackoverflow.com/a/19472065/1636977
I have been through several tutorials and posts about this topic and still can't seem to figure out what is wrong with my code. To me it seems I am having scoping issues with the data within my service. My code is split up into separate files. Here is my code:
github link : https://github.com/StudentJoeyJMStudios/PetPinterest.git
//in dataService.js
var app = angular.module('se165PetPinterestWebApp');
app.service('SharedData', function ()
{
var categoryOfSelectedAnimals = [];
this.setCatOfSelAnimals = function(pulledCategoriesFromParse)
{
categoryOfSelectedAnimals = pulledCategoriesFromParse;
console.log('after assignment in set::' + categoryOfSelectedAnimals);
};
this.getCatOfSelAnimals = function()
{
console.log('in get::::' + categoryOfSelectedAnimals);
return categoryOfSelectedAnimals;
};
});
in my first controller to set the data in signup.js
app.controller('SignupCtrl',['$scope', 'SharedData', function ($scope, SharedData)
{
var Categories = Parse.Object.extend('Categories');
var query = new Parse.Query(Categories);
query.find({
success: function(results)
{
$scope.availableCategoriesOfAnimals = results;
SharedData.setCatOfSelAnimals(results);
},
error: function(error)
{
alert('Error: ' + error.code + ' ' + error.message);
}
});
};
}]);
Then in my other controller trying to get the data from the array within my service:
var app = angular.module('se165PetPinterestWebApp');
app.controller('CatSelCtrl', function ($scope, SharedData)
{
$scope.availableCategoriesOfAnimals = SharedData.getCatOfSelAnimals();
});
When I print the contents from the SharedData.getCatOfSelAnimals I get 0 every time. Please help. Thank you very much in advance.
EDIT: After playing around with a string a bit I am finding the changed string in the set function is not saved into the service and when I call my get function within my service the string is not changed from the set method. Please help, thank you in advance.
EDIT: So it looks like when I navigate to new page by using window.location.href = '../views/categorySelection.html'; in my signup.js it reloads my dataService.js which re-sets my variables back to nothing. Does anyone have any ideas as to how to fix this?
Edit
First: why you lose data
You need to setup routing properly. Right now you are not changing views but rather using window.location.href to load a new bootstrap file (dashboard.html), i.e. everything saved in memory will be lost. So you have been doing it right, sort of, but the moment you change to dashboard.html all data from Parse is lost.
You can solve this by configuring routes and use $location.url() to change URL. Read more about angular.route here: https://docs.angularjs.org/api/ngRoute/service/$route
The angular way
After looking at your code and running your app I think we need to take a step back. Angular is tricky to get used to but there is a lot of good tutorials. I think you might wanna read some of them to get a better grasp of how it works and how to setup and build your app.
Start here: http://www.airpair.com/angularjs
Boilerplate
Found this boilerplate for an Angular app using Parse. It might be something you could use. https://github.com/brandid/parse-angular-demo
Original
Or an even quicker way to empty $scope.availableCategoriesOfAnimals and then merge new data without breaking reference:
$scope.availableCategoriesOfAnimals.length = 0;
Array.prototype.push.apply($scope.availableCategoriesOfAnimals, pulledCategoriesFromParse);
You are breaking the reference on assignment. This is a JavaScript issue, not an angular one for that matter ;)
Try this in your set function:
categoryOfSelectedAnimals.length=0;
pulledCategoriesFromParse.forEach(function (e) {categoryOfSelectedAnimals.push(e)});
in stead of reassigning
edit: angular extend works on objects, not arrays, so replaced it with a bit of JS.
In Angular 1.2.0, there is this funny comment:
// IE stupidity! (IE doesn't have apply for some native functions)
It sits on line 9835 in the functionCall function:
functionCall: function(fn, contextGetter) {
var argsFn = [];
if (this.peekToken().text !== ')') {
do {
argsFn.push(this.expression());
} while (this.expect(','));
}
this.consume(')');
var parser = this;
return function(scope, locals) {
var args = [];
var context = contextGetter ? contextGetter(scope, locals) : scope;
for (var i = 0; i < argsFn.length; i++) {
args.push(argsFn[i](scope, locals));
}
var fnPtr = fn(scope, locals, context) || noop;
ensureSafeObject(context, parser.text);
ensureSafeObject(fnPtr, parser.text);
// IE stupidity! (IE doesn't have apply for some native functions)
var v = fnPtr.apply
? fnPtr.apply(context, args)
: fnPtr(args[0], args[1], args[2], args[3], args[4]);
return ensureSafeObject(v, parser.text);
};
},
I believe it is causing me pain, but no errors are thrown so I'm having a hard time seeing exactly what native function it might be trying (and failing) to call apply on. Ever since I implemented $q library to use promises to handle async REST calls, IE9 doesn't even make an attempt to call the services (according to the network tab in dev tools). Instead, the promise is immediately rejected. I tried googling for an answer, and looking at angular's docs on using IE, but I'm getting nowhere.
Has anyone had a similar issue with getting promises to work on IE9 using angular's "q-lite"? Does anyone know what this silly comment is referring to specifically?
I believe I figured it out through a ton of trial and error. It seems the issue, in my case, was that I was using the built-in q library for promises... specifically q.all([]):
$q.all([
firstRequest.$promise,
secondRequest.$promise,
thirdRequest.$promise,
moreRequets.$promise
]).then(function() {
//do stuff
});
While I still have not found out what specific operations the angular code refers to when it says some native functions, I found that the docs for function.apply() have the following caveat:
Note: Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array-like objects and will throw an exception.
Whatever the specifics, removing my reference to $q.all solved it for me. I hope this helps anyone who has this issue in the future. If someone happens to encounter another case where this IE behavior chokes up angular, perhaps they would be so kind as to comment below or add an answer.
FYI, I am currently at angular 1.2.14.
In Angular 1.2, ngRoute is a separate module so you can use other community routers like ui.router instead.
I'm writing an open-source module that aims to work for multiple different router implementations. So how can I check which router is loaded or exists?
I'm doing the following inside a factory in my module, but it does not work the way I expect it to:
if (angular.module("ngRoute"))
// Do ngRoute-specific stuff.
else if (angular.module("ui.router"))
// Do ui.router-specific stuff.
It raises an error for whichever module is not loaded. For example, if the app is using ui.router, then the following error is raised for the ngRoute check:
Uncaught Error: [$injector:nomod] Module 'ngRoute' is not available!
You either misspelled the module name or forgot to load it. If
registering a module ensure that you specify the dependencies as the
second argument.
I am not aware of a way of checking without an error being raised; however, notice that the issue is that it was an Uncaught Error, not that an error was thrown. The pattern for catching such an error is the following.
try { angular.module("ngRoute") } catch(err) { /* failed to require */ }
If an error is caught, you can try the other module, and if not, you can use the first.
If your behavior will be the same for each module, you could do something like the following, in which we define a function which will attempt the first of the listed module names, and if an error is thrown, try the next option.
var tryModules = function(names) {
// accepts a list of module names and
// attempts to load them, in order.
// if no options remain, throw an error.
if( names.length == 0 ) {
throw new Error("None of the modules could be loaded.");
}
// attempt to load the module into m
var m;
try {
m = angular.module(names[0])
} catch(err) {
m = null;
}
// if it could not be loaded, try the rest of
// the options. if it was, return it.
if( m == null ) return tryModules(names.slice(1));
else return m;
};
tryModules(["ngRoute", "ui.router"]);
I would test for the service instead of the module itself.
// In controller
if($injector.has('$route')){
}
if($injector.has('$state')){
}
// In angular config
if($injector.has('$routeProvider')){
}
if($injector.has('$stateProvider')){
}
The original answer is legit. However, as an alternative, I wrote this when I needed to "find or create" the modules. There's a number of use cases, but generally, it lets you not have to worry about file load order. You could either put this in a initialModules.js... or the top of all your individual service/directive files start with something like this. This little function works like a charm for me:
var initialModules = [
{name: 'app.directives', deps: ['ui.mask']},
{name: 'app.services'},
{name: 'app.templates'},
{name: 'app.controllers'}
];
initialModules.forEach(function(moduleDefinition) {
findOrCreateModule(moduleDefinition.name, moduleDefinition.deps);
});
function findOrCreateModule(moduleName, deps) {
deps = deps || [];
try {
angular.module(moduleName);
} catch (error) {
angular.module(moduleName, deps);
}
}
///// OR... in like "myDirective.js"
findOrCreateModule('app.directives').directive('myDirective', myDirectiveFunction);
If you decorate angular.module to store the names in an array then you could just check if the array contains your module name.
Decorate angular.module
See #dsfq's answer on SO.
This needs to happen after angular is loaded but before you start loading any angular modules.
Check for your module
if(angular.modules.indexOf("ngRoute") > -1) ...
The problem of automatically load or create a module could be better solved by something like gulp-angular-filesort, though.
It works really flawlessly.
From gulp-angular-filesort github page:
Automatically sort AngularJS app files depending on module definitions and usage
Used in conjunction with gulp-inject to inject your AngularJS application files (scripts) in a correct order, to get rid of all Uncaught Error: [$injector:modulerr].
Disclaimer: I'm not affiliated with gulp-angular-filesort, I only use it with a lot of profit.
A much better solution is to simply do your check when the module is created. You just need a utility function to add a callback.
//create a utility function to add a callback to object methods
//here we are making it a method of the underscore or lowdash object
//but it could be added to the angular global object or anything else
_.addCallBack = function (obj, originalMethodName, callBackMethod, context){
var fnOriginal = obj[originalMethodName],
outcome;
context = context || obj;
obj[originalMethodName] = function () {
var outcome = fnOriginal.apply(this, arguments);
callBackMethod.apply(this, arguments);
return outcome;
};
};
_.addCallBack(angular, "module", function(sModuleName, asDependencies){
if(_.contains(asDependencies, "ngRoute")){
//your logic here
//just loop through if you don't use underscore or lowdash
}
});
AngularJS 1.6.3 and up has a way to check if a module is loaded via the $injector service.
Also added in 1.6.7 was the ability to load new modules which may be of interest to some.