Lộ trình học Angular.js

js-learning-curves

Tình cờ tìm được một bài viết rất hay về lộ trình học AngularJS từ “Zero JS”, kéo lại về blog nghiên cứu, khi nào có thời gian sẽ dịch lại toàn bộ. 

To develop applications in Angular you need to code using JavaScript, which makes JavaScript the minimal pre-requisite for learning Angular.What this means is that you cannot learn Angular with ‘Zero JS’.

That said, you don’t need to be an a expert JS developer. A short detour to familiarize  yourself would suffice to get  started.

While you get yourself familiar with JavaScipt, here is an introduction to Angular where I did my best to focus  less on the scripting aspects and more on core concepts.

You only need to be familiar with the concepts of MVC and a bit of Dependency Injection to grasp what have I said here.

I am hoping that once you read this introduction you will be motivated to go learn enough JavaScript to get started with developing application in Angular.

At the outset, here is how your journey to code your cool ideas in Angular might look like.

There a quite a few good resources already there to help you. What I have done here is to tie them together to create a lesson plan that will help you learn the concepts while you try get your hands dirty in code.

References

  1. Read on
  2. https://www.codeschool.com/courses/javascript-road-trip-part-1
  3. https://www.youtube.com/watch?v=…
  4. https://github.com/angular/angul…
  5. http://www.toptal.com/angular-js…
  6. https://docs.angularjs.org/guide

Are you ready?

Introducing Angular

If introduce Angular with a tag line, I would say ‘Angular- A JavaScript MVC framework’

Being an MVC framework implemented in JavaScript is a remarkable thing, isn’t it? Given that all the traditional MVC frameworks were server centric ,with every bit of execution, including the ones for presentation specific tasks, needing a round trip to the server.

Since Angular runs completely in browser, the application’s dependency on the server drastically reduces, which has many benefits.

In the diagram below you can see how the most of presentation logic is getting executed in the browser and not the server.

Talking about the benefits of being able to run in the browser, being contained the browser makes Angular the ideal choice of SPA applications.

This is because in SPA apps only the only initial resources are fetched in full from the server.From then on the server is contacted only to download just enough resources on a need basis.

Angular application work in the similar way with all the presentation related tasks getting executed in the browser and the server being reached out to only to download additional UI resources and get application data.

The dependency on the server is reduced, the number of round trips to server is also reduced which is what makes Angular suitable for developing responsive applications.

Now lets look at the other feature highlights of Angular. I am going introduce these features by explaining to you how they are applied in developing the simple function.

What makes Angular Special?

We’ll look at a function that is very common in the web applications, filtering pre-populated search results .

The function we are about to consider will look something like the image above when implemented; the names displayed will get filtered as the user types the search criteria.

The code snippets that implement the filter functionality are presented below.

One part of the code is in the HTML page itself( we will talk more about this in the section for directives) . The other part of the code is the controller that pre-populates the search results. For this example, we have hard coded the values in the controller itself, to aid illustration.The hard coded section of the code would be replaced with server access code in a real world implementation.

For this example, we have hard coded the values in the controller itself. This portion would be replaced with server access code in a more real world application.

Part#1: Angular in HTML

Note:The code is below is not complete as I have deliberately suppressed the bootstrapping code for functions like setting up Angular java script & CSS libraries to help us focus on the concepts.

Part#2: Angular in JavaScript

Note: Don’t get too bogged down with the syntax. For now, just notice that the controller code is developed in Java Script.

If you already getting uncomfortable with the anomalies you notice in the code, just hang on. We are about to take a closer look at these odd looking pieces of code in the following sections.

1.   Presence of non-HTML tags and attributes in the page

These non-HTML tags are directives (the portions marked in white and numbered in HTML code above)

Angular allows you to define the view and its behavior by adding custom HTML tags & attributes called directives.

Directives are parsed by the Angular java script compiler to generate java script that would manipulate the view’s DOM when it is rendered.

Using java script to manipulate DOM is nothing new, you may say.

Agreed!

JQuery, for example , did just that. What makes Angular standout though, is the manner in which this feature is supported.

In Angular, DOM manipulation logic is completely abstracted from the developer by allowing a declarative style of view definition using custom HTML tags.

The table above shows all the functionality that has been abstracted from the developer by  directives. Notice how  you would have been saved from having to code all the abstracted logic by using directive, if you were to develop this page.

Your view is left clean and maintainable.

2.   The seemingly callous way in which the searchString and items-list are accessed and updated as if they are always upto date.

This feature that enables you to access model attributes without having to write code to refresh them with the values entered by the user in the view is provided by a construct called Databinding in Angular.

In Angular, this is 2-way. View to Model and Model to View. With this feature, you can automatically set the value user has entered in the view (searchString) to a variable in the model and display the latest value received from the data source immediately to the user (items list).

Hope  you realized by now that Angular is working behind the scenes to sync values between model and view letting you focus on the application logic instead of writing boiler plate code

3.    Inline annotation for Dependency Injection

Another interesting feature of Angular is the way it readily makes services available to you, using Dependency Injection(DI).

While DI is not something unique to Angular, the speciality here is that there very little you have to set up service to be accessed using DI. You just need to declare its use before you access it.

This style of supporting DI is called Inline annotation, which drastically reduces the code you otherwise needed to write in the form of XML declaration and interfacing with injector libraries.

See how $http service is available in the function by just passing it as parameter.

Its that simple!

Even here Angular does all the work of locating the service, instantiating it and readying to be used, behind the scenes. You are again saved the effort of having to deal with configuration files or factory methods that you would have needed in other DI implementations.

Conclusion

That’s a glimpse of what Angular can do for you. Is that all? Of course not! I have left out talking about its support of testing and the rich set of library functions to focus solely on the 3 core strengths of Angular- 3Ds- Derivatives,Data Binding & Dependency Injection.

By now, I am hoping that the case for learning java script is made too, after we’ve seen the controller being scripted in JS. As you could see we did not have to write any intricate java script either, which is why having enough competency to work with Angular’s libraries would be enough to get you started. Codeschool’s Tutorial does a wonderful job to serve that purpose.

All the best!

Credits:

  1. https://angularjs.org/ – The code snippet for DI
  2. http://tutorialzine.com/2013/08/… – The filter example is a scaled down version of the ‘Instant Search’ example shown in this tutorial.
  3. http://www.ng-newsletter.com/pos… – Source of my learning for a lot of what I have said.
  4. http://www.johnpapa.net/pageinspa/– Where I learn about SPA.

Edits#1: Replaced images.
Other Edits: Replaced images & restructured content

Nguồn: Quora