Home > Developer > Web Develop
This section describes the three components of a ANGULARJS application and explains how they map to the model-view-Controller design pattern:
Templates (Templates)Templates are files that you write in HTML and CSS to show the view of your app. You can add new elements and attribute tags to HTML as instructions for the Angularjs compiler. The ANGULARJS compiler is fully extensible, meaning that by angularjs you can build your own HTML markup in HTML!
Application logic and Behavior (Behavior)The application logic and behavior are the controllers that you define with JavaScript. Angularjs Unlike standard AJAX applications, you do not need to write listeners or DOM controllers separately because they are already built into the ANGULARJS. These features make your application logic easy to write, test, maintain, and understand.
Model dataModels are derived from the properties of Angularjs scope objects. The data in the model is probably a JavaScript object, an array, or a primitive type, which is not important, and it is important that they belong to the Angularjs scope object.
ANGULARJS maintains a bidirectional synchronization of the data model and the view interface UI through scopes. Once the model state changes, ANGULARJS is immediately refreshed and reflected in the view interface, and vice versa.
In addition, ANGULARJS provides some of the most useful service features:We are now ready to write the ANGULARJS application--phonecat. This step (step 0), you will be familiar with the important source code files, learn to launch the development environment containing the ANGULARJS seed project, and run the app on the browser side.
Enter the Angular-phonecat directory and run the following command:
git checkout -f step-0 This command resets the working directory of the Phonecat project, and it is recommended that you run this command at each learning step to change the number in the command to the number that corresponds to your learning step. This command clears any changes you make in the working directory.
Run the following command:
node scripts/web-server.jsTo start the server, the command line terminal will be prompted Http Server running at http://localhost:8000 after startup, please do not close the terminal, shut down the terminal is shut down the server. Enter http://localhost:8000/app/index.html in the browser to access our Phonecat app.
Now, in the browser you should have seen our initial application, very simple, but it shows that our project is ready to run.
"Nothing here yet!" shown in the app is built from the following HTML code, which contains the key elements of Angularjs, which is what we need to learn.
App/index.html
<!doctype html> Lang="EN" Ng-app> <meta CharSet="Utf-8"> <title>My HTML File</title> <link Rel="Stylesheet" Href="Css/app.css"> <link rel= "stylesheet" href= "css/bootstrap.css" > <script src= "Lib/angular/angular.js" ></script><body><p>nothing here {' yet ' + '! '}} </p></body></HTML> ng-applang="en" ng-app>
ng-appAdded inng-appare Angularjs script scopes. Developers can also use localng-app<div ng-app><div>
Angularjs Script Tags:<script src="lib/angular/angular.js"></script>
This line of code loads the Angular.js script, and when the browser loads the entire HTML page, the Angular.js script will be executed, and the Angular.js script will look for ng-app HTML tags that contain instructions after it is run. The tag defines the scope of the Angularjs app.
Expression for double curly braces binding:<p>Nothing here {{‘yet‘ + ‘!‘}}</p>
This line of code demonstrates the core functionality of the Angularjs template-binding, which consists of double curly braces {{}} and expressions ‘yet‘ + ‘!‘ .
This binding tells Angularjs to need to operate the expression and insert the result into the DOM, and the next step we'll see is that the DOM can be updated in real time as the result of the expression operation changes.
Angularjs expressions angular expression is a JavaScript-like code fragment that Angularjs expressions run only in the scope of ANGULARJS, not throughout the DOM.
Guided ANGULARJS applicationsUsing the Ngapp directive to automatically guide the ANGULARJS application is a neat way to fit most situations. In advanced development, such as using a script to load an app, you can also use bootstrap to manually boot the Angularjs app.
The ANGULARJS application boot process has 3 important points:
- The injector (injector) will be used to create a dependency injection (dependency injection) for this application;
- The injector will create the root scope as the scope of our application model;
- Angularjs will link the DOM in the root scope, starting with the HTML tag tagged with Ngapp, and gradually processing the instructions and bindings in the DOM.
Once the Angularjs app is booted, it will continue to listen for browser HTML-triggered events, such as mouse click events, keystroke events, HTTP incoming responses, and other changes to the DOM model. Once such incidents occur, ANGULARJS will automatically detect changes and make corresponding processing and updates.
The structure of the application above is very simple. The template package contains only one instruction and one static binding, and the model is empty.
Analysis of 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
