Friday, 9 August 2019

AngularJS Directives and Controllers


Fundamental AngularJS Directives and Controllers


An AngularJS module has two sections to it:

• A module can characterize its own controllers, administrations, manufacturing plants, and mandates. These are capacities and code that can be gotten to all through the module.

• The module can likewise rely upon different modules as conditions, which are characterized at the point when the module is instantiated. This means AngularJS will proceed to discover the module with that specific name, and guarantee that any capacities, controllers, administrations, and so forth characterized in that module are made accessible to all the code characterized in this module.

This is how we define a module named notesApp:
angular.module('notesApp', []);

angular.module('notesApp');

This line of code tells AngularJS to find an existing module named notesApp, and to
make it accessible to utilize, include, or adjust in the present document. same module over various records and add code to it.

Angular JS Development
Angular JS Development


Creating Our First Controller:

 We perceived how to make modules, yet what do we do with them? Up until this point, they have recently been void modules. We should now investigate controllers. Controllers in AngularJS are our workhorse, the

JavaScript capacities that perform or trigger most of our UI-situated work. A few
of the normal obligations of a controller in an AngularJS application include:

• Fetching the correct information from the server for the current UI

• Deciding which parts of that information to show to the client

• Presentation rationale, for example, how to show components, which parts of the UI to appear, step by step instructions to style them, and so forth.

• User associations, for example, what happens when a client clicks something or how a content information ought to be approved

An AngularJS controller is quite often straightforwardly connected to a view or HTML. We will never have a controller that isn't utilized in the UI (that sort of business rationale goes into administrations). It goes about as the passage between our model, which is the information that drives our application, and the view, which is the thing that the client sees and connects with. So how about we investigate how we could approach making a controller for our notesApp

Angular Snippet
Angular Snippet

Module:


<html ng-app="notesApp">
<head><title>Hello AngularJS</title></head>
<body ng-controller="MainCtrl">
Hello {{1 + 1}}nd time AngularJS
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
// Controller-specific code goes here
console.log('MainCtrl has been created');
}]);
</script>
</body>
</html>

Dependency Injection Syntax and AngularJS


The notation that we have used is one of the two ways in which we
can declare AngularJS controllers (or services, directives, or filters).
The style we have used (and will use for the remainder of the book),
which is also the recommended way, is safe-style of Dependency Injection,
or declaration. We could also use:

angular.module('notesApp', [])
.controller('MainCtrl', function() {
});

and it would work similarly, but it might cause problems when we
have a build step that minifies our code.



Now that you have understood basics of Angular JS, Check out the Angular JS internship by Surya Informatics Solutions , a trusted internship company with a network of more than 250,000 satisfied Angular JS Developers spread across globe.




FOLLOW US ON : YoutubeTwitterFacebookLinkedin