This article mainly introduces you to the relevant knowledge of angularjs. Friends who are interested should take a look. AngularJS extends HTML with new attributes and expressions. AngularJS can build a single page application (SPAs: Single Page Applications).
Introduction to angularjs
AngularJS is a JavaScript framework. It can be added to HTML pages via the
Note We recommend placing the script at the bottom of theelement.
This will increase page loading speed because HTML loading is not subject to script loading.
Download each angular.js version: https://github.com/angular/angular.js/releases
AngularJS extends HTML
AngularJS extends through ng-directives HTML.
ng-app directive defines an AngularJS application.
ng-model directive binds element values (such as input field values) to the application.
The ng-bind directive binds application data to an HTML view.
AngularJS Example
名字 :
Hello {{name}}
Example explanation:
When the web page is loaded, AngularJS will automatically start. The
ng-app directive tells AngularJS that the
element is the "owner" of the AngularJS application.
ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the application variable name to the innerHTML of a paragraph.
Note If you remove the ng-app directive, HTML will display the expression directly without calculating the result of the expression.
What is AngularJS?
AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).
AngularJS binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and show HTML elements.
AngularJS can add code "behind" HTML elements.
AngularJS supports input validation.
AngularJS Directives
As you can see, AngularJS directives are HTML attributes prefixed with ng.
ng-init directive initializes AngularJS application variables.
AngularJS Example
姓名为
Note HTML5 allows extended (homemade) attributes, starting with data-.
AngularJS attributes start with ng-, but you can use data-ng- to make the page valid for HTML5.
With valid HTML5:
AngularJS example
姓名为
AngularJS expression
AngularJS expression is written within double curly braces: {{ expression } }.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" data where the expression is written.
AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.
Instance{{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS instance
我的第一个表达式: {{ 5 + 5 }}
AngularJS application
AngularJS module (Module) defines the AngularJS application.
AngularJS Controller (Controller) is used to control AngularJS applications.
The ng-app directive defines the application, and ng-controller defines the controller.
AngularJS Example
名:
姓:
姓名: {{firstName + " " + lastName}}
AngularJS module definition application:
AngularJS module
var app = angular.module('myApp', []);
AngularJS controller control application:
AngularJS controller
app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });
Related recommendations:
AngularJS fuzzy query function implementation code
AngularJS implementation of shopping cart all-select and reverse-select function example sharing
AngularJS implements the word limit reminder function of the input box
The above is the detailed content of AngularJS tutorial and example code analysis. For more information, please follow other related articles on the PHP Chinese website!