Home > Developer > JavaScript
AngularJs 60-minute basic tutorial and angularjs basic tutorial
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.
<!DOCTYPE html>Directive can use "x-" or "data-" as the prefix. Directive can be placed in element names, attributes, classes, and annotations.
<!DOCTYPE html>The following is the result after HTML is run.
The following example shows how to traverse an array through ng-init and ng-repeat.
<!DOCTYPE html>More directve usage, refer to the official website https://docs.angularjs.org/api
Filter
The function is to receive an input, process it through a rule, and then return the processed result. It is mainly used to filter arrays, sort elements in arrays, and format data.
AngualrJS has built-in filters: currency, date, filter, json, and limitTo), lowercase (lower case), uppercase (upper case), number (number), orderBy (SORT ). A total of nine types. In addition, you can also customize filters, which are powerful and can process data that meets any requirements.
The following code demonstrates data filtering, sorting, and case-sensitivity conversion. Each Filter follows the data and is separated by |.
<!DOCTYPE html>Running result:
Module
A Module is a container used to manage all parts of an AngularJS application. It is an important concept in AngularJS. An AngularJS application is a Module, and its role is similar to that of Assembly in a C # application. In C #, we use the main function to bootstrap the application. AngularJS uses na-app = "moduleName" to bootstrap an AngularJS application. ModuleName is the name of the Module object.
Is a common component of a Module.
Config/Route: used to configure the AngularJS application routing (AngularJS). The function is similar to Config/Route in ASP. net mvc applications.
Filter: filters data, which is explained above.Directive: extends HTML, the most important concept in AngularJS. AngularJS is not available without direve ve.
Controller: acts like Controller in ASP. net mvc applications. The page logic is implemented in the Controller, and the model can be operated through the controller. AngularJS binds the model to the view (HTML Control) through the built-in Data-Binding mechanism)
Factory/Service/Provider/Value: provides access to the data source. For example, Restful APIs are common data sources. The Controller accesses the data source through Factory/Service/Provider/Value to perform CRUD operations on the data.
The following code implements the same functions of the above instance. The difference is that this instance creates a module (angularJS application) and adds contorroller under the module to implement the above functions. In SimpleController, we create a mers MERs (Model) and initialize the data. The View (Html control) is directly bound to the customers (Model ). Scope is the container object of all viewmodules in AngualrJS. The Controller needs to use Scope to be the container object of all viewmodules in AngualrJS. The Controller needs to access the viewModule through Scope.
This example is closer to the actual project usage than the above example.
<!DOCTYPE html>Shows the relationship between the Module and its components.
The following example uses config to configure the route module to implement a SPA instance. Create view1.html and view2.html first. The directory structure is as follows.
<div>You can use $ routeProvider to configure the routes of view1 and view2 on the current page, and the controller corresponding to each view has already been configured. View1 and view2 are displayed with ng-view marked on the current page.
At the same time, we decouple the controller and HTML tags through config. In the above example, we need to add the ng-controller tag to the html tag to use the controller. This configuration is directly completed through config.
<!DOCTYPE html>The result is as follows.
The last instance is closer to the actual project usage. We introduce Factory to initialize the data (in the actual project, you can access webAPI to obtain data to complete initialization), and Controller obtains data through Factory.
<!DOCTYPE html>The above content is a basic 60-minute getting started tutorial for AngularJs, which I hope to help you!
Articles you may be interested in:
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
