These are chat archives for angular/angular.js

11th
Jan 2017
Chris
@stationtech
Jan 11 2017 00:03
Hhh
Hi!* does anyone have any good examples I could look at for using angular for relating objects in different collections (mongodb)
Matt Erman
@CodeLiftSleep
Jan 11 2017 00:08
I am using it with sqlite
put it in a service
Chris
@stationtech
Jan 11 2017 00:09
Awesome - ill check it out, thanks for the tip
Do you or anyone else know any that are being used with Mongo incase SQLite doesn't fit the bill?
Matt Erman
@CodeLiftSleep
Jan 11 2017 00:13
it appears to be similar...you are storing it in an array....we use it with SQL Server at work all the time...its just working iwth arrays and collections, nothing special
Krista Prenesti
@kprenesti
Jan 11 2017 00:58
Hi all. I am trying to build out a practice site to learn authentication and authorization with Angular. I have a Node backend that utilizes the Sequelize ORM for SQLite. Note: I am not using Passport (that would be too "magic" for me just yet.)
How would I got about dealing with JWTs in Angular?
In particular, how do I append the token to the headers on routes that need to be authorized, but don't necessarily have an http request behind it.
I'm using UI Router
James Salamon
@lorezzed
Jan 11 2017 05:36
has anyone got a solution to type bindings between the component and controller?
Jeeten P@tel
@jeeteshnariya
Jan 11 2017 05:50
Hey ! hi i am starting developing angular 2 web app! and i want to create it SEO friendly ,so how to it work with google crawl engine and some one help me ajax or dom based app how to deal with search engine .!
Frederik Prijck
@frederikprijck
Jan 11 2017 07:05

@kprenesti

In particular, how do I append the token to the headers on routes that need to be authorized, but don't necessarily have an http request behind it.

You can either append the token to every request using an http interceptor, or add it manually to each http request by setting the headers object in the config: https://docs.angularjs.org/api/ng/service/$http#usage
Frederik Prijck
@frederikprijck
Jan 11 2017 07:27
@lorezzed What is it exactly that you are looking for ?
James Salamon
@lorezzed
Jan 11 2017 08:53
@frederikprijck I'm getting help on the typescript channel thanks https://gitter.im/Microsoft/TypeScript
Alex
@atodicebear
Jan 11 2017 09:11
Has someone an Example for custome Filter for Filtering Table with a searchString? :)
Alex
@atodicebear
Jan 11 2017 09:32

Ive found some with indexOf but thats for simple Arrays/Strings?
I need something for Deep Nested Objects in Collection

  .filter('filterTitel', () => {
      return (items, str) => {
        let filtered = [];
        if(!str){
          return items;
        }
        angular.forEach(items, (item) => {
                if(item.indexOf(str) !== -1){
                    filtered.push(item);
                }
            });
            return filtered;
      };
    });

indexOf is not Function it states.
The Titel is Deep in the Collection

[{"_id":34,"categorie_id":6,
 "dict_Langs":[{"_id":73,"
  HtmlLang":{"titel":"TestTitel","text":"<p>TestText1</p>"}}],}},

So I wouldve kinda to

 if(item.dict_Langs[0].HtmlLang.titel.indexOf(str) !== -1) // better approach?
romie
@theromie
Jan 11 2017 11:43
is there any way to upgrade 1.x to 2 in angular?
Benedikt Berger
@bergben
Jan 11 2017 11:44
ngUpgrade
@theromie
romie
@theromie
Jan 11 2017 11:44
thanks man @bergben
Benedikt Berger
@bergben
Jan 11 2017 11:45
it seems like quite some work though :worried:
Luke Bond
@superkaleider
Jan 11 2017 13:00
hey @atodicebear you need to be iterating a bit deeper
 angular.forEach(items, (item) => {
      angular.forEach(item.dict_Langs, (i) => {
        if (i.HtmlLang.titel.indexOf(str) !== -1) {
          $scope.filtered.push(item);
        }
      }) 
    });
that should work
Luke Bond
@superkaleider
Jan 11 2017 13:06
also...i'm sure i'm just being a dumbass here but..is there a better way of doing this to get a dynamic scope variable
if (e.length === 1) {
                  $scope[e[0]] = "foo";
                } else if (e.length === 2) {
                  $scope[e[0]][e[1]] = "bar"
                } else if (e.length === 3) {
                  $scope[e[0]][e[1]][e[2]] = "foobar"
                }
Alex
@atodicebear
Jan 11 2017 13:14
@superkaleider
Great thanks that was more Simple as I thought..
Modified it with .toLowerCase()
angular.forEach(items, (item) => {
          angular.forEach(item.dict_Langs, (i) => {
            if (i.HtmlLang.titel.toLowerCase().indexOf(str.toLowerCase()) !== -1) {
              filtered.push(item);
            }
          })
        });
Luke Bond
@superkaleider
Jan 11 2017 13:32
no worries dude. :smile:
Frederik Prijck
@frederikprijck
Jan 11 2017 13:42

@atodicebear and @superkaleider , just my 2 cents. But if you use ES6 Array Polyfills, you can write this:

 angular.forEach(items, (item) => {
      angular.forEach(item.dict_Langs, (i) => {
        if (i.HtmlLang.titel.indexOf(str) !== -1) {
          $scope.filtered.push(item);
        }
      }) 
    });

as:

items
  .filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.indexOf(str) !== -1))
  .forEach(item => $scope.filtered.push(item));
However this is not 100% identical, but the first sample might add the same item multiple times if there are 2 i elements which evaluate i.HtmlLang.titel.indexOf(str) !== -1 to true. The snippet using the ES6 array methods doesn't do that.
Luke Bond
@superkaleider
Jan 11 2017 13:49
looks awesome dude.
never used the .some before...
Alex
@atodicebear
Jan 11 2017 13:50
@frederikprijck
Wow so much more to learn and improve.. :D
So ur Solution is "better" ?
Frederik Prijck
@frederikprijck
Jan 11 2017 13:50
Well unless you have the need for adding an item mutiple times, I'd say mine is "better". But apart from the little issue, your solution aint bad.
Alex
@atodicebear
Jan 11 2017 13:59

@frederikprijck One Question Ive got for the Chain of Work?

1. items.filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.indexOf(str) !== -1))
items are all my Objects.
.filter(), iterates all over them, with item as alias for each Object.
.some(), returns truthy if the i => i.HtmlLang.titel.indexOf(str) !== -1) is true
And now?
2.  .forEach(item => $scope.filtered.push(item)); //when is this called?

