AngularJs Beginners Course | Em Hazeen | Skillshare

AngularJs Beginners Course

Em Hazeen

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (10m)
    • 1. Introduction

      0:45
    • 2. AngularJs Architecture

      1:44
    • 3. AngularJs Fundamentals

      5:16
    • 4. Real Life AngularJs Example

      2:22

About This Class

Learn about angularjs with its practical example . In the course you will learn

  • AngularJs fundamentals
  • Data binding in angularjs
  • Controllers in angularjs
  • Deep linking in angularjs
  • Server communication
  • Localisation

The course will introduce you to basic topics and will summarise all those topics in a real world example at the end of the course.

Transcripts

1. Introduction: Welcome to the oncology is beginner scores. Angular jeers is an open source client side Joseph. Remember that use a similar as its template ing language and is designed to help you create dynamic, single piece applications. It was originally created in 2000 and nine and has evolved since into a powerful tool for building the back. It's now a Google project, and they have employed a team to work on it. Full time on is used by them on a number of product. There are quite a few clients that Josko frameworks around at the moment, but Angler is notable for its philosophy that that de clarity programming is better than them parity programming for creating modular components, you'll learn how to use angler and we see architecture to build applications on the state. 2. AngularJs Architecture: Hangul urges, follows the MBC architecture. Mortal new controller or NBC is softer design. Patron used for developing above applications on MBC Consists off following parts model. It is the lowest level off depression responsible for maintaining data view. It is responsible for displaying all or a portion of better to the user controller. It is a software that maintains the interactions between a model and a view. MBC is popular because it separates the user logic from the application layer. The controller receives all the request from the user on. Then it works with the model to prepare the debtor that is needed for the view. The view then uses that are generated by the controller to give the final presentation toe the user. No, let's defined the M V C architecture in more detail. DeMoro is responsible for managing application. Doctor on it responds to the instructions from the view on by the controller to operate yourself. The view is the presentation of data in a particular former. It is triggered by the controller. It is triggered by the comptroller's decision to present the data. These are script based and players like B. It's be here speech. Our service beiges, and they're very easy to integrate with the ejects no less suitable to controller the controller responsible user input and interact with the model decontrol receive started off validators and perform interactions according to the data model on that sold for this lecture. Thanks for watching. 3. AngularJs Fundamentals: the angular jeers website is a great place to start When you're learning angler, you can find it at angular cheer. Start org A secret place to go for documentation on the full AP reference. They also have a lot of very useful examples that show you a few things that can be done with angular straight away. The first thing you'll notice on the speech is the download button. This gives you a pop, a word that lets us configure an angular download. We were using the stable branch and using them Unified coat because we'll be grabbing it from the Google CD in at the Link here. You can also don't load a legacy branch or the UN compressed or you. The in compressed source is good for learning a little bit more about languages by reading it sexual source code. Let's get into some languages. What makes angular different? Well, that's a big question, and there are a lot of answers to it. Most of all, Angler is extremely on incredibly model of framework. No, While this doesn't make it different, design decisions that come out off extreme modularity are really interesting. Just remember the weight angular is constructed. It is supposed to be as efficient as possible dependencies on injected or included When they're not necessary. You should have court files where it's relevant. Everything should be split up. Everything is built around on extremely arrogant framework. On you'll see, these were clearly very soon. What else make angular different? Well, for one is a data binding. This isn't the only zoster framework, that is, that a binding. But what angular does is we're interesting on Does it in very efficient way by that a binding an angler. That means that the debtor that you see in the view is in real time synchronized with the data that you see in the model. So whatever that angular is interacting in, the model is the same that are that you're seeing. Presenting in the view on disbanding is done in two ways. If you change it in angler, it will be reflected in real time to the view and vice for so now that is a really important thing to know something else that, also interesting about Angler is that it's used Blaine Gela script. This is good for a number of reasons. One is that inclusion off third party libraries. It is relatively simple. There's were little you need to do to make it work in tandem with angrier, and this makes it really nice in terms or deep linking you see here. This is a problem that is introduced by single paid applications. Because when you first served, there is no there is really no difference between using a traditional server interview on a single page application. All lessors ourself together isn't grossly or something like that. But when you change those after the initial load is when the difference happened. So with a tradition server, so with a tradition server, once it is requested, it will generally view files or whatever that's needed and will return that with something like angular, which is single pit application. It doesn't happen. It handles all the rotating within that single page. Although it looks like to the user that you're changing views, you're not actually tainting the beach. The problem is introduced when you try on to first low to access a deep link pages where, if you were to try to load forced initially slash user slash martyr, for example, if you aren't road that initial load that's going to hit the server and the server don't know what to do with that row, because so what isn't set up to handle the route? It is all handled in the front end when you set this up correctly in angular, angular takes care of this entirely. So all you have to do is make sure that the server knows what to do when it sees thes initial page load droughts. And it refers all the handling toe angular, which is really awesome. And it's stand with total transparency, and you don't need to worry about anything. Formerly, addition is very big and angular. There's a lot of really need tools that allow you to simply value it forms without writing too much gold. Also, it's worth mentioning that although you can do the validation and angular, it's the same as with any George good framework. You can't just validate in. Just because the user is assumed toe have full control of the entire execution environment in terms off sharper communication. Angler off for services, which you don't need to worry about those right now, but essentially, they're going to let you talk to the excellent FBI and stuff like that. That's really easy with the activist. Surveys on the resource Service directives are a huge part off angular there. Completely unique toe angular known framework, as far as I know, uses this type of directives, and the way you describe it is in custom at similar syntax. It's really unique payoff handling functionality that you want to use on. We will talk about them later. Dependents injection. This is another extension. Angular or hilarity concept for dependencies within Angler are injected, which is rather complex. Topic will touch on that later, but it's uniquely off providing services on other things to pieces of the application that need stamp. And finally, you testable angler is extremely testable. Anglo from day one has been returned to be a testable framework. This is called to the way that angular core team has built angler 4. Real Life AngularJs Example: now Lexical. The first example on this speech this little abuses the value of textbooks to update the text in this H one. So when I have date my name here, you can see straightaway. It operates the H one. Now, this is all the code that is necessary to make that happen. We got the script X with the Cdn neural in it on. We've got on N G attributes on the HTML tag. Essentially, it tells angler to just instant she ate itself on the beach. The next thing I noticed in that the n g immortal attributes This is the first active you're going to meet. It links the data in the textbooks. Joe. Very well in an angler called your name. This is a model on is the first part of the NBC architecture that will come to learn about in angular. The last thing to notice is the double curly braces on the world. Your name in the H one? This is a template in that a binding. All it means is that angler will replace the contents off. This calibrates is with the value in the text box. It knows that they're linked together because of value off the NZ model. Actually, Butte is your name. Between the calibration is so again if I topped ever Ahmad here you see that it appeared straightaway because I'm changing the value off your name Orel on its being inserted in that one on their arm or examples on the speeds on day get progressively more complex as we go on. The good thing about Dangler website is the documentation To get the documentation, click on the development you and click on the developer guide. This guide contain articles about every part off angular. So if you're having trouble, then just come here and give you a great shot and learning how it works. If you need some reference documentation, click on the development you and then on a p a reference. Now, this is pretty much everything on Wheeler can do. And if you click on any of these will get a page about documentation about it. The last place you might like to look is the angular Google Group. So if you hear the discuss my new and then on the meaning list, this will take you directly toe angular Google Group here If you have any problem disposed here. And you can get health directly from the whole community. Not that will be all for just for you. Thanks for watching.