Internet technology is always updating rapidly, as the so-called, last year today in this door, the face of the peach blossoms are red, and the face of the human face does not know where to go, and the peach blossoms are still smiling. Changes in technology are driving changes in this development model; an important idea in the Book of Changes is: change. The world is changing all the time, so we must keep learning to adapt to this change. Now we not only need to keep learning, we also need to learn quickly and master new knowledge quickly to cope with the continuous updating of technology.
The history of AngularJS is not much introduced. In essence, AngularJS is not a new invention, but an improvement. Its foundation is still javascript, and engineers have written many functions with js, thus forming a framework and a new development model. So as long as you understand the basic technology of JS, html, css friends, anjularjs is very easy to use.
All the following codes are based on Asp.net as a display platform, and let us understand how AngularJS is used.
The so-called, after all, came to light on the paper, knowing that this matter must be practiced. Direct code to speak.
All the following code engineering files: http://download.csdn.net/detail/yysyangyangyangshan/9691429
First use an angularJS js file (included in the project, you can download the entire project file), the first angularJS program
Code
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta charset = "utf-8">
<script src = "/ Scripts / angular.min.js"> </ script>
</ head>
<body>
<div ng-app = "">
<p> Name: <input type = "text" ng-model = "name"> </ p>
<h1> Hello {{name}} </ h1>
</ div>
</ body>
</ html>
The effect is as follows
AngularJS 001: First acquaintance
There are several special properties here,
The ng-app directive defines an AngularJS application.
The ng-model directive binds element values (such as input field values) to the application.
The ng-bind directive binds application data to HTML views.
AngularJS directive
ng- is a prefix, usually an instruction.
For example, look at how to initialize the value,
<!-anjularjs initialization->
<div ng-app = "" ng-init = "firstName = 'yys'">
<p> Name is <span ng-bind = "firstName"> </ span> </ p>
</ div>
effect:
AngularJS 001: First acquaintance
ng-init is an instruction that initializes a value.
Above we noticed that it starts with ng-, this is a common html attribute,
AngularJS also supports the extension of HTML5, which uses data-ng at the beginning, such as
<!-Html5 extension->
<div data-ng-app = "" data-ng-init = "firstName = 'yys'">
<p> Name is <span data-ng-bind = "firstName"> </ span> </ p>
</ div>
effect
AngularJS 001: First acquaintance
AngularJS expression
The expression format is: {{expression}}.
The following code
<!-Expression->
<div ng-app = "">
<p> My first expression: {{1 + 1-3 + 5}} </ p>
</ div>
effect
AngularJS 001: First acquaintance
AngularJS application
<!-Application->
<div ng-app = "myFirstApp" ng-controller = "myFirstCtrl">
First name: <input type = "text" ng-model = "firstName"> <br>
Last Name: <input type = "text" ng-model = "lastName"> <br>
<br>
Name: {{firstName + "" + lastName}}
</ div>
<script>
var app = angular.module ('myFirstApp', []);
app.controller ('myFirstCtrl', function ($ scope) {
$ scope.firstName = "Sam";
$ scope.lastName = "Yang";
});
</ script>
effect
AngularJS 001: First acquaintance
The ng-app directive defines the application, and the ng-controller defines the controller.
Module defines the AngularJS application.
Controller (Controller) is used to control AngularJS application.
Internet technology is always updating rapidly, as the so-called, last year today in this door, the face of the peach blossoms are red, and the face of the human face does not know where to go, and the peach blossoms are still smiling. Changes in technology are driving changes in this development model; an important idea in the Book of Changes is: change. The world is changing all the time, so we must keep learning to adapt to this change. Now we not only need to keep learning, we also need to learn quickly and master new knowledge quickly to cope with the continuous updating of technology.
The history of AngularJS is not much introduced. In essence, AngularJS is not a new invention, but an improvement. Its foundation is still javascript, and engineers have written many functions with js, thus forming a framework and a new development model. So as long as you understand the basic technology of JS, html, css friends, anjularjs is very easy to use.
All the following codes are based on Asp.net as a display platform, and let us understand how AngularJS is used.
The so-called, after all, came to light on the paper, knowing that this matter must be practiced. Direct code to speak.
All the following code engineering files: http://download.csdn.net/detail/yysyangyangyangshan/9691429
First use an angularJS js file (included in the project, you can download the entire project file), the first angularJS program
Code
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta charset = "utf-8">
<script src = "/ Scripts / angular.min.js"> </ script>
</ head>
<body>
<div ng-app = "">
<p> Name: <input type = "text" ng-model = "name"> </ p>
<h1> Hello {{name}} </ h1>
</ div>
</ body>
</ html>
The effect is as follows
AngularJS 001: First acquaintance
There are several special properties here,
The ng-app directive defines an AngularJS application.
The ng-model directive binds element values (such as input field values) to the application.
The ng-bind directive binds application data to HTML views.
AngularJS directive
ng- is a prefix, usually an instruction.
For example, look at how to initialize the value,
<!-anjularjs initialization->
<div ng-app = "" ng-init = "firstName = 'yys'">
<p> Name is <span ng-bind = "firstName"> </ span> </ p>
</ div>
effect:
AngularJS 001: First acquaintance
ng-init is an instruction that initializes a value.
Above we noticed that it starts with ng-, this is a common html attribute,
AngularJS also supports the extension of HTML5, which uses data-ng at the beginning, such as
<!-Html5 extension->
<div data-ng-app = "" data-ng-init = "firstName = 'yys'">
<p> Name is <span data-ng-bind = "firstName"> </ span> </ p>
</ div>
effect
AngularJS 001: First acquaintance
AngularJS expression
The expression format is: {{expression}}.
The following code
<!-Expression->
<div ng-app = "">
<p> My first expression: {{1 + 1-3 + 5}} </ p>
</ div>
effect
AngularJS 001: First acquaintance
AngularJS application
<!-Application->
<div ng-app = "myFirstApp" ng-controller = "myFirstCtrl">
First name: <input type = "text" ng-model = "firstName"> <br>
Last Name: <input type = "text" ng-model = "lastName"> <br>
<br>
Name: {{firstName + "" + lastName}}
</ div>
<script>
var app = angular.module ('myFirstApp', []);
app.controller ('myFirstCtrl', function ($ scope) {
$ scope.firstName = "Sam";
$ scope.lastName = "Yang";
});
</ script>
effect
AngularJS 001: First acquaintance
The ng-app directive defines the application, and the ng-controller defines the controller.
Module defines the AngularJS application.
Controller (Controller) is used to control AngularJS application.
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
