07 Modular-ANGULARJS Basic Tutorial

0. Catalogue

• Directory
• Objective
• Body
  • 1 Why uses Angular modules why the use of modular
  • 2 Creating the Application module-creating the application module
  • 3 Loading the Application module-loading the application module
  • 4 Defining the controller-defining a controllers
  • 5 Chain definition-chaining Definitions
  • 6 Loading Module-loading modules
  • 10 Conclusion
• Statement

1. Preface

Angularjs is designed to overcome the lack of HTML in building applications. HTML is a good declarative language for static text presentation design, but it seems weak to build a Web application, so Angularjs does some work to solve the problem of static Web page technology in the construction of dynamic applications.

Angularjs is designed to simplify web app development , and the essence is simple . However, there are many angularjs tutorials at home and abroad, which focus on Angularjs's strong points, thus increasing the difficulty of angularjs learning, this tutorial tries to explain the most basic and practical content in popular language, The purpose of this tutorial is to simplify the learning process and reduce the difficulty of learning.

This series of tutorials is a summary of the translation of Chris Smith 's angualr Basics , which incorporates the blogger's own understanding and provides a simple and clear learning tutorial for everyone.

This article is the 7th module of a series of tutorials, translated from Modules.

1. Order
2. Introduction-introduction
3. Basic-basics
4. Controller-controllers
5. Scope-scopes
6. Set-collections
7. Module-modules
8. Dependency Injection-dependency Injection
9. Service-services
10. Filter-filters
11. Directive-directives
12. Instruction Scope-directive Scopes
13. Routing-routing
14. Communication-http
15. Conclusion

2. Text

In general, the purpose of the module (modules) is to achieve separation of concerns by defining public APIs, restricting behavior (functionality), and visualizing data (attributes and variables) (separation of CONCERNS,SOC). Most of the programming platforms have built-in support for modularity, so that we take it for granted without realizing it. But client-side JavaScript is not supported, and there is a lot of controversy over the benefits and drawbacks of additional solutions, such as COMMONJS, AMD.

It is important to note that angular's modular system is not modular (it does not load the source from the file or the Internet), angular provides a built-in, private, modular scheme that works like its built-in, private, dependency injection scheme. The two systems provide an impressive common infrastructure. While the use of modularity is an intrinsic capability that every developer needs to master, the question is, why do we need it?

Although modularity and dependency injection are often necessary propositions, in fact angular allows us to do many things without using modules. As of now, we have completed a series of cases that use a constructor (a function defined in the global scope and the name of the controller) without a module. With a simple setup, the ng-controller instruction looks for the controller function in the global scope and the modular system, allowing us to use the angular in a simplified way, but only to some extent.

2.1 Why uses Angular modules? (why using modularity)

We need to be proficient in its modular system so that we can go farther behind the angular base feature. Compared to the management complexity of JS objects, we should use simple methods to solve problems and find your own best practices, so this book does not want to detail the nature of modularity and dependency injection, only the modules and dependency injection content that are closely related to angular use.

So let's look at the important features that must be used with the angular module:

• Special Components-specialized component, when defining your own controllers, directives, filters and animations, we must use a modular system (Controller may be the exception, as previously mentioned)
• Dependency Injection-dependency injection, although services are ordinary JS objects and functions, the services created using the module system can simply be injected with dependencies, with dependency injection.
• external Modules-external modules, angular has a very attractive development community, a huge amount of free official plugins, third-party plug-ins, if you want to use these libraries in your application, we have to use the module system.
• configuring-load-time configuration at load time , angular's modular system provides access to the internal configuration, plug-in configuration, and we will demonstrate the latter feature in the last chapter, in the case of Configuring a custom HTTP header .
• test-testing, angular's exciting testing capabilities are based on dependency injection implementations, as well as module systems

The next chapter, we talk about services, mainly demonstrates how to provide support for customizing the definition of a JS component. This chapter explains how to define a controller to load external modules while explaining the basics of the module system.

2.2 Creating the Application module-creating the application module

A angular application usually starts with a root module, in our case the module is called the app, note that this name, though common, is often simple, not necessarily the best choice.

module.js */angular.module(‘app‘, []);

In the above case, pay special attention to the second parameter of module , although it looks like an empty array, but it is very important, if you ignore it, angular.module the behavior will have a fundamental change. Considering the rationality of the API design, when you specify the second parameter call Angular.module, the method is in Create mode, if the module named app does not exist, a module named app will be created. But the call angular.module does not specify the second parameter, it is in look-up mode, if the given name of the module exists will return the module, if not present will throw an error, remind us to note the second parameter. The case we used the right way, but we need to understand the important differences in the code. This parameter is used to import external modules, and we will illustrate this in the case of the Angular animation module.

2.3 Loading the Application module-loading the application module

In the HTML document that hosts the app, we need to tell angular to load the application module by passing the module name as a parameter to the ng-app instruction.

<!-- index.html --><body ng-app="app">  <!-- Other examples to be inserted here. --></body>

Any component that we add to the application module can be used, so let's look at how to define a controller using a module (not using the global scope).

2.4 Defining the controller-defining a controllers

moduleThe API contains some methods for defining special angular components, and as of now we are more familiar with methods controller that we use to controller create controllers. First we need to get a reference to an application module, and we need to give angular.module it a query mode without specifying a second parameter (mainly because we have created the application module above).

/* message-controller.js */var app = angular.module(‘app‘);app.controller(‘MessageController‘function($scope) {  $scope"This is a model.";});

Then we need to ng-app call our controller at some point inside the called element ng-controller .

