Darryn Smith | 4 Apr 16:09 2015
Picon

add angular ionic views and routes after app has initialized

I'm slightly new to Angular JS. I'm using it with Ionic and Phonegap to create a mobile application. This application has views injected into the application by a web server.

I would therefore need to inject the ionic html markup views and compile them with Angular somehow, as well as link these newly added views to the routes definition. This is what I've done so far [inside app.config] :

app.stateProvider = $stateProvider;

and then [inside app.run] :

app.stateProvider.state('side-menu8', { url: '/menu2', templateUrl: 'side-menu8.html' }); $state.go('side-menu8');

The side-menu8.html template script markup is inserted into the index.html page. I did this to test if the state registers outside the config process. The application currently does register the additional state and re-directs to the template successfully. My question is, how would i go about adding a dynamic service that would fetch the views and data, inject it into the index.html view and register the additional states?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
macha devendher | 4 Apr 13:35 2015
Picon

how binding the data to custom child directives which are exist in the parent derictives


this is my code
but it shows output for only parent directive
how can i bind the data to child directive

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dialog box creating </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>
  <body>
  <div ng-app="Myapp">
<parent-directive>
   <child-directive>
   </child-directive>
</parent-directive>
</div>
<script type="text/javascript">
  var app=angular.module("Myapp",[]);
app.directive("parentDirective",function(){
return {
  restrict:"E",
template:"<p>Hello this is parent directive</p>",

};
  
});
app.directive("childDirective",function(){
return{
  restrict:"E",
template:"<p>Hello this is child directive</p>",
};
  
});
</script>

</body>
</html>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Hürkan AKBIYIK | 4 Apr 10:14 2015
Picon

datetime-local How to change NO locale datetime

When i insert datetime result look like = Fri Oct 20 2000 20:20:00 GMT+0300 (Turkey Daylight Time)

I want to change this to no locale like Fri Oct 20 2000 20:20:00 GMT+0000 (UTC) because of when i post this value to my php then send to mysql result look like = 2000-10-20T17:20:00.000Z

How can i change this or how i can use datetime without locale ?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Akinsanya Olanrewaju | 4 Apr 00:14 2015
Picon

How do I use angular ng-hide based on the page/route that I am currently on

Hi,

Am developing an app the have three section
1. Home page that have Header, Slider and footer
2. User Section that have header base on login users
3. Admin section that have header related to admin only

using ui-router how can i get the page to render different header and content base on the current page i.e Home page will display Header, Slider and footer.

i have tried to find logic to help switch the layout, Pls help me

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
a_gaur | 3 Apr 18:15 2015
Picon

What is the difference between Factories and Service from functionality point of view ? When to use one over other.

I have been really confused when to use factories or services, this SO question gives a great insight over the difference but I still don't understand over their usage. One of the answers gives a very good conclusion of deciding what to use when :

In conclusion,

--------------------------------------------------- | Type | Singleton| Instantiable | Configurable| --------------------------------------------------- | Service | Yes | No | No | --------------------------------------------------- | Factory | Yes | Yes | No | --------------------------------------------------- | Provider| Yes | Yes | Yes | ---------------------------------------------------
  1. Use Service when you need just a simple object such as a Hash, for example {foo;1, bar:2} It’s easy to code, but you cannot instantiate it.

  2. Use Factory when you need to instantiate an object, i.e new Customer(), new Comment(), etc.

  3. Use Provider when you need to configure it. i.e. test url, QA url, production url.


However what was the initial purpose of introducing services, I saw the angular code and it seems both of them are same. In fact one is created from another doing some debugging I found out that services are created from factories and factories are created from providers. We just default some values as go down the chain for instance in service you only can create an object while in a factory you can create a hash, a value or an object but the configuration is default and lastly in provider you can also pass the configuration block.
Then what led to creation of services and factories when providers can do everything and even more w.r.t. the two ?   

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Mohan Radhakrishnan | 3 Apr 12:36 2015
Picon

Bootstrapping module hierarchies

Hi,

