First, Angularjs 1, Angularjs concept
[1] Angularjs's official document describes it as such. Client-side technology written entirely using JavaScript. Used in conjunction with other time-honored web technologies (HTML, CSS, and JavaScript) makes Web application development simpler and faster than ever before.
[2] Angularjs is primarily used to build a single page Web application. It makes building interactive, modern web applications easier by increasing the level of abstraction between developers and common Web application development tasks.
[3] Angularjs's development team described it as a structured framework for building dynamic Web applications.
2, the model used Angularjs enhances HTML through the native Model-view-controller (MVC, model View Controller) feature. The results show that this option can quickly and cheerfully build an impressive and expressive client application.
3, angularjs file size The ANGULARJS team attaches great importance to the size of the frame file after compression, so that it will not pay too much extra cost (when writing this book, the volume of the file is compressed at around 90KB)
4. License
Angularjs source code hosted on the GitHub, you can get free. It is based on the MIT license release, which means you can contribute code for ANGULARJS to make it better.
second, data binding and the first ANGULARJS Web application
1. Hello world-Data Binding
1. Hello World-Data BindingDownloaded https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js locally
<! DOCTYPE html>
<html ng-app>
<head>
<script src = "js / angular.js"> </ script>
</ head>
<body>
<div ng-controller = "MyController">
<h1> Hello {{clock}}! </ h1>
</ div>
<script type = "text / javascript" src = "js / app.js"> </ script>
</ body>
</ html>
apps.js code is as follows:
angular.module ('myApp', [])
.run (function ($ rootScope) {
$ rootScope.name = "Joyce";
});
2. Data Binding in AngularJS [1] AngularJS creates real-time templates instead of views, instead of merging data into the template and updating the DOM. The values in any individual view component are dynamically replaced.
[2] To achieve the above functions, you only need to explicitly set the ng-app attribute. The ng-app attribute declares that all the content contained in it belongs to this AngularJS application. Only the elements contained in the DOM element with the ng-app attribute are affected by AngularJS influences.
[3] Automatic data binding allows us to understand views as a mapping of model states. When the client's data model changes, the view can reflect those changes, and it doesn't need to write any custom code to work.
[4] AngularJS records the value of the data contained in the data model at any specific point in time, not the original value. When AngularJS thinks that a value may change, it runs its own event loop to check if the value becomes "dirty". If the value has changed since the last event loop ran, it is considered a "dirty" value. This is how Angular can track and respond to changes in the application. This process is called dirty checking. Dirty checks are an effective way to check changes in the data model. When there are potential changes, AngularJS performs dirty checks in the event loop to ensure data consistency.
Contrast: If you use KnockoutJS, a framework that listens to data changes by binding event listeners to the data model, this process will become more complicated and inefficient. Handling event merging, dependency tracking, and a large number of event firing is very complex and can cause additional issues in terms of performance.
3. Data Binding Best Practice Notes in AngularJS Authoritative Tutorial (1-2)
<! DOCTYPE html>
<html ng-app>
<head>
<script src = "js / angular.js"> </ script>
</ head>
<body>
<div ng-controller = "MyController">
<h1> Hello {{clock}}! </ h1>
</ div>
<script type = "text / javascript" src = "js / app.js"> </ script>
</ body>
</ html>
The app.js code is as follows:
function MyController ($ scope, $ timeout) {
var updateClock = function () {
$ scope.clock = new Date ();
$ timeout (function () {
updateClock ();
}, 1000);
};
updateClock ();
};
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
