Home > Developer > JavaScript
AngularJS Quick Start and angularjs Quick Start
How to quickly learn about AngularJS?
I believe that many beginners have had or similar questions. In fact, there is no standard answer to this question. Everyone's technical background, work experience, and so on are not the same. Therefore, the starting point for learning AngularJS is certainly different, I used knockoutjs earlier. When I first saw the Helloworld case of AngularJS, I was immediately attracted by declarative syntax and powerful bidirectional binding.
In fact, several examples on the homepage of AngularJS official website have already demonstrated some of AngularJS's features, next I will explain how AngularJS attracts people and how to use ng in actual projects step by step from a few examples.
First of all from the first classic Hello world case, the following HTML (if you are in the pipeline, you can directly access the https://angularjs.org, there is a running effect on the right ).
<!doctype html>Anyone who knows about HTML knows that there is an input box in this interface, and there is a
The result is: when you enter the content in the input box, the following h1 title displays "Hello input content in real time! "
Different from ordinary HTML, there are the following points:
An ng-app attribute is added to the html tag, which means that the entire HTML is controlled by AngularJS;
An ng-model = "yourName" is added to the input box, indicating that the input value is bound to the yourName variable in the memory in two ways. In the input box, enter "world", the yourName variable in the memory becomes "world", and vice versa;
There is a {yourName} inside the h1 tag. This indicates that the yourName attribute in the memory is bidirectional bound to the content of the h1 node. After yourName is "world, the content of h1 will become "Hello world! "," {{}} "Is an ng expression.Traditional practices:
Add a change event to input. After the change event is triggered, obtain the content of the input box, combine the string, and modify the innerHTML of h1 through DOM operations, if you want to add the id or name attribute to input and h1.
This example is used.
You should be able to clearly feel the advantages of AngularJS. You can achieve a perfect function without writing a line of JS Code.The above example only shows a simple two-way binding function. Since AngularJS is a MV * framework, the above mentioned yourName is Model and HTML is View, then * (Controller or ViewModel) where have you been? I will slightly modify the example above:
<!doctype html>You can see where I modified it:
Add ng-controller = "testCtrl" to the div, indicating that all the elements in the DIV belong to the jurisdiction of testCtrl;
At the same time, the script adds a function testCtrl, which has a $ scope parameter, and the function gives $ scope. yourName has a "world" value and a clearInputValue function. This $ scope can be understood as the carrier (or context) of ViewModel and ng Model ), all ng variables used in the template are on $ scope and initialized to $ scope. yourName indicates that the Value in the input box is "world" by default.
A Button is added to the interface, and ng-click = "clearInputValue ()" is displayed on the button. ng-click indicates that a click event is bound to the Button. click the Button to execute the clearInputValue function, this function is provided to $ scope. yourName is assigned an empty string, and the value of the input box is cleared.In this example, we can clearly see how AngularJS achieves music videos *. You can think about the specific traditional practices in your mind, and whether the ng implementation method is simpler, so far, have you been attracted by ng ???
After reading the above example, some people may have doubts. Each controller is bound to a function. The first parameter of this function is $ scope, all data and methods are in the $ scope context, and this function is a global function. What if there are many controllers on the interface? There won't be many global functions, right? (Note: This global function method has been canceled after version 1.3.x)
Haha, ng has come up with this step for a long time. ng has its own module loading mechanism and introduced dependency injection.
I modified the above example again:
<! Doctype html>I specified an app name for ng-app, and the js Code uses angular. module ("app", []); defines a module named "app", and defines a testCtrl using the controller method of this app module; the module function is a static method on angular objects. The first parameter is used to pass the name, and the second parameter is an array. This array indicates other modules referenced by this module, in this example, we didn't use any other module, So we passed in an empty array. If the second parameter is not passed, the module named "app" will be obtained;
This example is a menu module that you often encounter in projects. There are two menus on the page. Menu 1 is selected by default. The content of the selected menu is displayed in the following content area, at the same time, the menu style needs to be changed to the selected state;
Ng-if = "currentMenu = 'menu1'" and ng-if = "currentMenu = 'menu2 '" are used for the display area. As the name suggests, ng-if indicates that if the expression is truly compiled and the template element inside ng-if is displayed, if the expression is false, NO content is displayed;
For the selected menu style, I used ng-class = "{'activity': currentMenu = 'menu1'}", which means that when currentMenu is menu1, the class "active" is added. otherwise, no style exists.The three examples above demonstrate how to enable a ng web and how to use ng in modular mode. If you understand it, it indicates that you have mastered how to use ng-controller and data two-way binding, write templates, and initially come into contact with many built-in commands (such as ng-app, ng-controller, ng-model, ng-if, ng-class, ng-click ).
To be honest, you already have a lot.
Of course, ng still has a lot to wait for you to discover, such:
Use the ngRoute module to write the SPA (single-page program );
There are more instructions to learn how to encapsulate custom commands;
Ng Filter function );
Ng form verification function;
Use ng service functions (service, provider, and factory );
Ng scope tree structure, and communication between different controllers through the event publishing and subscription mechanism;
The $ http and $ resource modules interact with server APIs;
Use the animate module for animation effects;
Unit test.
Note: In the preceding example, all js css files are written on the html page for ease of display. Actual projects should be written in separate files.Last example
Based on the knowledge above, you can create a todolist example by yourself. By default, there are two todo items on the interface, one is complete, and the other is incomplete. Each todo has a checkbox to indicate whether the task has been completed, there is an input box and add button below. If you click Add in the input content, there will be one more todo in the list. You don't need to look at the following code and try to do it yourself. in this example, you need to use several ctive ve: <li ng-repeat = "todo in todos"> to indicate the list of loop todos, in the li tag, you can write the template language to display the content of each todo, such as {toodo. text }}.
The Code is as follows:
<!DOCTYPE html>The above input boxes and buttons can also be implemented using the following code.
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="button" value="add" ng-click="addTodo()"><Form ng-submit = "addTodo ()"> is used in the official example to submit the input content directly by pressing Enter.
We are also working on Angular in the Worktile process. js step by step, those Angular. js will also step on the pitfalls one by one. Undoubtedly, Angular. js is indeed a very good frontend MV * framework.
The above is all the content of this article. I hope this article will help you prepare to use Angular. js technology.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
