I'm really new in VueJS,
I use RxJS, Vue rx and Vue Resource in a mixin so i can make http calls and get observables back anywhere... awesome!
now i tried
subscriptions () {
return {
titles$: this.getHTTPObservable('https://jsonplaceholder.typicode.com/albums').flatMap(arr => Rx.Observable.from(arr).take(10).map(o => o.title).toArray())
}
The only thing i need now is to specify the end point of the server i am requesting in some configuration file like i would do in angular environments file. When launching the build by hand it should look like when i write
ng serve --env=dev
is there something similar?
Actually i found the answer on this page https://vuejs-templates.github.io/webpack/env.html
so, i can add any configuration variable and then call process.env.varname to get it back,
thanks
Vue.js normally works in conjunction with Webpack to achieve this.
https://v2.vuejs.org/v2/guide/deployment.html#With-Build-Tools
The DefinePlugin from Webpack is used for this. Outside of Webpack I think you are still able to use this:
https://www.npmjs.com/package/cross-env
Related
I have a rather simple Angular App for a product cataloque, pulling one big JSON file from a CMS. The JSON holds info needed in several parts of the app (menu, pagination, product list, product details), so several controllers need access to it.
They way I did it is to define
$rootScope.$on('$stateChangeStart',
function(evt, toState, toParams, fromState, fromParams){
loader.getData(toParams);
});
in app.run();. The loader factory then $broadcasts the data to all the controllers. This works fine, but the application "blinks" on every state change, since UI-Router starts the controller / loads the template without data while waiting for the async data.
I guess the correct way of doing this is to use resolve in $stateProvider.state() but I can't figure out how to $inject my loader into config or make my data availabe to all the other controllers.
Is there a way to make resolve wait for a broadcast? Or is there another approach?
This is my first angular project so please excuse if this is easy / obvious or stupid.
Thanks!
For anyone running into the same problem: Dependencies don't need to be injected into config, they go into resolve, which takes everything. So my code looks like this now:
`.state('produkte.list',{
url:':main/:sub/?p=:page&o=:order&f=:filter&b=:brand',
resolve : {
data:['$stateParams','loader',function($stateParams,loader) {
return loader.getData($stateParams);
}]
},
[...]`
The loader still broadcasts it's results to any controller interested so it's all good (meaning, it works)
I have seen this "destructing" syntax before but haven't ever used it. until now anyways. I want to pull in a react-router repo on github to handle my applications routing (making a single page app). but I noticed that it has this syntax
var { Route, RouteHandler, Link } = Router;
which is just a fancy way of writing
var Route = Router.Route
var RouteHandler = Router.RouteHandler
var Link = Router.Link
so my question is does anyone know if gulp will have any issues compiling this from jsx to javascript?
Do I need to install any additional dependencies for this syntax?
I have done some research but couldn't find anything conclusive. Thanks
The default gulp, yes. JSX syntax needs to be transpiled down to native js. Take a look at gulp-react to see how you can deal with this. Basically , it works in similar concept to other transpiled code (ie. coffeescript). Convert to native before piping along to the next task.
Edit
after seeing you're edit, it looks like you also need to convert the ES6. Take a look at the react browserify, it should help to get you going. Basically the concept is the same, compile jsx/es6 to native js. There's a section specific to the ES6 react components.
2nd Edit
Looks like gulp-react has an option to set to ES6. I think if you add this line, it will work.
.pipe(react({harmony: true}))
//full example
gulp.task('default', function () {
return gulp.src('template.jsx')
.pipe(react({harmony: true))
.pipe(gulp.dest('dist'));
});
I need to check if the user is logged in prior to rendering the route's import - so async. I know flatiron-director supports this but how would it be achieved with app-router (https://github.com/erikringsmuth/app-router)?
Look at this issue, it might be helpful
I'm After several days learning angularJS through converting my standart JS app to a ng one.
I was wondering about this simple scenario:
I have a global function called fb_connect(),
it can be used from any page (or any controller if you like) to make a facebook-based login.
This function makes a simple http call and receives a JSON object contain data to move on (display a pop up, login, etc...)
I read that I can define a Factory or a Service for my app and use it in any controller, which works fine.
So, I created a fb_connect factory function.
The problem is that now, in every page (every controller), I have to define that fb_connect in the constructor of every controller - for example :
function welcome($scope,fb_connect){});
What is the proper way to do this kind of actions using Angular without having to define these functions each and every time in every controller?
Thanks
Setting up factories and services is all part of the dependency injection system of Angular. Using that system is great when you need to create things that depend on other injected things. It's a big tree of dependencies. It's also nice for creating singletons, such that everywhere in your code end up using the same instance of some object.
It sounds to me like neither of these benefits apply in your case. I'd suggest just not using Angular's DI for it. You have some function defined globally, just call it directly and skip the DI. There's nothing wrong with that.
Of course you say it makes an Ajax call, so doesn't depend on the Angular $http service?
Your two options are:
Declare the function on the $rootScope
Inject it as a service
My advice is to go with making it a service. The whole purpose of services is explained in the Angular.js docs, just like this quote:
Angular services are singletons that carry out specific tasks common to web apps... To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service.
As you mentioned in your question, you'd prefer to not define the service in every controller you wish to use it in. With $rootScope you'll be injecting that also in every controller. So really it's a question of which you prefer, although to answer your question, the proper way of using a factory or service is to inject it into the controller you wish to use it in.
You can always put it in the $rootScope
myApp.run(function($rootScope, fb_connect){
$rootScope.welcome = function(){
};
});
I've tried the following bit of razor code:
#room.Media("summaryImage","umbracoFile")
but I get something like ~/media/155/lux.jpg, how do I remove the initial ~ to get a server path ie, /media/155/lux.jpg or http://some_url/media/155/lux.jpg?
EDIT:
I've tried
#{
dynamic summaryImagePath = room.Media("summaryImage","umbracoFile");
}
#Page.ResolveUrl(#summaryImagePath)
and
#Page.ResolveUrl(#room.Media("summaryImage","umbracoFile"))
but I keep getting the error:
Error loading Razor Script Cannot perform runtime binding on a null reference
even though #room.Media("summaryImage","umbracoFile") gives ~/media/155/lux.jpg.
Any ideas?
I'm not sure whether there is a solution within Umbraco, I'd just use the .NET framework. With ASP.NET, you can use MapPath to resolve virtual paths to physical file paths:
#HttpContext.Current.Server.MapPath(room.Media("summaryImage","umbracoFile"))
EDIT:
If you are looking for the absolute URL, you may use one of the following variants:
#Page.ResolveUrl(room.Media("summaryImage","umbracoFile"))
or
#VirtualPathUtility.ToAbsolute(room.Media("summaryImage","umbracoFile"))
You may would like to read this article about different approaches for resolving URLs.