It irritates me cause of the .forEach() ?
If some() is true could I not go straight item => $scope.filtered.push(item)?

Daniel Neves
@ghuroo
Jan 11 2017 14:25
@stefdelec I recommend you to use a nice CMS with a nice ORM and then use Angular to access the CMS API endpoints.. advantages: all the good things from a CMS (auto generated crud backoffice with models, uploads, lists with search/filters etc. etc., all out of the box.. plus scalability (if you're using a nice CMS that enables you to extend it and to create your own Field Types, hooks, etc.)). All of this plus a nice SPA gives you a nice user experience and complete separation of backend and frontend.
stefdelec
@stefdelec
Jan 11 2017 14:32
@ghuroo Thanks ! So Wordpress or Keystone ? Any special crm you are thinking about N?
Frederik Prijck
@frederikprijck
Jan 11 2017 14:32
@stefdelec Wordpress is better, imho. Or Drupal.
Keystone might work, depending on ur needs.
Daniel Neves
@ghuroo
Jan 11 2017 14:34
@stefdelec I've been using Keystone A LOT, it's still new but you can already do A LOT with it. still not as powerful as Wordpress. but we all know how Wordpress is, in a developer's point-of-view :p in the end of the day, they all might suit, depending on your needs and personal experience
Luke Bond
@superkaleider
Jan 11 2017 14:34
wordpress has a decent REST api too now
Frederik Prijck
@frederikprijck
Jan 11 2017 14:34
@ghuroo Wordpress has pretty awesome dev experience. It just depends how you're doing it . Back when I used keystone it wasn't good enough to use yet, I'm pretty sure that has changed tho.
http://v2.wp-api.org/ for WP Rest api
But let's stick to Angular here :D

@atodicebear So the filter wil return a new array, containing only the items for which callback resolve to true .So we get an array with all the items you want to add to ur scope array. So we can use foreach over that array. You can check it all at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Maybe this is a bit clearer:

// Only get the items that match the language
// This wil filter the items array by applying the callback to it and only add items to the filteredItems array when it returns truthy.
// So in thise case it will return an array containing all the items which have at least 1 entry in dict_Langs which have i.HtmlLang.titel.indexOf(str) !== -1)
var filteredItems = items
  .filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.indexOf(str) !== -1));

filteredItems
  .forEach(item => $scope.filtered.push(item));

I just did this in one step:

// Only get the items that match the language
items
  .filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.indexOf(str) !== -1))
  .forEach(item => $scope.filtered.push(item));
Daniel Neves
@ghuroo
Jan 11 2017 14:38
@frederikprijck yeah, you can even integrate GraphQL with Wordpress. regarding WP, I need to dig more into it. /end of offtopic for me :) https://medium.com/front-end-developers/wordpress-with-node-react-and-graphql-part-1-introduction-ee0fc491730e#.8dre165v0
Alex
@atodicebear
Jan 11 2017 14:51

@frederikprijck Ah ok now a bit more Clearer. But that means I can cut it more like this

