AngularJS Templates, Views, Models, Controllers
Categories: Angular Angular JS
AngularJS Templates, Views, Models, Controllers
AngularJS partials, also called templates, are code sections that contain HTML code that are bound to the <div ng-view></div></div> tag shown in the index.html file earlier in this chapter. If you look back at the complete app.js file, you can see that different templateUrl values are defined for each route.
The main.html and show.html files listed next show the two defined partials (templates).
The templates contain just HTML code, with nothing special at this time. Later, we will use AngularJS’s built-in template language to display dynamic data in our templates:
<!-- chapter1/main.html -->
<div>Hello World</div>
<!-- chapter1/show.html -->
<div>Show The World</div>
As the user clicks on the different links, the value assigned to <div ng-view> is replaced with the content of the associated template files. The value of controller defined for each route references the controller component (of the MVC pattern) that is defined for each particular route.
The next sections provide a brief overview of each AngularJS MVC component and how it is used, to give you a better understanding of how AngularJS works. Unlike most JavaScript client-side frameworks, AngularJS provides the model, view, and controller components for use in all applications.
That often helps developers familiar with design patterns to quickly grasp AngularJS concepts.
AngularJS Views (MVC)
Many JavaScript client-side frameworks require you to actually define the view classes in JavaScript, and they can contain anywhere from a few to hundreds of lines of code. Such is not the case with AngularJS. AngularJS pulls in all the templates defined for an application and builds the views in the document object model (DOM) for you. Therefore, the only work you need to do to build the views is to create the templates.
Building views in AngularJS is a simple process that uses mostly HTML and CSS. The simplicity of ngularJS views is a huge time-saver when you’re building AngularJS applications.
AngularJS Models (MVC)
Many JavaScript client-side frameworks also require you to create JavaScript model classes. That is also not the case with AngularJS. AngularJS has a $scope object that is used to store the application model. Scopes are attached to the DOM. The way to access the model is by using data properties assigned to the $scope object.
The AngularJS $scope helps to simplify JavaScript applications considerably. Other JavaScript frameworks often encourage placing large amounts of business logic inside the model classes for the particular framework. Unfortunately, that practice often leads to duplicated business logic. In a large project, that can lead to thousands of lines of useless code.
AngularJS Controllers (MVC)
AngularJS controllers are the tape that holds the models and views together. The controller is where you should place all business logic specific to a particular view when it’s not possible to place the logic inside a REST service. Business logic should almost always be placed in backend REST services whenever possible; this helps to simplify AngularJS applications.
When business logic placed inside an application is used by multiple controllers, it should be placed in AngularJS non-REST services instead. Those services can then be injected into any controller that needs access to the logic.