I was atttempting to bootstrap module hierarchies based on the URI.

bootstrap.js

if ( document.documentURI === 'uri1') {
angular.bootstrap(document, ['lob1']);
}else{
angular.bootstrap(document, ['lob2']);
}

This is what I tried. Can I do this ? I will load 'lob1' or lob2' based on a condition. If my app.js is not correct then I want to restructure it. How ?
Moreover these two modules should only be associated like this.lob1 - > 'module1/moduleLoader1' (Load only when lob1 is bootstrapped )
lob2 ->  'module2/moduleLoader2' (Load only when lob2 is bootstrapped )

app.js

define([
    'framework-library',  
    'module1/moduleLoader1',
    'module2/moduleLoader2',
], function(jquery, angular) {
    'use strict';
    return angular.module('lob1', [
        'ui.router',
        'app.module1'
    ]);
},function(jquery, jm, angular) {
        'use strict';
        return angular.module('lob2', [
            'ui.router',
            'app.module2'
        ]);
    }
);

Thanks,
Mohan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
KJ | 3 Apr 12:17 2015
Picon

How to handle response & error in Angular JS service with typescript

I am using angular js to call my wcf service that returns some data. Now if my wcf service throws exception I want to handle that accordingly. My flow of call in angular is like this: My page controller calls the angular service which calls my wcf service using $http. My Controller:

