The examples in this article describe the HelloWorld example of the Angularjs introductory tutorial. Share to everyone for your reference, specific as follows:
What is Angularjs?
ANGULARJS is a structural framework designed for dynamic Web applications. It lets you use HTML as the template language, and by extending the syntax of HTML, you can build your application components more clearly and succinctly. Its innovation is that, with data binding and dependency injection, it makes you no longer need to write a lot of code. These are all implemented through browser-side JavaScript, which makes it perfectly integrated with any server technology.
Angularjs Simple HelloWorld Example:
|
<! DOCTYPE html>
<!--told Angularjs Engine to start from here is Ng-app management-->
<meta charset= "UTF-8" >
<title>angularjs Example </title>
<body>
<!--Ng-model Data Model-->
<input type= "text" ng-model= ' name ' placeholder= "Yourname"/>
<!--{{}}angular expression-->
<script type= "Text/javascript" src= ' http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js ' > </script>
</body>
|
This example actually shows the ANGULARJS data-two-way binding,
The left is a one-way binding diagram of the data, usually to you Tube jquery,backbone such a framework, the right side of the ANGULARJS data two-way binding.
Model View Controller (MVC)
The core concept behind MVC is that you explicitly separate the management data (model), the application logic (the controller) from your code, and give the data to the user (view).
The view takes data from the model and displays it to the user. When a user interacts with an application by clicking or entering, the controller responds by changing the data in the model. Finally, the model layer informs the view layer, has changed, and updates the display.
In Angluar applications, the view layer is the DOM, the controller is the JavaScript class, and the model data is stored in the object properties.
ANGULARJS Data Binding
Like the jquery library, which extends to the client-side pattern, let's follow a similar style, but due to the ability to update separately the DOM portion rather than update the entire page. Here, we combine HTML strings and data, and then insert the structure into the DOM we want by setting innerHTML on the element.
It all works pretty well, but if you want to insert new data into the interface, or change data based on user input, you need to do a lot of work that is not of value, to ensure that the data in both the interface and JavaScript properties are in the normal state.
But what if we have something to do with all this work for us without having to write code? What if I could just declare that some part of the interface maps to JavaScript properties and let them sync automatically? This type of programming is called data binding. We include this functionality in angular because it's great to use MVC to eliminate code when writing views and models. Moving data automatically occurs from the vast majority of a place.
Note: The top example will show
Dependency Injection (DI)
$scope object automatically passes data binding to us. We don't need to create it by calling any function. We just asked to put it in the Hellocontroller constructor.
In the follow-up study, we found that scope is not the only thing we need. If we need data to bind it to the URL address specified by the user's browser, we need to add a scope in the constructor is not the only thing we need. If we need data to bind it to the URL address specified by the user's browser, we need to add a location object in the constructor, and that's it:
|
Functionhellocontroller ($scope, $location) {
$scope. Greeting={text: ' Hello '}
Use $location in this
}
|
We can get this effect through angular's dependency injection system. Dependency injection allows us to follow a development style that does not create dependencies in this development style, and our classes simply add what they need.
This follows a design pattern called the Dimitri Rule, also known as the minimum knowledge rule. Since Hellocontroller's task is to establish the initial value of the greeting model, this pattern means that it does not need to worry about how $scope is created and where it is found.
ANGULARJS directives
One of the best parts of angular is that you can think of the template you write as HTML. Because at the core of the framework, we've included a powerful DOM transformation engine that allows you to extend the HTML syntax so you can do it.
We've seen a number of new properties in the template file that aren't part of the HTML specification. The example includes two curly braces that are used for data binding, Ng-controller is used to specify that controller to serve the master and apprentice, Ng-model to bind an input box to the model part. We call these HTML extension directives.
Angular has a number of identifiers that help you define views for your application. These identifiers can define our common views as templates. They can explain how an application works or create reusable components.
It is not limited to angular's own identifier. You can write your own to extend HTML templates and do whatever you want.
--> --> -->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
