Home > Developer > Web Develop
The first time I heard Angularjs was in a chat with a friend. The topic we discussed at that time was the current popular JS framework. Because a friend is a front-end he casually said Angularjs asked me whether I have heard. Of course I don't know what to do. Friends say that it is used to bind data. My first feeling is that it's similar to knockout. I don't know anything about it. It was not until you encountered a very complex page logic in a project. The pages at that time were very complex and much more logical. Writing logic and hierarchy is confusing. I was wondering if there was a previous frame that would layer the business logic like the back-end MVC?
So hold this question to Google search. Angular was found. I mean, isn't that the framework that I talked about before? Find out more about this he is too NB. A look is actually Google produced. Instantly think this is an artifact ah. It's a front-end JS framework for back-end developers. Nonsense is not much to say directly on the code. If you have used a JS frame like knockout. You can read the meaning of the following code at a glance.
First quote JS directly
It's written here. The simplest structure of a angular application
// Here's a ng-app you don't have to know what this is. First understand for scopes Hello {{' world '}}! </body>// double quotation marks are the template syntax for angular. You can insert data from anywhere
Next I say angular hierarchy it is divided into "controller", "Behavior (Behavior)", "View", "service", "model", to which I believe that the development of the end of the positive seconds to understand. This is MVC. Yes, that's the way MVC is consistent with our idea of developing back-end programs.
Now, let's go ahead and talk about the core thing. The controller will transform the above code as follows
<body ng-app= "controllerAsExample" >
<div id= "Ctrl-as-exmpl" ng-controller= "SettingsController1 as Settings" > <input type= "text" Ng-model= "Settings.name"/> [<a href= "" ng-click= "Settings.greet ()" >greet</a>]<br/> Contact : <ul> <li ng-repeat= "contact in settings.contacts" > <select ng-model= "Contact.type" > <option>phone</option> <option>email</option> </select> <input Type= "text" ng-model= "Contact.value"/> [<a href= "" ng-click= "settings.clearcontact (Contact)" >clear </a> | <a href= "" ng-click= "settings.removecontact (Contact)" >X</a> " </li> <li>[<a href= "" ng-click= "Settings.addcontact ()" >add</a>]</li> </ul></div>
Angular.module (' Controllerasexample ', []). Controller (' SettingsController1 ', SettingsController1);functionSettingsController1 () { This. Name = "John Smith"; This. Contacts =[{type:' Phone ', value: ' 408 555 1212 '}, {type:' Email ', value: ' [email protected] '} ];} SettingsController1.prototype.greet=function() {alert ( This. name);}; SettingsController1.prototype.addContact=function() { This. Contacts.push ({type: ' email ', value: ' [email protected] '});}; SettingsController1.prototype.removeContact=function(contacttoremove) {varindex = This. Contacts.indexof (Contacttoremove); This. Contacts.splice (Index, 1);}; SettingsController1.prototype.clearContact=function(Contact) {Contact.type= ' phone '; Contact.value= ' ';};
In the code above we created a module whose name is "" and the controllerAsExample function of this module is to invoke this controller in a "dependency-injected" manner. And the scope of the controller is through. "Behavior" is specified by "Ng-controller" on the DOM element. Inside the controller we can customize the methods and models. Models are used to store data that can now be understood. And the method is similar to the MVC action to understand. Action gets the data populated into the model by invoking the service. The model presents the page in a two-way binding way. The effect of the page is controlled by behavior, which is probably the process.
The hierarchical structure of angular is generally the case.
templates/ _login.html _feed.htmlapp/ app.js controllers/ Logincontroller.js feedcontroller.js directives/ feedentrydirective.js Services / loginservice.js feedservice.js filters/ capatalizefilter.js
But I personally recommend that the structure be layered according to the module
app/ app.js Feed/ _feed.html feedcontroller.js feedentrydirective.js Feedservice.js Login/ _login.html logincontroller.js loginservice.js gkfx/ Capatalizefilter.js
In the above introduction and description just. The approximate structure of the next Angularjs and some basic grammar are introduced. Later I will continue to follow each section to explain. such as controllers, services and so on. The above is my personal understanding and explanation of Angularjs. If there are deficiencies, please point out. Thank you.
ANGULARJS Study Notes 1
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
