AngularJS Fundamentals in 60-ish Minutes

Важная ссылка для демо примера

The demo’s I’m going to be showing throughout this are going to be found here

https://tinyurl.com/AngularJSDemos

В книжке рекомендуют полезные ресурсы - https://angularjs.org

Module 1: Getting Started – in book I see sheme with Single Page Application (SPA)

First off, a Single Page Application is one in which we have a shell page and we can load multiple views into that. In a SPA we can load the initial content upfront and then the different views or the little kind of miniweb pages can be loaded on the fly and embedded into the shell.

It structure AngularJs framefork. Angular is really a full-featured SPA framework.

If you want to use more advanced stuff you can even use jQuery and they play really nice together: Angular and jQuery.

To get started with AngularJS just head over to https://angularjs.org. You’ll notice here that I can go to GitHub and I can actually get to all of the scripts there, or I can just hit “Download” which is very simple. Нere are two different options. I can go with the “stable” or the “unstable”. If you want cutting edge go with the “unstable”. I actually use it all the time and I’ve had really good luck with that but Stable would be the official, recommended release if we’re building a production application.

Module 2: Directives, Filters and Data Binding

Я буду вставлять вырезанные скрины схем – потому-что так наглядней и легче запомнить и понять.

Notice at the top we have ng-app. Any time you see ng- that is an Angular directive. It’s a built-on directive. You can also write custom ones. You can get third party ones and things like that. This particular directive is very important because the script that’s now loaded [at the bottom] is going to kick off and this will initialise the Angular app. Right now we don’t have any particular module associated or any other code but we can still do stuff just by adding ng-app.

So for example, this is an example of another directive called ng-model.

The AngularJS API Reference for Directives

It main resource and manual about angular api https://docs.angularjs.org/api

In the API Reference you’ll see that right at the top we have different directives.

The next thing we can do with Angular is apply filters. Let’s say that as we bind to, say a customer name, and we do that process we want to upper-case it. Now I could upper-case it in my data model, which we’ll get to in a little bit later, but an easy way to do this type of thing is to apply an AngularJS filter.

What’s really nice about Angular is not only can we write our own custom directives but I can even write my own custom filters if I want to get a little more advanced with this. So, a very powerful framework and we’ve only scratched the surface so far.

Module 3: Views, Controllers and Scope The way it works in Angular is you have a View, which is what we’ve been doing in the previous

section with our Directives, our Filters and our Data Binding.

But we don’t want to put all of our logic into the View because it’s not very maintainable or testable or all those types of things. Instead we’re going to have a special little JavaScript object – a container - called a Controller. The Controller will drive things. It’s going to control ultimately what data gets bound into the View. If the

View passes up data to the controller it will handle passing off maybe to a service which then updates a back-end data store.

The glue between the View and the Controller is something called the Scope, and in Angular you’re going to see a lot of objects or variables that start with $. $scope represents the scope object. When I say it’s the glue, it literally is the thing that ties the controller to the view.

Creating a View and Controller