This article briefly describes the ANGULARJS environment Construction + Create the application method. Share to everyone for your reference, specific as follows:
Overview
Angularjs is a JS framework developed by Google engineers, described in the official document as a client-side technology written entirely with JavaScript, used in conjunction with other time-honored web technologies (HTML,CSS, etc.), making web development simpler and more efficient. It is the author used a relatively distinctive framework, with HTML as the template language and extended HTML attributes, so that the application component development to maintain a high degree of clarity and consistency. This series of articles will briefly introduce the characteristics and usage of ANGULARJS in a practical case.
The development environment constructs
As the saying goes "Ching", we want to use ANGULARJS development Web application first thing to do is to get ANGULARJS development Library, ANGULARJS official website (https://angularjs.org/) has provided downloads. Or click here to download the site .
Get to Angularjs library file we can start, but in order to improve work efficiency, a good integrated development tool is necessary to be less, here the author uses the Webstorm. The developer tools provided by Chrome and Firefox are very handy for code debugging, and the author is using Chrome, which is also recommended here. The image below is the working interface of the Webstorm, and the reader can choose by preference.
Create a first application
Create a new project to copy the Angularjs Library folder into the project.
Next we write the first HTML5 page.
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial01_1</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div>{{"Anguar"}} </div>
</body>
</html>
We use the <script> tag to introduce the Angular.js file, open the Angular.js with the editor to see the last few lines of code:
Jqlite (document). Ready (function () {
angularinit (document, bootstrap);
});
Call the Angularinit method when the page loads, which means that when the page is loaded, the ANGULARJS is started when we introduce the Angular.js file.
The
' {{content}} ' This form is a ANGULARJS expression that is used to output content to an HTML page.
Running the HTML page in a browser, you can see the text that we output through an expression.
The ng-app instruction mentioned above can appear in the properties of any tag in the page, for example, we can put it in the second div tag:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial01_2</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div ng-app>{{"Anguar"}} </div>
</body>
</html>
Running again will find that {{"Angular app!"}} Output as is, because only the elements after the Ng-app directive are managed by ANGULARJS, so we usually put that instruction in an HTML tag and let Angularjs manage the entire page.
I hope this article will help you to Angularjs program design.
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
