AngularJS-getting started, angularjs
What is AngularJS?
Now that we can find this log, we have already learned about AngularJS.
AngularJS is a client technology written in JavaScript. It works with Web technologies (HTML, CSS, and JavaScript) to make Web Application Development easier and faster than ever before.
At the beginning of learning, we have to have learning tools. We recommend that you use vs here. The version does not matter to the demo below. I will basically use vs2013 for development here.
After talking about this, let's write a small demo and start our magical AngularJS journey.
1. First download package: http://files.cnblogs.com/files/xiaowei0705/angular.min.js
2. Create a page and write the following code:
<! Doctype html>
<Html ng-app>
<Head>
<Script src = "Scripts/angular. min. js"> </script>
</Head>
<Body>
Name: <input type = "text" ng-model = "yourname" placeholder = "Enter name">
<Hr>
Hello, {yourname | 'wei '}}!
</Body>
</Html>
Running result: the page can be changed automatically without any js processing!
This example has the following important notes:
<input ng-model="yourname" />Bind toyourname.yournameAdd model variables to greeting text.Now, try to enter your name in the input box. The name you entered will be updated and displayed in the greeting. This is the concept of two-way Data Binding in AngularJS. Any changes in the input box are immediately reflected in the model variable (in one direction), and any changes to the Model Variable are immediately reflected in the greeting text (in another direction ).
AngularJS Application AnalysisThis section describes the three components of AngularJS applications and explains how they are mapped to Model-View-controller design patterns:
Templates)A template is a file written in HTML and CSS to display the view of an application. You can add new elements and attribute tags to HTML as instructions of AngularJS compiler. AngularJS compiler is fully scalable, which means that you can build your own HTML Tag in HTML through AngularJS!
Application Logic and Behavior)The logic and behavior of the application are controllers defined by you using JavaScript. AngularJS is different from standard AJAX applications. You do not need to write listeners or DOM controllers because they are already built into AngularJS. These features make your application logic easy to write, test, maintain, and understand.
Model Data)The model is extended from the attributes of AngularJS scope objects. The data in the model may be Javascript objects, arrays, or basic types. This is not important. Importantly, they all belong to AngularJS scope objects.
AngularJS maintains bidirectional synchronization between the data model and the UI of the View Interface through the scope. Once the model status changes, AngularJS will immediately refresh and reflect it in the view interface, and vice versa.
AngularJS also provides some very useful service features: What is the code doing?ng-appCommand:
ng-appThe directive marks the scope of the AngularJS script.Addng-appAttribute indicates the entireAll are AngularJS script scopes. You can also useng-appCommands, such<div ng-app>The AngularJS script is only in<div>.
AngularJS script Tag: <script src="lib/angular/angular.js"></script>
This line of code is loaded into the angular. js script. After the browser loads the entire HTML page, the angular. js script is executed.ng-appCommand HTML tag, which defines the scope of AngularJS applications.
Expression bound with double braces: <p>Nothing here {{'yet' + '!'}}</p>
This line of code demonstrates the core function of the AngularJS template-binding, which consists of double braces{{}}And expressions'yet' + '!'.
This binding tells AngularJS to calculate the expression and insert the result into the DOM. We will see that the DOM can be updated in real time as the result of the expression operation changes.
AngularJS expression Angular expression is a code snippet similar to JavaScript. AngularJS expressions only run in AngularJS scope, rather than in the entire DOM.
Source code: http://files.cnblogs.com/files/xiaowei0705/Web_Demo_001.rar
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
