5 Tips for Using Angular More Efficiently
ฝัง
- เผยแพร่เมื่อ 17 มิ.ย. 2024
- These are the top 5 Angular tips that I came up with after reflecting on my most valuable lessons and epiphanies about Angular, TypeScript and Angular project structure. These are practical tips and tricks that will teach you how to best utilize services and components while minimizing the amount of written code.
CONTENTS:
TIP #1 - 1:58
Example - 3:25
TIP #2 - 4:34
Example - 5:13
TIP #3 - 7:43
Example - 9:04
TIP #4 - 11:11
TIP #5 - 13:31
Example - 16:38
To learn more about the example app in this video:
masteryportfolio.com
Angular in 2 Minutes:
• ANGULAR explained SIMP...
Why I chose Angular:
• Angular is BETTER than...
MY GEAR
Sony ZV 1
amzn.to/2DXxrRV
Fifine Condenser Recording Microphone
amzn.to/2E7bboc
#programming #webdevelopement #angular
What kind of backend would you suggest? Would you use Nestjs or Firebase?
I’m using Firebase. I started using it because it was free, but I really like it and the NoSQL database structure has really been good for my project. Also, Angular and Firebase are both Google products and Angular Fire is the officially endorsed library for using Firebase in Angular projects. I will definitely make a video about Angular Fire in the near future (especially since the documentation for AF is not the best. I think supplementing with some videos is a good idea.)
But to be fair, I haven’t tried another backend yet so I can’t exactly compare.
Django is the best
Excellent video. You deliver good information quickly and you're examples do a great job of grounding the concepts. Keep it up!
That’s encouraging. Thank you so much!
seriously man, the best angular practices I've found yet. Thanks a ton. I bet if you start some coding playlist (like tutorials or projects and stuff) you'd definitely get a whole lot of subscribers. And I would love to see that. :)
Thank you. This is encouraging and gives me ideas.
Good explanation with a well arranged presentation, thank you 🙏
Great tutorial. You definitely deserve more...
This is an amazing video. I’ve seen people do a lot of low level videos on starting a project or a todo website, but there are barely any videos on how to actually manage a decent project, What are best practices and how to plan a project even?
This is all great advice. Need literally all of it as I was struggling with getting past the beginner-intermediate level stuff.
Just discovered this great channel! Thank you!
Thank you so much. I hope you enjoy what’s ahead.
Your videos, not just this one deserves a love not just a like ❤️
Thanks for this video, just subscribed
Great tips!
good one...
Starting to watch ur vids, not many people talking about angular
There a few ways to be even more efficient. First, use angular's built-in AsyncPipe. I think most of the unsubscribe issues brought up here will be eliminated. This will especially eliminate the need for a superclass just to unsubscribe. That superclass can be dangerous because it relies on child classes to call the super method of life cycle hooks if the child overrides them. Second, use a data service instead of a data component. Each of the components using the data service can, in their ngOnInit method, map the common data to the form they need with RxJS pipe/map. Again no subscription needed just use the new observable with an AsyncPipe in the template. This pattern will also eliminate the need to have special functions like @6:30 to update data as it can all be handled in the map function.
Can you provide the source code? I'd love to look thru the example. Excellent video.
Hey hi 👋 it's amazing 🤩 tips , can u plz make videos on state management in Angular ngrx & when to go for it
thanks for this stream! would love to see source code.
Thanks for this. Tip 3# is gold! can you please share the source code for hat unsubscriber class?
Hi @NeverBenBetter
Hi this is Durairaj Rajendiran, if I use data services and receive data through subscription of observables. If I unsubscribe what will happen? Is the connection only closed or data also cleared from the stack?
AD3. 10:45 so every new subscription in parent component you should set to the same this.anotherSubscription property?
Can you please share the example of all 5 tips?
Thank your for these amazing tips.
Will it be possible to explain in more details the DataWidget component ideas as well as the applications of it.
I have a question. If a parent has to pass data which is being used by 2 child components. will the observable/service make calls to the API twice?
For E.g.
DataComponent
D1, D2, D3
-> Widget 1
Tracking: D1, D2
-> Widget 2
Tracking D1,D3
D1,D2,D3 - Are fetched using REST APIS
Will D1 Rest API be Called for Widget 1 and Widget 2?
There is only ever one instance of a service (unless it is a component service, in which case it is attached to the individual components and “lives” with the component. You have to specify component services as such, so otherwise there is only ever one.) As a result, everything in the service’s constructor will only execute once. So for example, if you retrieve data from your backend, even if that data is used by two or a thousand components, there will only be one call.
I am always using my services to subscribe to data streams. That means a transaction is occurring anytime a change is made on the server. Because the subscription is in the service, I am
being very efficient by doing this.
On the other hand, if I subscribed to those streams in my components, that would be disastrous for my server fees. If I had a thousand components and EACH component independently retrieved changes as they were made... I bet you see where I am going.
I hope I answered your question. Thanks for the specific idea for a new video. I will add it to the queue!
@@neverbenbetter8225 Thanks for the reply.
I am incorporating your tips in my current application.
It would be great if you can make a video explanation for the same.
You could also choose angular Templates to do the different Form Types (event type ...) and when the user select an event type you load that Template!
see: th-cam.com/video/2SnVxPeJdwE/w-d-xo.html
18:59 Here you use getter functions - but aren't these run each time Angular does change detection? Wouldn't that mean that they're essentially called all the time?
If they are used from the template, yes. And they are pretty hard to spot when you're just looking in the code aswell.
Can you make a video on unsubscribe technique which you used..
hari prasad thanks for letting me know that’s something you would be interested in. Yes. I can do that.
@@neverbenbetter8225 Yeah.. That was interesting because i am using a little complex way of unsubscribing.
Please could you consider breaking this up into chapters? I know how to lazy load modules but I want to hear the other ideas without having to try and find them by scanning the video timeline.
Noted. I will keep this in mind, moving forward.
@@neverbenbetter8225 any chance you could apply it to this video retospectily?
Soon we’ll stamp out React. Angular will take the world
Can see a lot of bootstrap 😂😂
They're not called "life-style hooks" 🤣
Actually, the best practice is to make any data transfer into a service component. Also, you don't extend classes for just a function, you extend a class for the variable inheritance you use, like a button. You will extend the button class to add button types for ex.
Another point, for your unsubscribe, it's highly suggested to push to a subject, not unsubscribe the subscription raw, you destroy them on page change, you don't want to destroy all the subscriptions like what he did. You could have also avoided all the super nonsense, with just inputs and outputs between components, which would have saved you more lines of code, and useless function tests you didn't need to write.
Lastly, you didn't need to worry about async changes, if you just used ngonchanges lifecycle hook with inputs between components, subscribe to that to refresh the data displayed on the view.
You basically just wrote an es6 typescript app using angular default webpack config, change title xD.
What is wrong with “unsubscribing raw”?