Home > Developer > Web Develop
Contact, learning Angularjs has been three months, with the deepening of learning, some things just start not understand, now began to slowly understand. So, began to organize these months of study results. Or forget about it again ...
Beginner angular, is to see Mu class nets desert poor autumn teacher taught gramming, the following is a reference to the tutorial, as well as their own collation, if there are similarities, Mo strange mo ...
Step into the chase. To learn angular, we must first understand, know and master its four core characteristics.
First, theMVC pattern
Model: Is the part of the application that handles application data logic, and typically the model object is responsible for accessing the data in the database.
View: The interface that the user sees and interacts with, which is the equivalent of a page composed of HTML elements.
Controller: Is the part of the application that handles user interaction. usually the controller is responsible for reading data from the view, controlling user input, and sending data to the model.
MVC benefits: Clear responsibilities, code modularity, it can handle many different views of the application, can be reused. Later maintenance is convenient.
ANGULARJS MVC is implemented with the help of $scope ( scope ).
Ii. modularity and Dependency Injection
Angular application, it can be said that everything is starting from the module, the next five major modules,
The corresponding is routing, filtering, instruction, service, controller.
Introduction Method:
<!DOCTYPE HTML><HTMLNg-app= "MyApp"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <Script> //[] can rely on angular built-in modules, or custom module injection, used in routing, instructions, services. Concrete also have to rely on their own practice after understanding. varMyapp=Angular.module ('MyApp',['Ngroute']); //ControllerMyapp.controller ('name', function(){ }); //instructionmyapp.directive ('name', ["', function(){ //Runs during compile return { //name: ", //Priority:1, //Terminal:true, //scope: {},///{} = Isolate, true = child, false/undefined = no change //controller:function ($scope, $element, $attrs, $transclude) {}, //require: ' Ngmodel ',//Array = multiple requires,? = optional, ^ = Check parent Elements //restrict: ' A ',//E = Element, A = Attribute, C = Class, M = Comment //Template: ", //templateurl: ", //Replace:true, //Transclude:true, //compile:function (telement, tattrs, function transclude (function (scope, CLONELINKINGFN) {return function linking ( Scope, Elm, Attrs) {}}),Link:function($scope, IELM, Iattrs, controller) {}}; }]); </Script> </Body></HTML>
Third, instruction
Instruction is one of the most meaningful features in angular, and it is also a difficult point. First familiar with the next few articles specific detailed.
<!DOCTYPE HTML><HTMLNg-app= "MyModule"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <Hello></Hello> <DivHello></Div> <Divclass= "Hello"></Div> <!--Directive:hello - <Div></Div> <Script> varMyApp=Angular.module ('MyModule',[]); Myapp.directive ("Hello", function() { return{restrict:'AEMC', Template:'<div>hi everyone!</div>', replace:true } }); </Script> </Body></HTML>
Four, two-way data binding
Let's look at one-way data binding.
The process is like this, first of all, to write the template plus the data from the server to join together, through the data binding mechanism to generate a piece of HTML tags, and then to display the label.
Its disadvantage: Once the HTML tag is generated, it cannot be changed, if the element is changed, or the new data update, but also to replace it again, wasting time, occupy the running memory.
Then look at two-way data binding.
The idea is that the view and the data correspond, and the data model changes when the contents of the view change, and the view changes as the data model changes.
Bi-directional data binding is often used in scenarios where forms are applied ....
Core features finishing, a bit of water, followed by five modules ... Please look forward to! Hey, hey.
On the core characteristics of ANGULARJS learning and finishing---
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
