Sooner or later, I had to try AngularJS, a front-end framework created by Google, and which we already presented here a few months ago. I have already commented many times that the front-end part is not in which I stand out and that I feel more comfortable in the backend, but how you have to know a bit of everything … Several months ago version 1.3 was published of this framework, and AngularJS 2.0 is underway, already on TypeScript (of which we will also talk shortly and we will expand a lot!)
What is AngularJS
AngularJS is a Javascript library that works on the client side that facilitates the creation of dynamic webs or web applications because it adds interactivity to the HTML code. It is an MVW framework, that is, Model View Whatever, which also:
- It helps you to have your Javascript code well organized (which is highly interesting, since not everyone complies with the premise of being ordered!)
- It helps you to create fast websites answer, and also they are responsive (adaptable to different resolutions)
- It is easy to test It gets along very well with jQuery (very important to create websites of only one page)
It is desirable that before starting with AngularJS you have good knowledge of HTML5, CSS and Javascript, and how you have been able to verify, since #manejandodatos we have written a lot about these topics, testing different libraries and frameworks, multiple examples, …. Warned you are!
The most important thing is that we have to include in the HTML the code to “shoot” the Javascript or TypeScript code.
The philosophy of AngularJS is based on improving and extending HTML, understanding the needs of both new and experienced developers.
Before continuing, comment that AngularJS 2.0 will be written in TypeScript, so if you do not like Javascript or you see it too complex, invite you to know this language created by Microsoft.
The model View … whatever
AngularJS is based on MVW:
- Model: they are objects that represent the data to which the application can access.
- View: The one where the user interacts, that is, what is seen as such and how it is displayed (what is seen in the browser).
- Controller: define the current behavior of the application (it is the logic of the application) and play a key role connecting the models (data) with the views (data representation).
AngularJS has been defined to allow two-way binding, that is, bi-directional union between controls and models, which makes life much easier for the developer.
Basic concepts of AngularJS
Before moving forward, it is very important to know the following terms:
Directives: are the marks embedded in the HTML code (as tags) to indicate to Angular the Javascript code that it has to execute.
- Modules: they are where they are written the pieces of our application, which makes the code encapsulated, facilitating its maintenance, its testing and its readability (this is very important!). It is also where the dependencies that the application has are defined.
- Expressions: they allow us to insert values dynamically in the HTML code. They use {{code}} embedded in the HTML.
- Controllers: are those that define the behavior of the application by defining functions and values. They are the ones that put the data in HTML. On the one hand you have to include the ng-controller tag in the HTML code, and define that driver in Javascript code.
Expressions could resemble the templates we use when working with Flask (in Python). The directives mark the containers where the action will take place, which is done in the modules. The directives are those that are in charge of the action.
Knowing the directives
The directives are tag properties that are added to the HTML code. For example, where the action takes place will include ng-app (normally it will go in the HTML tag of the HTML), indicating the name of the application.
Other directives are ng-show and ng-hide that depend on a property whose value is of the type True–False, and which are opposite: one sample (the other hidden) if the value of the property is True. For reparative tasks, that is, the classic loops for … next, the ng-repeat directive is used, where I must include item in collection so that the process is repetitive.
First impression of AngularJS
Sincerely, the first time I heard about the existence of AngularJS was in a technical talk I attended at SocialBro, and … it seemed extremely complex, basically due to my ignorance of the basic concepts that I have presented here today.
Because it a framework for front-end, … even less interest to know it, and it’s been over a year until I’ve found “the course”, where they explain step by step and very carefully how to work with AngularJS. As I put in the only entry on AngularJS (until today, of course!), Is a framework that must be taken into account because Google is behind, and Angular programming does not have much to do with Javascript, although it is the language of development.
Undoubtedly, now that I know VueJS well, I guess it will not be difficult for me to try AngularJS, but VueJS goes a lot with my programming style in Javascript, and honestly, I do not have too many arguments to change VueJS for AngularJS.
Good day!