setProfileStatus: (status: boolean) => { angularService.setProfileStatus(status).then( response => { //my response is always undefined. console.log(response.data); }) .catch(err => { //show error }); }

In my above controller when I call my service my response is always undefined. Here is my service:

public setProfileStatus(status: boolean): ng.IPromise<any> { var url = this._endpoints.myEndpoint + '?status=' + status; return this._http.put<string>(url, '').then(response => { //response here is fine, I can get data also and any error but I want to pass this to my controller }); }

In my above service call I can get the response fine, with any data that was returned from my wcf service. So how to pass this to my controller so that same response I can see in my controller.

Thanks

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Cornelius Kölbel | 3 Apr 09:20 2015
Picon

problems with dependency injection

Hi,

my application uses the IdleProvider to logout the user.

At the moment it is setup like this:

myApp.config(['KeepaliveProvider', 'IdleProvider', function (KeepaliveProvider, IdleProvider) { // Logout configuration IdleProvider.idle(20); IdleProvider.timeout(10); KeepaliveProvider.interval(3); }]);

Now I would like to change the idle value (20) from within a controller.

THe controller looks like this:

myApp.controller("mainController", function ($scope, $http, $location, authUrl, AuthFactory, $rootScope, Idle, $state, ConfigFactory) {
But when I just add the IdleProvider to the functions parameters, I get a problem with the dependency injection.
Unknown prodiver: IdleProviderProvider <- IdleProvider <- mainController

myApp.controller("mainController", ["IdleProvider", "Idle", function ($scope, $http, $location, authUrl, AuthFactory, $rootScope, IdleProvider, Idle, $state, ConfigFactory) {
It turns out, that doing a
myApp.controller("mainController", ["IdleProvider", function ($scope, $http, $location, authUrl, AuthFactory, $rootScope, IdleProvider, Idle, $state, ConfigFactory) { works out for the IdleProvider but lets me fail with calls like

$rootScope.$on

Any light shed on this would be highly appreciated.

Kind regards
Cornelius
-- Cornelius Kölbel cornelius.koelbel <at> netknights.it +49 151 2960 1417 NetKnights GmbH http://www.netknights.it Landgraf-Karl-Str. 19, 34131 Kassel, Germany Tel: +49 561 3166797, Fax: +49 561 3166798 Amtsgericht Kassel, HRB 16405 Geschäftsführer: Cornelius Kölbel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

David Lesage | 3 Apr 02:06 2015
Picon

Angular 2.0 Dependency Injection between Services

I was wondering if anyone knew of an example where an Angular 2.0 service is injected into another service, where by service I mean an exported class which is not a <at> Component, and as a result, does not have access to the <at> Component({services[SomeClass]}) provider information (as far as I can figure out -- I tried a few combinations of adding items like <at> Component to the class, but never found a combination that worked).

Right now, the error I receive is as follows: 
No provider for DispatcherService! (TodosComponent -> TodoStore -> DispatcherService)

My structural setup is:
  1. app.js gets TodosComponent from <at> Templates({directives[TodosComponent]})
  2. TodosComponent gets TodoStore from <at> Component({services:[TodoStore]}) and constructor(store: TodoStore)
  3. TodoStore does not get DispatcherService from import {DispatcherService} and constructor(dispatcher: DispatcherService) - the error above is thrown

Everything is functional when I remove "dispatcher: DispatcherService" from the constructor definition of TodoStore. I can even initialize a new DispatcherService() from inside the TodoService constructor, but that sort of defeats the purpose of sharing a single instance of the dispatcher. :) I can also "cheat" by injecting DispatcherService with a different class (such as TodoStore), but this feels incorrect to me since my TodosComponent technically isn't utilizing the DispatcherService yet. 

Any direction would be greatly appreciated! Especially since I know the spec is constantly fluctuating. I am using the version of Angular 2.0 from the Angular quickstart code, and I can post my full code, if necessary.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Henrik Bechmann | 3 Apr 01:51 2015
Picon

elements[0] on populated HTMLCollection returning undefined. This is a showstopper


HTMLCollection access seems to be broken in angular environment for some reason, resulting in my being unable to traverse a nested set of elements.

With the the following code:

        var elements = tElement[0].getElementsByTagName('mw-template');
        console
.log(elements);
        console
.log(elements instanceof HTMLCollection);
        console
.log(elements.item(0));
        console
.log(elements[0]);


I get the following results:

[item: function, namedItem: function]
0: mw-template.ng-scope
1: mw-template.ng-scope
2: mw-template.ng-scope
3: mw-template.ng-scope
4: mw-template.ng-scopelength:
5__proto__: HTMLCollection


directives
.js:137 true
directives
.js:138 null
directives
.js:139 undefined

In other words it appears to be a valid HTMLCollection, but I am unable to access it. I've searched through google, and found a couple of similar complaints, but no answers.

I've tried countless other approaches around trying to cast the items as an array (though I actually want the live versions), and using both jqLite and jQuery to cast the items at various steps into jQuery collections. Also taking direct Nothing seems to work. 

Note that the collection id deeply nested:

this code:

        console.log(tElement[0].children[0].children);
        console
.log(tElement[0].children[0].children[0]);


gives this result

[item: function, namedItem: function]
0: mw-block-toolbar.ng-scope
1: mw-template.ng-scope
2: mw-template.ng-scope
3: mw-template.ng-scope
4: mw-template.ng-scope
5: mw-template.ng-scopelength:
6__proto__: HTMLCollection



undefined




Anyone have any ideas?

This is a showstopper.


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Carol C | 3 Apr 00:40 2015
Picon

(Unit testing) How to create a mock for a document object?

Hi, I am relatively new to Angular and unit testing. I have a working service that makes a HTTP get request and then does post processing through a series of functions. I'm not sure about how I would create a mock for a document object. Also I'm storing some of the interim data in a JS object where one of the values is a node list and am not sure how to make a mock for that. (I'm using Jasmine) Thank you.

This is an excerpt from the service:

return {
getQuestionsArray: function() {
$http.get(interviewUrl , {responseType: 'document'})
.success(function(data, status, headers) {
var categoriesAr = getCategories(data); //? how to mock data
        var questionsAr = getAllQuestions(data);
        var questionsObj = buildObj(categoriesAr, questionsAr);
        var fixedQuestionsObj = fixQuestionsObj(questionsObj); 
        var questionsObj2 = getCodingQuestionsPt1(data, fixedQuestionsObj);
        var questionsObj3 = getCodingQuestionsPt2(data, questionsObj2);
        deferred.resolve(questionsObj3);
})
...

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Gmane