AngularJs60-minute basic tutorial _ AngularJS

AngularJs is a good framework for developing SPA applications (single-page Web applications. Through this article, I will introduce you to the basic angularjs tutorial. If you need to learn more, AngularJs is a good framework for developing SPA applications (single-page Web applications. A single page Web application (SPA) has only one web page. The browser loads the necessary HTML, CSS, and JavaScript at the beginning. All operations are completed on this page. JavaScript controls the presentation of different views on this page. This article originated from a good tutorial video on AngularJs on Youtube: AngularJS Fundamentals In 60-ish Minutes, which mainly explains the concepts and usage of Directive, Data Binding, Filter, and Module In AngularJs. I personally think that these four concepts are the core of AngularJs and support the AngularJs skeleton. They are helpful to grasp AngularJs globally. Advanced operations require reading a large number of practices and official API documents.

Let's take a look at what AngularJs can do.

First download angular. min. js and angular-route.min.js from the official website. Download it from the official website (https://angularjs.org/or https://code.angularjs.org /)

Create an Empty Web project in.

Directive and Data Binding

The Directive concept in AngularJs is not easy to understand. At the getting-started stage, it can be understood as a tag. Angularjs used to expand HTML to parse these tags to implement Magic of Angularjs.
The following code uses two ctive ve: ng-app and ng-model.

Ng-app: used for auto-bootstrap an AngularJs application. This is a required ve, which is generally added to the HTML root object (as shown in the following code ). For more details, visit the official website: https://docs.angularjs.org/api/ng/directive/ngApp

NgModel: used to establish a two-way Data Binding between the property and the HTML control (input, select, textarea). That is to say, changes to the value of the HTML control will be reflected to the property, which is also true in turn. Property is an object created through.

The following code creates a Data Binding between the text control and name.

Using Directives and Data Binding Syntax
Name:{Name }}