AngularJS Controllers and Directives

AngularJS Controllers & Directives

General structure of an AngularJS app

The fastest way to include AngularJS is to simply add the “ng-app” directive (we will cover the meaning of the word “directive” soon) to the HTML tag and the minified JavaScript file of AngularJS to your page.

You can also add the module names to the ng-app declaration in the AngularJS code. The rootScope is available in the ng-app. To optimize performance we put it to the bottom of our body element:

With the “ng-app” directive we tell the page that it should use AngularJS with the HTML being the root element. You can choose another element as root if you want to.

Note: Generally speaking it is best practice to put the AngularJS script on the bottom of the page. To avoid issues when loading content, use ng-cloak. For pages with lots of bindings and fully-dynamic content however, it is sometimes advised to put it in the head to load AngularJS as fast as possible and avoid the need of using ng-cloak.

Directives

What are Directives?

A directive is a marker in your template that tells AngularJS to modify or replace code with JavaScript. AngularJS offers many pre directives, such as ng-bind or np-repeat. The fact that you can define your own directives makes AngularJS so powerful.

In this example a directive with the name “uiBack” was built. The the directive contains a return function. This function uses a scope  and an elem-parameter. When you assign a directive to a button and the button is pressed, so the return-function of the directive will be triggered. The return function will send an alert-signal with the text “Going Back!” to the HTML page.

We’ve assigned the button a “uiBack” directive as you can see in the example above. Attributes like “ui-back” will be automatically converted into a camelCase syntax like “uiBack”.
The button is now bonded with the directive, which was created by us. So when you click the button the function of the directive will be triggered.

Directive return

The directive can return as an object and takes a number of parameters. The most important parameters are restrict, replace, transclude, template, templateUrl and link. In this example you can see how to use them:

Now I would like to explain the single parameters. First of all let’s take a look to the parameter “restrict”. With restrict the use of an element can be restricted. Behind the word restrict follow letters which have meanings of their own:

Parameter restriction table
The function of the attributes can you see in code below:

  • The parameter “replace” replaces the mark in DOM.
    The parameter “transclude” allowed the DOM Content copied to the directive.
    The parameter “template” allowed the added hypertext marking declaring.

With directives you also can modify existing DOM elements expand your HTML code.
With the following example you can add a data attribute with a JSON hash:

You can add this html tag so often do you like. Keep in mind that names are converted into CamelCase syntax. A tag like will in AngularJS be named to userProfile.

Controller

A Controller is used to store functions and bind variables for the view. In AngularJS, a Controller is defined by a JavaScript constructor function. In the following example we define a “UserController” and pass the variable “greeting” to it. Now you can access the variable from the view.

Also, you need to add the controller to the view like the following example. With the {{greeting}} you can access the greeting variable from the controller, also you can use an other spelling you can add the ng-bind directive to the html tag like ng-bind=”greeting”.

You can also define functions in the controller to modify the DOM. You can trigger the function from the view, for Example with a ng-click. Here is the definition of defining a function in the controller:

Nested Controllers

Sometimes you need to add a controller into an other controller.
Here an example:

In this example the two controllers have a variable with the same name, in this case“name”. In each controller you can access then only the defined variable from the controller. But when you have on variable name defined in only one controller you can access the variable in both controller. With functions it’s the same behavior. In the next session we talk more about scopes.

Scopes

In AngularJS you have two types of scopes the $scope and the $rootScope. The $scope is only available in one controller and the $rootScope is global available in all controllers and in the complete view. The rootScope is available inside the ng-app directive.

AngularJS-Scopes

You can add a variable to a $scope / $rootScope with:
$scope.message = “Hello”
$rootScope.message = “Hello”

Filters

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.

Build a search with filters

You can filter values from your ng-repeat directive. AngularJS has a some build in filters for this tasks. At first you need to implement a search field and add the filter with the model name to the ng-repeat.

This is all what you need to implement a search in a AngularJS project. So see, that’s very easy. You can also build your own custom filters with AngularJS.

Example for a custom filter:

Cut “Hello World” with this filter. You see with AngularJS it is really easy to write your own custom filter, just a few lines of code, Fantastic!

Conclusion

AngularJS has some really powerful builtin filters, directives makes the html code cleaner. It’s very easy to create controllers, directives or filters. With the custom filters you can create a lot of nice features. With Controllers you can add functions to your html code and make your site very powerful without a backend service like node.js or Ruby on Rails.

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.