AngularJS self-learning path -- first understanding AngularJS and Data Binding

AngularJS self-learning path -- first understanding AngularJS and Data Binding
What is AngularJS?

AngularJS official documentation introduces it in this way. Client technologies fully written in JavaScript. It works with other long-history Web technologies (HTML, CSS, and JavaScript) to make Web Application Development easier and faster than ever before.
AngularJS is mainly used to build single-page Web applications. It makes it easier to build interactive modern Web applications by increasing the abstraction level between developers and common Web application development tasks.
AngularJS's Development Team described it as a structured framework for building dynamic Web applications.
AngularJS makes developing Web applications very simple and reduces the difficulty of building complex applications. It provides a series of advanced functions that developers often use in modern Web applications, such:

Decoupling application logic, data models, and views Ajax Service Dependency Injection Browsing History (enables bookmarks and forward and backward buttons to work as in common Web applications) Test More functions AngularJS is open-source

Recently, when I was playing github, I saw some projects where license is MIT. I thought it was MIT (MIT). When I asked my colleagues, I realized that MIT means that you can contribute code to AngularJS, make it better. For more information about contribution code, see the "Contribution code" section on AngularJS's official website. I don't know the official website of AngularJS, but Baidu (I never remember the official website, but Baidu ).

The first AngularJS program -- Hello World

<Script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> Hello {{ name }}

Although this example is not very interesting, it shows one of the most basic and impressive functions of AngularJS: data binding.
AngularJS uses a completely different solution. It creates a real-time template to replace the view, instead of merging the data into the template and then updating the DOM. Values in any independent view component are dynamically replaced. This function is one of the most important functions in AngularJS. It also makes it possible to write Hello World without any compress.
To implement this function, you only need to reference angular. js on the HTML page and explicitly set the ng-app attribute on a DOM element. Ng-app attribute declaration all content contained by it belongs to this AngularJS application, which is why we can nest AngularJS applications in Web applications. Only elements contained by DOM elements with ng-app attributes will be affected by AngularJS.
Automatic Data Binding allows us to understand the view as a ing of the model status. When the data model of the client changes, the view can reflect these changes without writing any custom code.
In MVC (Model View Controller, Model? View? In the world of controllers, controllers do not have to worry about rendering views. In this way, we do not have to worry about how to separate the view and controller logic, but also make the test simple and pleasant.

Best practices for Data Binding

Because of the characteristics of JavaScript itself and its different processing methods for transferring values and references, it is generally considered that in a view, the object attributes instead of the object itself are used for reference binding, is the best practice in Angular.

<Script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> Hello {{ clock.now }}! <script type="text/javascript" src="js/app.js"></script>

In this example, updating the value of clock. now is a better choice than updating $ scope. clock every second.

// In the app. function MyController ($ scope) {$ scope. clock = {now: new Date ()}; var updateClock = function () {$ scope. clock. now = new Date ()}; setInterval (function () {$ scope. $ apply (updateClock) ;}, 1000); updateClock ();};