I'd like to build a firebase web app. Most examples seem to recommend using angular with firebase, and the angular-fire bindings in particular.
I don't use Angular and it seems like unnecessary overhead. My understanding of firebase is that it provides a simple JS API, where you setup callbacks and handle the events to update the dom, which could presumably be jquery. Since firebase is using a broadcast/web socket approach to send changes to my app, I'm not sure if I would need angular's 2 way binding all that much.
So, do i or should i use Angular with firebase or not? Will I run into issues with $scope and angular's lifecycle of events? I'm also concerned about the major changes coming with Angular 2.
Related
We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
I have a rather large angular.js 1.6 app that I would like to migrate to Angular, but using ngUpgrade causes way too many $digests to be triggered (i.e. every time Zone.onMicrotaskEmpty is fired). Unfortunately the app I am migrating is already not too great performance-wise, so every extra $digest is a pretty big deal. While I can mitigate this somewhat with ngZone.runOutsideAngular(), what I would really like is to totally disable the automatic triggering of $digests from the upgrade module, and just manually trigger them when necessary; since the app is composed of coarse-grained components which I will migrate one-by-one, there will be little need for a change in Angular to trigger a $digest in angular.js.
Here are a few of the possible solutions I am considering; are any of them more "standard" (or less risky / error prone) than the others?
Use a locally modified version of ngUpgrade with the call to rootScope.$digest() removed
Host upgraded Angular components in an iframe and use postMessage() for interaction with the app
Host upgraded Angular components in a web component (have not yet investigated how communication would work in that case)
Bootstrap both an angular.js and an Angular app from the same document, letting them both process their own directives/components on the page
Update (8/23): For now I am giving option 1 a try (locally modifying the upgrade js file); while I usually like to avoid doing such things, it seems like the safest bet so far.
There are two ways to bootstrap a Hybrid App:
UpgradeModule - bootstraps both the AngularJS (v1) and Angular (v6) frameworks in the Angular zone
DowngradeModule - bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.
I have tried both ways. To avoid all issues with $digest and performance I recommend using DowngradeModule
I want to use the Google JS API on my AngularJS web app. As I'm a newbie using Angular I'm a bit confused on how to encapsulate the gAPI calls. Basically I want to authenticate users and call some Google APIs (eg: spreadsheets, calendar, email, etc).
Considering a basic AngularJS app structure (main module, controllers, services, providers, etc), I decided to create a provider in order to encapsulate the Google oAuth authentication flow. And then I created some services to make the services' API call (calendar, docs, etc). Here I stated to get lost... :-\
Some questions:
How can I control (verify if the user is already authenticated) the access to my views? In each service or view controller? Or maybe on $routeProvider config?
In terms of Angular service/provider design... Is better to expose all the gAPI functionality I want to use in a Angular Service/Provider or simply access the gapi object directly in each angular controller/service?
Maybe consider using a library like https://github.com/maximepvrt/angular-google-gapi. These types of questions are hard to answer without knowing the scope of your application.
In general, I'd consider how much of the GAPI you are using and how much abstraction of the GAPI you will need. If you are doing fairly light weight things, then it may be fine to call the GAPI directly.
If you think you will be reusing the GAPI throughout the application, consider using the linked library or even wrapping the GAPI with your own services and providers.
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.
I am planning to develop my monitoring/dashboard pages for hardware devices like Cisco router/switch/controller using Angular JS Library.
My page contains graphs(line & area), Google maps, tables and some blocks (div with value)
Is it feasible to use Angular for monitoring data?
What are the advantages we can get by using Angular? since it is only monitoring we don't have to use 2 way binding.
I am looking for few points to justify why we need angularJS for monitoring/dashboard kind of pages rather than JQuery/Javascript.
Please let me know your thoughts and comments.
Thanks.
Using AngularJS is totally feasible.
Main advantages is that charts can be implemented as reusable components (AngularJS directives).
There is a project in development that allows building dashboard from arbitrary directives
Running Demo http://nickholub.github.io/angular-dashboard-app
Demo source code https://github.com/nickholub/angular-dashboard-app
Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard
And here is example of visualizing data coming from WebSocket
https://github.com/nickholub/angular-real-time-charts
If your site is 100% static - and by that I mean that you do a request for a status page, and the page you get will never change before you do a new request - then angular might be a little unnecessary.
But if you want your status page to 'live', you could use socket.io to push new events and data to the client and let angular take care of the ui refresh.
There are some angular directives to work with graphs, but I have no experience using them.
Some pointers:
Node.js + socket.io + angular.js:
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
angular.js + charts: http://ngmodules.org/tags/charts