from
    .filter('filterTitel', () => {
      return (items, str) => {
        let filtered = [];
        if(!str){
          return items;
        }
        return items.filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.toLowerCase().indexOf(str.toLowerCase()) !== -1))
        .forEach(item => filtered.push(item)); 
        return filtered;
      }
    })
to   
 .filter('filterTitel', () => {
      return (items, str) => {
        if(!str){
          return items;
        }
        return items.filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.toLowerCase().indexOf(str.toLowerCase()) !== -1))
      }
    })

Seems to work
Thx :)

Frederik Prijck
@frederikprijck
Jan 11 2017 14:52
@atodicebear you can also do this:
 .filter('filterTitel', () =>  (items, str) => !str ? items :  items.filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.toLowerCase().indexOf(str.toLowerCase()) !== -1)))
it has to stay readable tho... :D
Alex
@atodicebear
Jan 11 2017 14:54
Oh yes with Tenerary Operater more shorter :D
Thx
Frederik Prijck
@frederikprijck
Jan 11 2017 14:54
But I wouldn't do that. I'd go for:
 .filter('filterTitel', () => {
      return (items, str) => !str ? 
             items : 
             items.filter(item => item.dict_Langs.some(i => i.HtmlLang.titel.toLowerCase().indexOf(str.toLowerCase()) !== -1))
    })
Alex
@atodicebear
Jan 11 2017 14:56
You are a Beast!! :clap: :+1:
Frederik Prijck
@frederikprijck
Jan 11 2017 14:57
But, I'm not saying the latter is better @atodicebear . It's personal flavor imo.
Nothing wrong with your snippet :) It looks neat enough if you ask me.
Alex
@atodicebear
Jan 11 2017 14:59
Someone somewhere told me Ternary "works" faster but I think its nowadays only for "style" purposes?
Frederik Prijck
@frederikprijck
Jan 11 2017 15:06
Alex
@atodicebear
Jan 11 2017 15:13
Oh ok maybe still worth to use it :D thx :)
Daniel Neves
@ghuroo
Jan 11 2017 15:16
still worth for cleaner code for sure :D
vsharma2266
@vsharma2266
Jan 11 2017 16:14
Hi, all. I am trying to achieve a JSON response from a POST call in my angular app. I want to mock the API for e2e testing. Do we have any package which can mock the response with data for a POST call ?
Frederik Prijck
@frederikprijck
Jan 11 2017 16:47
Yerrapotu Manojkiran
@nani554
Jan 11 2017 17:58
Hi guys iam manoj
i've just started learning angularjs
George Kalpakas
@gkalpak
Jan 11 2017 18:01
Hey, @nani554!
Have fun!
Frederik Prijck
@frederikprijck
Jan 11 2017 18:01
AngularJS is fun @nani554 !
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:03
thank you ,im having a problem learning view,scope and controller ,iam not getting output @frederikprijck @gkalpak
Frederik Prijck
@frederikprijck
Jan 11 2017 18:07
@nani554 I think you miss some basic concepts of angular, looking at the codepen.
You need to have an angular module, and attach the controller to that module before being able to use it.
Have you done the tutorial ? https://docs.angularjs.org/tutorial/step_00
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:10
no
iam learning from this video
i will do learn from the main source but i just want to know the full picture of angular js
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:17
but @frederikprijck i have used ng-app
Frederik Prijck
@frederikprijck
Jan 11 2017 18:17
@nani554 you need something like this:
<html ng-app="app">
<head>
</head>

<body>
   <div ng-controller="simpleController">
       <input ng-model="name">
     <ul>
       <li ng-repeat="part in campus">{{part.name}}-{{part.dept}}</li>
     </ul>
  </div>
  <script>
    angular.module('app', [])
      .controller('simpleController', function($scope) {
      $scope.name = '';
      $scope.campus = [
        {name:"jntu",dept:"electronics"},
        {name:'ou',dept:'computers'}
      ];
    });

  </script>

  </body>
</html>
But you also need angularjs script file.
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:20
thank you @frederikprijck
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:34
@frederikprijck by the by y did you add one more angular js script tag
Frederik Prijck
@frederikprijck
Jan 11 2017 18:34
Is that sentence supposed to ask me why I added an angularjs script tag ? Or are you simply confirming I did ?
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:35
yeah ,bcoz i have already added angular js script tag
no iam asking you
Frederik Prijck
@frederikprijck
Jan 11 2017 18:35
Where ?
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:35
in head
Frederik Prijck
@frederikprijck
Jan 11 2017 18:35
I mean, where did you already add it ?
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:36
i codepan (setting >there is a option for adding external script tag )there i have added
Frederik Prijck
@frederikprijck
Jan 11 2017 18:38
If you use the settings to load scripts, you gotta add the JavaScript in the JavaScript box.
Not in the HTML one .
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:41
hey got it after adding 'app' value to ng-app attribute