Complete project structure of angularjs study notes_AngularJS

Today’s main explanations include the following points: 1. Demonstrate a complete project structure 2. The meaning of $scope 3. Modularization and dependency injection.

1. Demonstrate a complete project structure.

All the codes below are reproduced from @大 desertqiongqiu teacher. I reprinted it and put it on github. You can go to this link to see the source code. Watch and learn at the same time, the best effect~~~~

Now let’s take a look at this screenshot,

This is the directory structure that a complete angularjs project should have. Let me explain below what each folder means.

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

2. Framework: Here are generally some front-end frameworks (UI) required by third parties besides angularjs, such as bootstrap, ueditor, etc.

3.imgs: Needless to say, put image files.

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

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

6.tpls: The full name is templates, which means templates. What is placed inside is part of the html code. Used in conjunction with the templateUrl attribute in the directive command of angualrjs.

Let’s take a look at how to use tpls: There is a test.html file under the tpls folder here, the code is as follows:

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

We also said above that the file here is only part of the html, for example, this is just part of the ul code. Then some people are confused, what is the use of writing like this, how should I use it? Don’t worry, let me tell you how to use it:

In fact, we mentioned it in the last class. For those who don’t know, click here. You can see the third point, the directive method I mentioned. What it means is to define an html tag, and then the returned html content is the ul part here.

Let’s look at the specific usage code:

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

 appModule.directive('hello', function() { //定义一个指令，名称叫hello
   return {
     restrict: 'E',
     //template: '<div>Hi there</div>',
     templateUrl:'/tpls/test.html',
     replace: true
   };
 });

Explanation of the above code: It defines a hello tag. When using this tag, the content of test.html is returned (either template or templateUrl can be used).

Why should we put the above ul content into a separate folder? Do you understand now? ? The reason is that when there is a lot of returned content, just use the link directly to make the code look clear.

2. Look at some $scope.

Let’s take a look at the picture below to explain some scopes and their features in depth:

Let’s take a look at the above code: First, we define a controller called HelloCtrl, which adds an attribute greeting to $scope. The greeting attribute is an object, and the text attribute is added with the value 'Hello'. It's that simple. . Then you can directly call greeting.text in the page to get the value of 'Hello'. Isn't it amazing? So what exactly is $scope? Why can these functions be achieved? The following are its characteristics. After reading it, you must have a certain understanding of it.

1.$scope is a scope, which can also be understood as an object.

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

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

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

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

3. Modularization and dependency injection

Look at the following code that 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 of controller explained at the beginning? Use the funciton name(){} method directly. Slowly we discovered that if there are too many controllers, it will be difficult to manage. In order to realize the modularization of angualrjs, we need to change to the above writing method, and then I will explain to you the meaning of this code.

Line 1: First get the module name of the entire page 'myApp',,, angularApp is the value of ng-app in HTML .

Line 3: Define a controller named ‘HelloCtrl’;

Line 9 is the same as above.

In this way, we have achieved modularity unconsciously! ! !

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

OK, the above are the instructions for using these three main modules. I hope it will be helpful to everyone's study. . . If there is anything you don’t understand about the above notes, just ask me and I will definitely answer it for you. I wish you all a happy life!