These are chat archives for angular/angular.js

25th
Nov 2016
Yash Gandhi
@Yash1965
Nov 25 2016 01:09
Hey Guys
Can anyone help me with the setup for react.js
Eugene Serkin
@jeserkin
Nov 25 2016 02:41
This is an Angular 1 room, you should look here for react room
Yash Gandhi
@Yash1965
Nov 25 2016 02:42
Is there any room like that
@jeserkin
Eugene Serkin
@jeserkin
Nov 25 2016 02:45
On the left side here second icon from the top and type in react
Marvin Heilemann
@muuvmuuv
Nov 25 2016 08:53

So I'm trying again. Can someone help me with this error: angular.js:10467 Error: Could not resolve 'sheetcreator' from state ''
I created a stack here: http://stackoverflow.com/questions/40772066/angularjs-ui-router-with-custom-states

I think I have a problem between url router and manually bootstrapping the app.

Frederik Prijck
@frederikprijck
Nov 25 2016 09:10
Anyone around here who uses gulp-angular-templatecache ?
Atul21
@Atul21
Nov 25 2016 09:12
Can anyone solve this problem?
George Kalpakas
@gkalpak
Nov 25 2016 09:16
@frederikprijck : I've used it in the past. Why?
Frederik Prijck
@frederikprijck
Nov 25 2016 09:17
@gkalpak So did I
but my resulting paths are failing in the current project
I have src/app/app.ts, src/app/app.html, src/index.ts and src/index.html (bootstrapping everything)
app.ts uses app/app.html as templateUrl
export const app = {
  templateUrl: 'app/app.html'
};
So I use:
function partials() {
  return gulp.src('src/app/**/*.html')
    .pipe(htmlmin())
    .pipe(angularTemplatecache('templateCacheHtml.ts', {
      module: conf.ngModule,
      transformUrl: function(url) {
          return url.replace('src\\app\\', 'app\\');
      }
    }))
    .pipe(insert.prepend(`import * as angular from 'angular';`))
    .pipe(gulp.dest('.tmp'));
}
it does not work without transformUrl ...
Which I never had to do before
and I always use the same project structure, only newer versions now.
I'm using 2.0 of templatecache tho.
So if I don't put the transformUrl, the output is:
function($templateCache) {$templateCache.put('src/app/app.html','Hello world.');}
which is incorrect ...
Using the transformUrl gives me:
function($templateCache) {$templateCache.put('app/app.html','Hello world.');}
Frederik Prijck
@frederikprijck
Nov 25 2016 09:28
Alright I figured it out while explaining it to u and removing irrelevant parts @gkalpak :P
I used to use src/app/**/*.html as the src, which has a different way to handle it then when using src\\app\\**\\*.html (there's a typo in the above partials function, I'm to late to edit now but the gulp.src path has to be: src\\app\\**\\*.html in order for that code to work.
Frederik Prijck
@frederikprijck
Nov 25 2016 09:33
So when using src\\app\\**\\*.html, the url used by the plugin contains the src/app prefix (so I have to drop src from the url using transformUrl). When using src/app/**/*.html it drops the src/app prefix (so I have to add app to the prefix using root).
Maybe you know why that's handled different by node @gkalpak ?
George Kalpakas
@gkalpak
Nov 25 2016 09:46
Speculating: gulp (via some dependency, maybe glob2base) is trying to infer the "base dir" by comparing the pattern (e.g. src/app/**/*.html) with a file's actual path (e.g. src/app/foo/foo.html) and looking for the first point where they diverge (e.g. ** vs foo right after src/app/). So, using a different path separator (i.e. / vs \\) can result in it incorrectly detecting a mismatch earlier in the path.
@frederikprijck : That is totally guesswork though, so don't take it for granted :)
Frederik Prijck
@frederikprijck
Nov 25 2016 09:49
Makes sense.
Anyway, thanks for the effort. I'm happy I've figured it out :D
Efharistó @gkalpak :D
milo_An
@Adser89
Nov 25 2016 09:51
hey guys i need your help in something ... im creating a form in where the user upload a file (txt in a specific content format that can be validated via regex) the content of the file will be added into the final json file ... i have problems with the setValidity option... there is way to do it angular way?
Frederik Prijck
@frederikprijck
Nov 25 2016 09:54
@Adser89 Are you using a custom validator to validate the file ?
milo_An
@Adser89
Nov 25 2016 09:55
yes ... i created a regexLineParser function ... however IDK if there is another way?
milo_An
@Adser89
Nov 25 2016 09:56
mostly of the internet examples create a directive to check or the extension or size but im quite new to angular so ..
Frederik Prijck
@frederikprijck
Nov 25 2016 09:56
Basicly what you want to get is a directive which you can reuse to validate ng-model like any built in validation
<input type='file' ng-model="myFile" required my-own-validator>
milo_An
@Adser89
Nov 25 2016 09:58
ok I will try it ...thanks
Marvin Heilemann
@muuvmuuv
Nov 25 2016 10:29
@frederikprijck could you help me with my problem too ? :worried:
Frederik Prijck
@frederikprijck
Nov 25 2016 10:36
@muuvmuuv I don't understand your problem sorry. You have an error which I can't seem to relate to the code you pasted
Chris
@chris-eaton
Nov 25 2016 10:46
Can anyone help me? Im using gulp tasks to do the following. Convert my AngularJS Typescript code into JS, then create a concatenated version. This works (in that I get a single js file which contains everything I need) but the problem seems to be that the resultant file is in the wrong order... Now ive updated my gulp.src code to include modules and services first, but there still seems to be problems, mostly because we have "classes" that we new. Those classes are actually in the file after they are used. How can I get around this problem?
dadepo
@dadepo
Nov 25 2016 10:48
I have a directive, which when used exposes certain operations. I am looking for the best way to now communicate the status of the operations to the outiside view, in which the directive is used. What is the best practice regarding doing this? Basically the best way to communicate something that occurs inside the controller of a directive to the outside world?
Chris
@chris-eaton
Nov 25 2016 10:49
@dadepo Use a callback, in fact if the component is used to render a view (as an element, for example) you may be better off using component instead
rolandhegedus
@rolandhegedus
Nov 25 2016 10:58

Hello guys, I am new to angular (to 1.5 exactly) usually I am using backbone. I would like to ask what is a good solution to make a model for appconfig which contains application states like sidebar open|close etc. and how can I watch those model changes. What is the best and most used solution for communicating between components (i am currently emitting events on $rootScope but it does not looks like a good habit)?

Regarding my question about appconfig is it a good way to set an object on $rootScope in the appController and using/modifing this $rootScope.model from the other components?

Chris
@chris-eaton
Nov 25 2016 11:07
@rolandhegedus Hey.. Its usually best to use a service to store that kind of state. You could then inject it into anything that needs it. I tend not to put much on the $rootScope try avoid it if possible. The only thing I will actually put on there is the currently logged in user model to make certain UI stuff easier (but I bet some people would be against that lol). Broadcasting events on rootScope has its place but should be reserved for site wide events such as "logged in" "logged out" etc. For all other comms it would be best to use a service or a directive/component with a callback
rolandhegedus
@rolandhegedus
Nov 25 2016 11:08
Thanks @Chris, yes that was my other idea to create and AppConfigService or sg like that
and injecting into the corresponding components which needs to be able to use those data
But as a service it should return with something so should it returns with the full "model" object or with the getter / setter methods?
I suppose the best way is the getter setters
Frederik Prijck
@frederikprijck
Nov 25 2016 11:10
@chris-eaton I avoid $rootScope at all cost.
Logged in user on $rootScope is as easy as putting it in a service.
Chris
@chris-eaton
Nov 25 2016 11:12
@frederikprijck I suppose your right :)
@rolandhegedus If you havent yet (and youre not using typescript) check out the John Papa style guide (for Angular 1)... Not only will it help you create consistent looking code itll help with the basics of service design etc
rolandhegedus
@rolandhegedus
Nov 25 2016 11:13
Thanks :+1:
Chris
@chris-eaton
Nov 25 2016 11:14
I tend to not use setter/getter methods unless I need to (i.e. the value needs to be altered in some way)... I'll just use a public property on a model. Firstly it stops you having to write unnecessary code and secondly it means you can easily bind to that property.
rolandhegedus
@rolandhegedus
Nov 25 2016 11:17
ok, thank you :)
George Kalpakas
@gkalpak
Nov 25 2016 11:20
It depends on the usecase. Getters/setters are more verbose but allow you to easily change the underlying value. Returning an object is easier, but makes it harder to replace the object instance altogether.
Chris
@chris-eaton
Nov 25 2016 11:22
True... I suppose my answer was clouded by the original question of creating a service solely to hold application state i.e. appConfig.showSidebar
Frederik Prijck
@frederikprijck
Nov 25 2016 11:31
@chris-eaton redux that shit all the way! :D
Chris
@chris-eaton
Nov 25 2016 12:15
@frederikprijck Tell me everything... Ive never used it? (And lol)
Frederik Prijck
@frederikprijck
Nov 25 2016 12:25
Why lol ?
Redux is for state management
So if you are talking about holding application state, redux is something that can help u.
milo_An
@Adser89
Nov 25 2016 13:07
Guys! thanks for the previous help ... @frederikprijck it wirks
Frederik Prijck
@frederikprijck
Nov 25 2016 13:08
So u used a directive @Adser89 ?
milo_An
@Adser89
Nov 25 2016 13:08
but now i have a new question.... the website is reading the file and showing the number of lines ... however is not being added into the array form
yes ... i used a directive and a regexparser ...
Frederik Prijck
@frederikprijck
Nov 25 2016 13:09
it's not being added to the array form ?
can you elaborate on that ?
milo_An
@Adser89
Nov 25 2016 13:09
i mean as i have a multiform ... the first part is basic information {"name":"fdvsfv","description":"fvdfvdf"}
now i added a file.... the file is read and must add to the form {data: "..." , Lines: "..."}
Frederik Prijck
@frederikprijck
Nov 25 2016 13:12
Do you have some code to show the problem ?
Maybe a plunkr ?
milo_An
@Adser89
Nov 25 2016 13:13
i will try to made it. Give me a moment :)
milo_An
@Adser89
Nov 25 2016 13:19
i've found a nice example
i want this ... but with the files that the user add.
the files uploaded by the user (bad grammar, sorry)
the difference is that i have a button that includes a sample file.
like a tutorial data set... Im really new in angular so I have more questions that answers right now
Frederik Prijck
@frederikprijck
Nov 25 2016 13:22
No clue what you want.
Make a plunkr instead of sending me something that has nothing to do with a file.
milo_An
@Adser89
Nov 25 2016 13:28
i will.
VaseemMalik
@VaseemMalik
Nov 25 2016 13:43
Any one tried this "npm install crypto-js" ????
https://www.npmjs.com/package/crypto-js
Marvin Heilemann
@muuvmuuv
Nov 25 2016 13:47
yes
VaseemMalik
@VaseemMalik
Nov 25 2016 13:47
is it open source? or free
Marvin Heilemann
@muuvmuuv
Nov 25 2016 13:48
All npm is open source
VaseemMalik
@VaseemMalik
Nov 25 2016 13:48
thanks @muuvmuuv
i'm new to angular :D
so i will try to install this crypto js and will use for encrypt and decrypt
if possible can you please let me know how can we use this crypto js
VaseemMalik
@VaseemMalik
Nov 25 2016 13:54
how to use cookies in angular2
Marvin Heilemann
@muuvmuuv
Nov 25 2016 13:55
@frederikprijck Okay I'll try to explain it better: I have an application that should set new states by pulling the pages from the database. The pages will responsed from my serivce AdminService.GetPages().then(function (pages) {}); inside Im looping the pages and creatin a state object where I store the state provider related config. At the end, the obj will be added as a new state $stateProviderRef.state(page.name, stateObj);. To do that I created a referred object in the config, the $stateProviderRef. In the config I also added the line $urlRouterProvider.deferIntercept();, so the url router provider will wait until I say $urlRouter.sync() and the sync is happening after the pages are looped into the state. For me all looks fine. All states are set and I sync the provider after. But after I started the application and clicking on a shref-link it gave me that error angular.js:10467 Error: Could not resolve 'permissions' from state ''.
@VaseemMalik you should google for tuts or examples like that one: http://jasonwatmore.com/post/2015/03/10/angularjs-user-registration-and-login-example-tutorial
Frederik Prijck
@frederikprijck
Nov 25 2016 13:57
@VaseemMalik Open the cupboard, take a cookie and eat it.
Next thing you can do then is go to the angular 2 room and ask it there!
Marvin Heilemann
@muuvmuuv
Nov 25 2016 16:43
@VaseemMalik Okay I found something out by try and error. the url router provider write my states and they are accessible, but in the view when I loop through my pages and write in the shref the page url it give me the above written error after I click on item. Is this an bug ?
Sid
@siddharth-pandey
Nov 25 2016 16:51
Hi all, what are the possible options to share mocks between different tests? I'm thinking to create angular module just for defining mocked data and to reuse in my tests just like any module and service. Any comments on this approach?
Maciej Bodek
@insmac
Nov 25 2016 16:56
@siddharth-pandey I use a mock service in a separated module as well, injected with beforeEach to have consistency in input data between tests.
Sid
@siddharth-pandey
Nov 25 2016 16:58
@insmac ok great! did you find any downsides of using this approach? I've quite a few tests now and there are some mocks that can be reused by reusing a service from this mock module. I'm not able to find any posts online discussing this approach so, I was just wondering whether this is the correct approach or not!
Maciej Bodek
@insmac
Nov 25 2016 17:05
@siddharth-pandey no, it works well even in complex apps so far. I usually encapsulate each component I want to be testable into a separated module so that I don't need to inject the main app module and keep it sandboxed. Same for mock services.
Sid
@siddharth-pandey
Nov 25 2016 17:09
@insmac ok, do you override your actual service by a mocked service OR write just another service with few methods that returns mocked objects? I just found this gist: https://gist.github.com/alicial/7681791, where actual service is mocked and loaded later in test which overrides the actual service including all the methods.
Marvin Heilemann
@muuvmuuv
Nov 25 2016 18:35
@frederikprijck Hey I know think I found the error. Im using the MEAN Stack and have a express routing before my app (for login etc). So express is causing the error, but I do not why. I'm new to express and do not understand where the error comes from. Here is the app controller that routes to the app. http://hastebin.com/satazefuqo.php