<!-- message-controller.html --><p ng-controller="MessageController">  {{message}}</p>

The results of the compilation are: This is a model.

As you've seen, using a module to define a controller is a little trickier than global scope, but not too bad.

2.5 Chain Definition-chaining Definitions

Let's say we need to define two controllers as follows

<!-- another-message-controller.html --><p ng-controller="MessageController">  {{message}}</p><p ng-controller="AnotherMessageController">  {{message}}</p>

moduleCan be defined as a chained operation, so that we can define two controllers in a single statement.

/* chained-controllers.js */angular.module(‘app‘)  .controller(‘MessageController‘function($scope) {    $scope"This is a model.";  })  .controller(‘AnotherMessageController‘function($scope) {    $scope"This is another model.";  });

The result of the compilation is:
This is a model.
This is another model.

Note that the declaration statement for the first controller does not end with a semicolon.

If you don't like the chained style of operation, you can retrieve the calling module at any time, and of course it can be stored in a variable (as shown in the code below). If you use variables, it is best to avoid polluting global variables in Iife (call function expressions immediately) or in other closures.

/* separate-controllers.js */var app = angular.module(‘app‘);app.controller(‘MessageController‘function($scope) {  $scope"This is a model.";});app.controller(‘AnotherMessageController‘function($scope) {  $scope"This is another model.";});

You decide which style to choose, but the chain style is more popular.

2.6 Loading Module-loading modules

Animationis a new feature of angular, which is a ngAnimate standalone module named. The first step in using animations is to introduce the include module, which is the core of the angular in the source file, but distributed as a separate file, as shown below.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"> </script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/ Angular-animate.js "></script><!--above by wall, domestic with another CDN--<script src="//cdn.bootcss.com/angular.js/1.3.14/angular.js"></script><scriptsrc="//cdn.bootcss.com/angular.js/1.3.14//angular-animate.js"> </script>

It is time for us to use the second array parameter of the module method, the previous case we just passed an empty parameter, this time we declare the dependency of the module.

/* ng-animate-module.js */angular.module(‘app‘, [‘ngAnimate‘]);

In this way, we have introduced nganimate in the application. Templates in the Ng-show, Ng-hide, Ng-class and other instructions will be in the CSS and JS detection js animation, may be applied in similar to the Add, enter, leave, move, remove and other DOM events. Applying animation in DOM events does not require a template to make any changes (it feels like transparency), if the animation code is not rendered, or as a CSS or as JS through [module.animation](http://docs.angularjs.cn/api/ng/type/angular.Module) registration, the instruction code is still normal code.

<!-- ng-animate.html --><input type="checkbox" ng-model="showMessage">Check the box to show the message<h2 ng-show="showMessage">  The secret message.</h2>

The result of the compilation is:

Click on the check box above, we can see the elements between the display and hidden immediately, because we do not add animation in CSS or JS. Next, we use CSS (a good choice to create a general animation through declarative style), and of course the Animate method using jquery is good, and angular's module.animation is compatible with these methods.

Controlling the fade requires four additional CSS classes, Ng-hide-add, ng-hide-add-active, Ng-hide-remove, ng-hide-remove-active, and more.

/ * NG-ANIMATE.CSS * /.Ng-hide-add,.Ng-hide-remove{transition: AllLinear1S Display:block!important;}.Ng-hide-add.Ng-hide-add-active,.Ng-hide-remove{opacity:0;}.Ng-hide-add,.Ng-hide-remove.Ng-hide-remove-active{opacity:1;}

The results of this compilation are shown below.

Depending on your site ' s users, need to add vendor-prefixed properties for certain browsers, such As-webkit-trans Ition for IOS Safari 6. (The site caniuse.com is a good reference for browser compatibility with HTML5 and CSS3.) Please also note the as written, this animation would applied to every usage of ng-show and ng-hide in our application. For better control, we can add a custom CSS class to both the element and the CSS selectors, for example. my-class.ng-hide -add,. My-class.ng-hide-remove, and so on.
Depending on the user needs of your site, you may need to add browser engine prefixes (vendor-prefix) to specific CSS properties, such as adding-webkit-transition for iOS Safari6 (caniuse.com is a good HTML5, CSS3 Browser compatibility website). Note that this animation will be attached to any ng-show, ng-hide use, for better control, we can add custom CSS classes on elements and selectors, such as .my-class.ng-hide-add and .my-class.ng-hide-remove so on.

2.10 Conclusion

Added ngAnimate cases I want you to be sure of the importance of understanding the angular module system. And, happily, ngAnimate just beginning with the angular attachment module, you can also find more third-party open-source modules on websites like GitHub, in addition to using the official module resources. One of the most popular projects is Angularui, which provides powerful modules such as UI Router, UI bootstrap, which can be easily installed using bower, and when you get started with angular, You can also post your angular module on GitHub and Bower, waiting for you!

ngAnimateThe module shows a case of how to use the attachment module to perform a powerful function, but because of its special embedding method, no dependency injection is used. Because modules and dependency injection need to work together, the next chapter will explain dependency injection.

3. Disclaimer

Front-end development whqet, focus on front-end development, share related resources. CSDN Expert blog, Wang Haiqing hope to help you, limited to the author level limited, error inevitably, welcome to shoot Bricks!
Welcome any kind of reprint, please indicate loading, keep this paragraph text.
This article is linked in the original, http://blog.csdn.net/whqet/article/details/45074873
You are welcome to visit the Independent blog Http://whqet.github.io

07 Modular-ANGULARJS Basic Tutorial