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.

Top Blogs
Angular and Node JS difference Published at:- The top 5 new features of Angular did you know Published at:- Introduction to AngularJS Published at:- Single-Page Applications and Bootstrapping the Application in Angular JS Published at:- Dependency Injection and AngularJS Routes Published at:- AngularJS Templates, Views, Models, Controllers Published at:- Integrating AngularJS with Other Frameworks Published at:- Testing AngularJS Applications in the IDE Published at:- End-to-End Testing with Protractor Published at:- AngularJS Views and Bootstrap Published at:- Adding a New Blog Controller Published at:- Adding a New Blog Template In Angular JS Published at:- Ways to Communicate with REST Services Published at:- Services and Business Logic and Handling User Authentication in Angular JS Published at:- Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS Published at:- AngularJS Security : why we are covering security in a book on AngularJS Published at:- MEAN Cloud and Mobile, Local Deployment and Installing Node.js, npm, and MongoDB in Angular Published at:- Angular 4 Questions - Angular 4 Quiz (MCQ) Published at:- AngularJS MCQ Quiz Questions with Answer Part 2 Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- AngularJS MCQ Quiz Questions with Answer Published at:-
R4Rin Team
The content on website is created by expert teams.