AngularJS - In-line Application

Introduction

Hello there, future AngularJS maestros! I'm thrilled to be your guide on this exciting journey into the world of AngularJS in-line applications. As someone who's been teaching programming for more years than I care to admit (let's just say I remember when floppy disks were actually floppy), I can assure you that by the end of this tutorial, you'll be creating your first AngularJS in-line application with confidence.

What is an In-line Application?

Before we dive into the code, let's understand what we mean by an "in-line application." Imagine you're at a buffet (stick with me here, I promise this analogy will make sense). An in-line application is like having all your favorite dishes on one plate – everything you need is right there, ready to go. In AngularJS terms, this means we're going to write our entire application within a single HTML file. No separate JavaScript files, no external modules – just pure, unadulterated AngularJS goodness.

Setting Up Your First In-line Application

Step 1: The HTML Skeleton

Let's start with the bare bones of our HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My First AngularJS In-line App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

This might look familiar if you've done any web development before. If not, don't worry! We're simply setting up a basic HTML document and including the AngularJS library from a Content Delivery Network (CDN). Think of it as inviting AngularJS to our coding party.

Step 2: Adding the ng-app Directive

Now, let's tell AngularJS where our application lives:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS In-line App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

We've added ng-app="myApp" to the <html> tag. This is like putting a big sign on your house saying, "AngularJS lives here!" The myApp part is the name we're giving to our application.

Creating Your First Controller

What's a Controller?

In AngularJS, a controller is like the brain of your application. It manages the data and behavior of a specific part of your app. Let's create one!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS In-line App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.greeting = "Hello, AngularJS World!";
        });
    </script>
</body>
</html>

Let's break this down:

We've added ng-controller="MainController" to the <body> tag. This tells AngularJS which part of our HTML is controlled by this controller.
Inside the <script> tags, we create our application module with angular.module('myApp', []).
We then define our controller using app.controller(). The $scope parameter is how we pass data between the controller and the view (our HTML).
We set a greeting property on $scope. This makes it available in our HTML.
In the HTML, we use {{greeting}} to display the value of greeting.

Adding User Interaction

Let's make our app a bit more interactive by adding a button that changes the greeting:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS In-line App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>
    <button ng-click="changeGreeting()">Change Greeting</button>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.greeting = "Hello, AngularJS World!";
            $scope.changeGreeting = function() {
                $scope.greeting = "Greetings, Earthling!";
            };
        });
    </script>
</body>
</html>

Here's what's new:

We've added a button with the ng-click directive. This tells AngularJS to call the changeGreeting() function when the button is clicked.
In our controller, we've defined the changeGreeting() function on $scope. This function changes the value of greeting.

Data Binding in Action

One of the most powerful features of AngularJS is two-way data binding. Let's see it in action:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS In-line App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>
    <input type="text" ng-model="name">
    <p>Hello, {{name}}!</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.greeting = "Welcome to our AngularJS App!";
            $scope.name = "Anonymous";
        });
    </script>
</body>
</html>

In this example:

We've added an input field with ng-model="name". This binds the input's value to the name property on our $scope.
We display the value of name using {{name}} in our paragraph.
As you type in the input field, you'll see the greeting update in real-time. That's the magic of two-way data binding!

Conclusion

Congratulations! You've just created your first AngularJS in-line application. We've covered the basics of setting up an AngularJS app, creating a controller, handling user interactions, and implementing two-way data binding. Remember, like learning any new skill, mastering AngularJS takes practice. So don't be afraid to experiment, break things, and learn from your mistakes. That's how we all became the developers we are today!

Here's a table summarizing the key AngularJS directives we've used:

Directive	Purpose
ng-app	Defines and bootstraps an AngularJS application
ng-controller	Specifies a controller for a section of your application
ng-click	Specifies a function to run when an element is clicked
ng-model	Binds an input, select, or textarea to a property on the scope

Keep coding, keep learning, and most importantly, have fun! Remember, every expert was once a beginner. Your AngularJS journey has just begun!

Credits: Image by storyset

Previous Tutorial:

AngularJS - Upload File

Next Tutorial:

AngularJS - Nav Menu