Complete Project Structure of angularjs learning notes _ AngularJS-js tutorial

This article mainly introduces the complete project structure of angularjs study notes. For more information, see the following sections: 1. demonstrate a complete project structure 2. $ scope 3. modularity and dependency injection.

1. demonstrate a complete project structure.

All the codes below are reproduced by @ Damo shaoqiu. I posted it on github. You can go to this link to view the source code. While watching and learning, the effect is better ~~~~

Let's take a look at this,

This is the directory structure that an angularjs project should have. Next I will explain the meanings of each folder.

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

2. framework: Here, we usually include front-end frameworks (UIS) required by third parties except angularjs, such as bootstrap and ueditor.

3. imgs: put an image file.

4.index.html: main file. Of course, if there are many project files, you can also create a folder to put the page.

5. js: Needless to say, put your own new js file.

6. tpls: The full name is templates, which means template. It contains some html code. It is used with the templateUrl attribute in the directive command of angualrjs.

The following describes how to use tpls: The tpls folder contains a test.html file. The Code is as follows:

 
 
  
  
  
First line test
  
  
  
Row 2 test
  
  
Row 3 test
 
 

As mentioned above, the file here is only part of html, for example, it is only part of ul code. Some people are wondering, what is the purpose of this writing? How should I use it? Don't worry. Let me tell you how to use it:

Actually, we mentioned this in the last lesson. If you don't know it, click here. You can see the directive method I mentioned in the third point. What it means is to define an html tag, and then the returned html content is the ul part here.

The specific code is as follows:

Var appModule = angular. module ('app', []); // The appModule is the name of the ng-app command in html. directive ('hello', function () {// defines an instruction named hello return {restrict: 'E', // template :'
Hi there
', TemplateUrl:'/tpls/test.html ', replace: true };});

Explanation of the code above: Define a hellotag. When this tag is used, the content of test.html is returned (either template or templateUrl is used ).

Why should we put the above ul content in a separate folder? Do you want to understand now ?? This is to directly use the link when there are a lot of returned content, so that the code looks clear.

Ii. Read some $ scope.

Let's take a look at the image below to explain in depth some scope and its features:

Let's take a look at the code above: first, a controller is defined as HelloCtrl, which adds a property greeting to $ scope, and the greeting property is an object with the text attribute added, the value is 'hello', which is simple. Then, you can directly call greeting. text on the page to get the 'hello' value. Is it amazing? So what exactly is $ scope? Why can these functions be implemented? The following are all its features. After reading these features, you must have a certain understanding of them.

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

2. $ scope provides some tools and methods, such as $ watch () and $ apply.

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

4. Child $ scope can inherit attributes and methods of parent $ scope.

5. Each Angular application has only one and $ scope ($ rootscope, located in ng-app ).

3. modularity and dependency Injection

The following code defines the controller:

var myApp = angular.module('angularApp', []);myApp.controller('HelloCtrl', ['$scope',function($scope) {    $scope.greeting = {      text: 'Hello'    };  }]);myApp.controller('ByeCtrl', ['$scope',function($scope) {    //.....  }]);

Do you still remember the definition controller that was introduced at the beginning? Directly use the funciton name () {} method. Slowly, we found that if there are too many controllers, it would be difficult to manage them. To implement angualrjs modularization, we need to replace the above Code. Then I will explain the meaning of this Code.

Row 1st: first obtain the modula name 'myapp', and angularApp is the value of ng-app in html..

Row 3: Define a controller named 'helloctrl ';

The first line is the same as above.

In this way, we can implement modularization without knowing it !!!

Here we only call the controller method, and the directive, filter, and other methods mentioned in Section 1 should all be called on myApp to implement the response function. Then we use multiple modules to complete a project, and we have implemented dependency injection !!

OK. The above describes the use of the three main modules. I hope it will be helpful to everyone's learning... If you have any questions about the notes above, I will answer them. Wish you a happy life!