Big Picture
We’ll introduce AngularJS from a 10,000-foot view and lay the foundation for what we’ll reinforce throughout the entire course (see table below). If you reach the end of the course and you have a solid grasp of figure given below and how all the pieces fit together, we’ll have succeeded as authors. If you’ve absorbed these concepts in such a way that these pieces form a vocabulary in which you start to articulate and express ways to solve your own problems, then we’ll have succeeded in a spectacular way!
| Component | Purpose |
|---|---|
| Modules | Modules serve as containers to help you organize code within your AngularJS application. Modules can contain sub-modules, making it easy to compose functionality as needed. |
| Config | The config block of an AngularJS application allows for configuration to be applied before the application actually runs. This is useful for setting up routes, dynamically configuring services, and so on. |
| Routes | Routes allow you to define ways to navigate to specific states within your application. They also allow you to define configuration options for each specific route, such as which template and controller to use. |
| Viewes | The view in AngularJS is what exists after AngularJS has compiled and rendered the DOM with all of the JavaScript wiring in place. |
| $scope | $scope is essentially the glue between the view and controller within an AngularJS application. With the introduction of the controller-as syntax, the need to explicitly use $scope has been greatly reduced. |
| Controller | The controller is responsible for defining methods and properties that the view can bind to and interact with. As a matter of best practice, controllers should be lightweight and only focus on the view they’re controlling. |
| Directive | A directive is an extension of a view in AngularJS in that it allows you to create custom, reusable elements that encapsulate behavior. You can think of directives as components or decorators for your HTML. Directives are used to extend views and to make these extensions available for use in more than one place. |
| Service | Services provide common functionality to an AngularJS application. For instance, if you have data that more than one controller needs, you would promote that data to a service and then make it available to the controllers via the service. Services extend controllers and make them more globally accessible. |
