02 introduction-AngularJS basic tutorial, introduction-angularjs

02 introduction-AngularJS basic tutorial, introduction-angularjs
0. Directory

• Directory
• Preface
• Body
  • 1 AngularJS is difficult or easy to use
  • 2. Do you need Angular?
  • 3 reasons for using Angular
  • 4. About this book
  • 5. Next
• Statement

1. Preface

AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a well-designed declarative language for static text display, but it seems weak to build WEB applications, angularJS has done some work to solve the shortcomings of static Web Page Technology in building dynamic applications.

AngularJS was originally designedSimplify web APP development, The essence isSimple. However, there are many AngularJS tutorials at home and abroad, all focusing on the strengths of AngularJS, which increases the difficulty of AngularJS learning. This tutorial attempts to explain in a popular language.Basic,Most practicalContent,Simplify the learning process and reduce the learning difficultyIs the original intention of this tutorial.

This series of tutorialsTranslationChris SmithOfAngualr BasicsTo provide you with a brief overview, integrate the understanding of the bloggers.Simple and clear. This article is part 1 of the series of tutorials.Introduction.

2. Text

This is a pocket Book inspired by other free, short, and friendly programming books, such as The Little Book on CoffeeScript by Alex MacCaw. I wrote this book to introduce it as I learned about AugularJS and focus on how to apply AngularJS to quick web development in typical environments. Based on the principle of parallelism, the simple but use of the features, after the course, we may only understand part of AngularJS, but we can use this framework to easily create a powerful front-end application. This book is a dynamic website. In all cases, the latest AngularJS (Angular 1.3.14) is used. If you prefer interactive learning, you can modify code instructions to see the Running Effect in real time, we encourage you to conduct exploratory and experimental learning.

If you want to learn more about why I have written this book, the history of AngularJS, and whether AngularJS is suitable for your project, read this article. If you are very sure why you have read this article, eager to learn about AngularJS, please refer to the 03rd Basics of the series of tutorials.

2.1 is AngularJS hard or easy?

I have nearly ten years of experience in web MVC. From Struts to Spring MVC to Ruby on Rails to Backbone, I even wrote a book on Backbone and CoffeeScript, therefore, I think it is very easy to learn AngularJS. However, when I was immersed in APIs and documents, I found that a variety of unfamiliar terms (transclusion, directive, and isolate scope) hindered the learning process, when I read the official documents and tutorials, the so-called simple and easy to learn seems to have not appeared, but it is confused, for example, the following section of suffering text.

The advantage of transclusion is that the linking function functions es a transclusion function which is pre-bound to the correct scope. in a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. this makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

Now the official document does not contain this text. With the unremitting efforts of the official AngularJS team, the readability of the official document is further enhanced. However, when I read this article for the first time, I felt very ignorant and seemed to have entered a new field. I felt AngularJS was a complicated technology (no joke ), various details of AngularJS have been widely discussed, and it is difficult to debug, quirks, and traps.

Like any self-esteem and self-love procedural ape, I picked up my sleeves and fought to the end. I gradually became familiar with those terms and thought that learning would be a little steep. One day, I saw a video interview with the founder of AngularJS, Mi shiko Hevery. According to Hevery's explanation, I found a simple and important fact:

The ease of use is the original intention of AngularJS

Hevery explains that when he conceived AngularJS, he used it as a tool for non-programmers to create dynamic web applications simply using predefined labels. I realized that I was involved in too many AngularJS details and did not get the corresponding benefits. Angular projects and related communities put too much effort into mutual collaboration, which increases Angular complexity and learning difficulty. We need to explore better ways of using them to approach Angular's original development intention, remove a large number of well-designed controls, without considering weak internal security risks, directly forward.

This method is correct for me. Although Angular is not my only web development language, it is definitely the most shining one.

2.2 do you need Angular?

Although Angular-like client js tools make it easy to create a single page application, many web projects still use the traditional architecture to implement interaction between server rendering and jQuery. Frankly speaking, you need to consider whether your project needs to manage data and render html on the client, and whether you have enough reason to start a new technology.

