Starting from 0 Learn angularjs-notes 03

Hello everyone, the first day of work today, maybe everyone is not very much want to work, I am the same ~ ~ ~ ~ ~ ~ don't want to go to work to continue to write my Angualrjs tutorial, for the benefit of everyone!!

The following are some of the main explanations today:1. Demonstrate a complete project structure 2. Meaning of the $scope 3. Modularity and Dependency injection.

I. Demonstrate a complete project structure.

The following all these code, are reproduced at @ Desert Poor autumn teacher. I reproduced it and put it on GitHub, you can go to this link to see the source code. While watching, learning, the effect of the best ~ ~ ~

Let's take a look at this.

　　

This is the directory structure that a complete ANGULARJS project should have. Let me explain what the respective meanings of each folder are.

1.CSS: Needless to say, it is to put some CSS style files.

2.framework: Here are some of the front-end frameworks (UIs), such as Bootstrap, Ueditor, and so on, that are required by third parties except Angularjs.

3.imgs: Do not say, put the picture file.

4.index.html: The main file, of course, if the project file is more, you can also create a separate folder to put pages.

5.js: Don't say more, put your own new JS file.

6.TPLS: The full name is templates, meaning the template. Part of the HTML code is placed inside. is combined with the Templateurl attribute in the ANGUALRJS Directive command.

Here we mainly look at the use of Tpls: Here the Tpls folder has a test.html file, the code is as follows:

1 <ul>2     <Li>3 First line Test4     </Li>5     <Li>6 Second line test7     </Li><Li>8 Line three test9     </Li>Ten </ul>

We also said that the file here is only part of the HTML, such as this is just a part of the UL code. Some people are strange, so what is the use of this writing, how can I use it? No hurry, let me tell you how to use:

In fact, we mentioned last class, do not know people click here , you can see the 3rd, I mentioned the directive method. What it means is to define an HTML tag, and then return the HTML content that is the UL part here.

Here's how to use the code:

1 varAppmodule = Angular.module (' app ', []);//app is the name of the NG-APP directive in HTML2 3Appmodule.directive (' Hello ',function() {//define a directive named Hello4      return {5Restrict: ' E ',6          //Template: ' <div>hi there</div> ',7Templateurl: '/tpls/test.html ',8Replacetrue9      };Ten});

The explanation for the above code is that it defines a Hello tag, which, when used, returns the contents of the test.html (using both template and Templateurl).

Why should we put the above UL content in a separate folder? Do you understand now?? Just so that when the content of the return is very large, it is good to use the link directly, so that the code looks very clear.

Two. Look at some $scope.

Let's take a look at the picture below and dive into some scope and its features:

Let's take a look at the code above: first define a controller called Helloctrl, which adds a property to $scope Greeting,greeting property is an object, add the Text property, and the value is ' Hello ', so simple. You can then call Greeting.Text directly on the page to get the value of ' Hello '. Isn't it amazing? What the hell is that $scope thing? Why is it possible to implement these functions? These are the characteristics of the following, it must have a certain understanding after reading it.

　　1. $scope is a scope and can be understood as an object.

2. The $scope provides tools and methods such as $watch () and $apply (), and so on.

3. $scope is also an execution environment (scope).

4. The child $scope can inherit the properties and methods of the parent $scope.

5. Each angular application has only one heel $scope ($rootscope, located in Ng-app).

3. Modularity and Dependency Injection

Take a look at the following code that defines the controller:

1 varMYAPP = Angular.module (' Angularapp ', []);2 3Myapp.controller (' Helloctrl ', [' $scope ',function($scope) {4$scope. Greeting = {5Text: ' Hello '6         };7     }8 ]);9Myapp.controller (' Byectrl ', [' $scope ',function($scope) {Ten         //..... One     } A]);

Do you remember the definition controller that was first explained? Use the Funciton name () {} method directly. Slowly we found that if the controller too much, so it is not good management, in order to achieve ANGUALRJS modularity, we need to change the above, then I will explain to you the meaning of this code.

Line 1th: Get the Modula name ' myApp ' for the entire page first, andAngularapp is the value Ng-app in the HTML .

Line 3rd: Define a controller with the name ' Helloctrl ';

Line 9th Ibid.

In this way, we unknowingly realized the modularity!!!

Here we only call the Controller method, and the first section mentions the directive, filter, and so on, should be called on the MyApp to implement the function of the response. Then using multiple modules to complete a project, we realized the dependency injection!!

OK, these are the 3 main modules of the use of the instructions. Hope to everyone's study has helped ... If the above notes do not understand the place, although asked me, I will certainly give you answers. I wish you a happy life!

To be Continued ~ ~

Starting from 0 Learn angularjs-notes 03