Welcome to part 2 of our AngularJS tutorial series! In this tutorial, we will continue to explore the features and functionalities of AngularJS to help you become more proficient in using this popular JavaScript framework.

1. Routing in AngularJS
   Routing in AngularJS is used to navigate between different views or pages in a single-page application (SPA). This is achieved using the ngRoute module, which is a part of the AngularJS library.

To use routing in your AngularJS application, you first need to include the ngRoute module in your application module:

var app = angular.module('myApp', ['ngRoute']);

You can then configure the routes in your application by using the $routeProvider service. Here’s an example of how you can configure routes in your application:

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

In this example, we have configured two routes: ‘/’ and ‘/about’. When a user navigates to the root URL (‘/’), the ‘views/home.html’ template will be loaded and the ‘HomeController’ will be used as the controller for that view. Similarly, when a user navigates to the ‘/about’ URL, the ‘views/about.html’ template will be loaded and the ‘AboutController’ will be used as the controller for that view.

1. Services in AngularJS
   Services in AngularJS are singleton objects that are used to carry out specific functions such as fetching data from a server, handling business logic, or sharing data between different parts of your application.

AngularJS provides several built-in services such as $http, $q, $routeParams, and $location. You can also create custom services using the service() or factory() methods of the module object.

Here’s an example of how you can create a custom service in AngularJS:

app.factory('userService', function() {
    var user = {
        name: 'John Doe',
        email: 'john.doe@example.com',
        age: 30
    };

    return {
        getUser: function() {
            return user;
        },
        updateUser: function(newUser) {
            user = newUser;
        }
    };
});

In this example, we have created a custom service called ‘userService’ that provides two methods: getUser() and updateUser(). The getUser() method returns the user object, while the updateUser() method updates the user object with a new user.

1. Directives in AngularJS
   Directives in AngularJS are markers on a DOM element that tell AngularJS to do something with that element or the elements within it. Directives can be used to create custom HTML elements, attributes, classes, or comments that extend the functionality of HTML.

AngularJS provides several built-in directives such as ng-repeat, ng-show, ng-hide, ng-model, and ng-click. You can also create custom directives using the directive() method of the module object.

Here’s an example of how you can create a custom directive in AngularJS:

app.directive('helloWorld', function() {
    return {
        template: '<h1>Hello World!</h1>'
    };
});

In this example, we have created a custom directive called ‘helloWorld’ that replaces the element with the directive attribute with the specified template (‘

Hello World!

‘). You can then use this directive in your HTML code like this:

<div hello-world></div>

This will display the ‘Hello World!’ message within the div element where the directive is applied.

In this tutorial, we have covered routing, services, and directives in AngularJS. These are just a few of the many features and functionalities that AngularJS offers to help you build dynamic and interactive web applications. We hope that this tutorial has been helpful in expanding your knowledge and understanding of AngularJS, and we encourage you to continue exploring and experimenting with this powerful JavaScript framework. Stay tuned for more tutorials in our AngularJS series!