The ANGULARJS framework is basically used in the front-end projects now, not knowing the framework before, but also because of recent projects, so I intend to study it well. Before the PC side, now take over is the mobile end of the project, the mobile end of the UI framework with the Ionic+vordova, no use bootstrap, mainly to do is ios+ Android app interface, ionic the framework is not too understanding, also need to take time to be well acquainted with. Angularjs study Small white One, welcome big God correction.
What is Angularjs?
In simple terms, a frame of JavaScript that is added to a Web page through a script tag. That is, when we use ANGULARJS, we need to introduce the following code.
<script src= "Http://code.angularjs.org/angular-1.0.1.min.js" ></script>
It is often recommended that you put the script at the bottom of the <body> element to increase the speed of your Web page load. Because HTML loading is not subject to script loading.
Angularjs's role?
Angularjs makes it easier to develop a modern single page application (Spas:single page applications).
angularjs bind application data to HTML elements.
Angularjs can clone and duplicate HTML elements.
Angularjs can hide and display HTML elements.
Angularjs can add code to the HTML element "behind".
ANGULARJS supports input validation.
Like now the mobile end basically uses the single page comparison, is uses the angular the route transformation to carry on. Like we now this project is also used as a single page. That is, in the main page, that is, jump pages are in the main page. Screenshot below:
Angularjs expression
The ANGULARJS expression is written in double braces: {{expression}}.
Angularjs expressions bind data to HTML, which is similar to the ng-bind instruction.
Angularjs will "output" the data at the location where the expression is written.
Angularjs expressions are like JavaScript expressions: They can contain literals, operators, and variables.
<!doctype html> <!--tag Angularjs process the entire HTML page and boot the application--> <!doctype html> <!--tag Angularjs process the entire HTML page and boot the application-->
Ng-app: this directive represents the definition of a ANGULARJS application. Usually placed behind HTML, or in the local use of Ng-app instructions, such as <div ng-app> Angularjs script only run in that Div, that is to say that from the beginning, all content is ANGULARJS management.
Ng-model: This directive refers to the binding of element values (such as the value of an input box) to an application.
Ng-bind: The directive is to bind application data to HTML views. Using the appropriate instructions, you can use Angularjs to manipulate HTML pages. Specifically how to use, let's look at the code.
When you use Ng-model to bind to a setname model variable, the corresponding SetName changes when you enter a value in the input box. Self-labeling can be tested.
About $scope explanation
What's $scope? What's the effect? How do I use it?
In simple terms, scope is a Pojo (Plainoldjavascriptobject), similar to an object, has attributes and methods, scope is a Pojo (Plainoldjavascriptobject), similar to an object, There are properties and methods, Scope provides watch () and watch () and apply () tool methods. Angularjs's MVC is all done with the help of $scope.
Characteristics: 1. Is the execution environment (or scope) of an expression
2.scope is a tree structure that is parallel to the DOM tag, and contains a scope that is a tree structure, parallel to the DOM label, and contains a rootscope at the top level.
3.scope inherits the properties and methods of the parent Rootscope inherited by the parent scope.
4. $scope can propagate events, similar to DOM, and can be propagated up or down.
5. $scope is not only the foundation of MVC, it is also the basis for implementing bidirectional binding.
Part of the Angularjs
Templates: The HTML and CSS files that are written to show the view of the application. Angularjs can build its own HTML tags in HTML!
Controller: Unlike Ajax, there is no need to write another listener or DOM controller because it is already built into the ANGULARJS. Benefits: Easy to write, test, maintain and understand.
Model data: The model is derived from the Angularjs to do with the properties of the domain object. The model's data may be JS objects, arrays, or basic types, but they all belong to the Angularjs scope object.
How do I understand the scope in ANGULARJS?
That is, a scope can be regarded as a template, the model and the controller work together as a angularjs, using scopes, as well as information in the template, data model and controller. These can help separate the model from the view, but they are synchronized when they do! Any changes to the model are immediately reflected in the view, and any changes to the view will be immediately reflected in the model.
Views: In Angularjs, a view is the mapping of a model after it is rendered through an HTML template. That is, no matter when the model changes, ANGULARJS updates the combination point in real time and updates the view.
or paste code to see, more intuitive!
<!doctype html>
Let's look at the application of controller, the controller, the controller, by manipulating the data to bind it to the HTML page.
Angularjs Modules (module) define the ANGULARJS application.
The ANGULARJS controller (Controller) is used to control ANGULARJS applications.
The NG-APP directive defines the application, and Ng-controller defines the controller. We use the above to look at:
ANGULARJS Module Definition Application:
var mymodule = angular.module ("Helloangular", []); --Control template Helloangular
ANGULARJS Controller Control Application:
Mymodule.controller ("Helloangular", [' $scope ',
function Helloangular ($scope) {
$scope. Value = {
Name: ' Jiangting '
}
]);
Understanding front-end MVC
About controller features:
1. Do not try to take controller, a controller is usually responsible for only a small block view
2. Do not manipulate DOM directly in controller, this is not its responsibility
3. Do not do the data filtering operation in the controller, Ng has the filter service
4. Do not do data formatting in the controller, Ng has a very good form control
5.controller is not called to each other, the interaction between the controllers is carried out through events, through Filter Service 4. Do not controller in the data format, Ng has a very good use of form control 5.controller is not to call each other, the controller interaction between the event, through the scope of the call
Here's how to customize the instruction system with the following code:
<!doctype html>
In directive, there are three arguments back, where the HTML tag template the middle finger is inserted. Now I'm going to write a piece of HTML code for myself and see how I can turn it into ANGULARJS.
The original static HTML code is as follows:
<ul> <li> <span>new1</span> <p>just a test page1</p> < /li> <li> <span>new2</span> <p>just a test page2</p> </li > </ul>
The revision of the ANGULARJS is as follows:
<!doctype html>
The above is a small set to introduce the basic characteristics of ANGULARJS (a), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