Of course, Angular is an obvious,Stubborn(Angular is a broad, opinionated solution ). Although often recognized as a library, Angular's built-in support for modularity and dependency injection will change your project management approach. If you want to find an Angular alternative, it may be more mature or optimal, but none of these can completely replace Angular. Unless your project can certainly reach the level that Google engineers think is classic, you may not need to reach the level that the Angular Core Team recognizes as an organization. Dependency Injection can be used in unit tests, but it is too complicated. You can go to Dependency Injection to see the actual cases.

When you need to introduce non-Angular code and Angular Data Binding and rendering mechanisms to work togetherAnother problem, You need to go deep into these mysterious details. Comparatively speaking, Backbone is based on jQuery, Which is simpler and easier to understand. If your project is deeply dependent on jQuery, using Backbone for progressive enhancement is also a good choice.

In addition, Angular's Bidirectional binding between the UI component and the model object also increases the complexity of the application. Facebook developers shared the frustration of two-way data binding:

We found that two-way Data Binding may easily lead to cascade updates: changes to one object may lead to changes to another object, or even more objects. As applications grow, cascade updates caused by user behavior will be hard to predict.

Compared with Angular, although Facebook's React does not focus on rendering, the React-Based Client technology is worth a try.

2.3 reasons for using Angular

Angular may be the most popularJavascript MV *Solution: github receives 36722 stars. Of course, there may be more stars when reading this article. It quickly stood out from similar solutions and became a top-level solution. You can refer to the TodoMVC project to compare manyMV * Solution. Let's take a look at the reasons for Angular's success.

• Quick prototyping(Immediate producti)
  If your project requires the user interface to perform data addition, deletion, modification, and query operations, Angular can effectively fulfill its promise of rapid prototyping. You only need to add several attributes to the common html, and use a few lines of javascript code to implement functions that require a lot of skills and efforts to implement the common class library.
• Familiarity
  Angular contains native JS andAlmostCommon HTML,AlmostThis word is mainly because Angular introduces some new html elements, attributes, and some line code that may seem terrible. Angular is very close to html compared with other template systems, and most developers can easily understand it.
• Adaptability
  Angular can well support the current UI core JS class libraries. If you want to use popular class libraries like Bootstrap, You can effectively use third-party projects such as AngularUI for simple integration. Therefore, Angular can be a good choice whether you want to add interactivity to a traditional document center website or develop a colorful single-page application.
• Future Standards
  Although I cannot determine how high Angualr can reach, Angular's parent company, Google, is very clear about how Angular uses the standard Web Components. In addition, angular is similar to the features of Javascript in the next version (for example, Object. observe) its basic principles will be maintained and will not be discarded.
• Community
  Of course, a very important reason is that it is very popular. It is applied to a large number of overload websites, Google's support, a large number of plug-ins and learning resources. Of course, the correct choice for most people is not necessarily the correct choice for everyone. You also need to carefully consider whether Angular is really suitable for you.

2.4 about this book

Many years ago, when I read a JS programming book on My MacBook Air, I had the idea of ScriptyBooks. When we need to run a case in the book, we need to download the case from the website, so we are anxious to open it, find the desired file from a large number of files, and try to find the correct file, open it and modify it, but you may not be able to run it. You may need to install the support environment.

Why does it take a lot of effort to run a case when explaining a front-end technology? If you can show the code in the book, modify the code, and display the result in real time, that's wonderful.

This book uses this method. All codes can be dynamically modified and the code running results can be displayed in real time. As shown below.

<strong>The lucky number {{3 + 5}}.</strong>

The lucky number 8.

I use CodeMirror and Angular to implement dynamic interaction. If angular is still a newbie, modify the above Code to see what will happen (blog support technology is limited, this tutorial does not provide the dynamic code modification function. Sorry. Please read the original tutorial code ).

2.5 next

Next, we will explain the client-side templating and two-way bindings to show you the basics of Angular. Although most of the code is very simple and can be understood at a glance, I believe that even experienced Angular developers can gain some benefits.

3. Statement

Front-end development whqet, focus on front-end development, and share related resources. Wang haiqing, A csdn Expert Blog, hopes to help you. Limited by the author's limited level, it is inevitable to make mistakes. Thank you!
You are welcome to reprint it in any form. Please note the loading and retain the text in this section.
The original Article, http://blog.csdn.net/whqet/article/details/44596577
Welcome to independent blog http://whqet.github.io.