English

AngularJS Tutorial

AngularJS Applications

AngularJS - First Application

Welcome, aspiring programmers! Today, we're going to embark on an exciting journey into the world of AngularJS. As your friendly neighborhood computer teacher, I'm thrilled to guide you through your first AngularJS application. Don't worry if you've never written a line of code before – we'll take it step by step, and before you know it, you'll be creating dynamic web applications like a pro!

AngularJS - First Application

Creating AngularJS Application

Let's start with the basics. AngularJS is a powerful JavaScript framework that helps us build interactive web applications. Think of it as a magical toolbox that makes our web pages come alive!

To create our first AngularJS application, we need to set up a simple HTML file. Here's what it looks like:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <h2>Hello, {{name}}!</h2>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = 'AngularJS Beginner';
        });
    </script>
</body>
</html>

Let's break this down:

  1. We start with a standard HTML structure.
  2. The ng-app="myApp" in the <html> tag tells AngularJS that this is the root element of our application.
  3. We include the AngularJS library using a <script> tag in the <head> section.
  4. In the <body>, we have a <div> with ng-controller="myCtrl". This connects our HTML to an AngularJS controller.
  5. Inside this <div>, we have {{name}}. This is an AngularJS expression that will display the value of name.
  6. Finally, we have a <script> tag where we define our AngularJS module and controller.

Executing AngularJS Application

Now that we've created our application, let's see how to run it:

  1. Save the above code in a file named index.html.
  2. Open this file in a web browser (like Chrome or Firefox).

That's it! Your AngularJS application is now running. Isn't that easier than you thought?

Output

When you open the index.html file in your browser, you should see:

Hello, AngularJS Beginner!

Magic, right? But how does this work? Let's dive deeper!

How AngularJS Integrates with HTML

AngularJS seamlessly integrates with HTML through what we call "directives". These are special attributes that tell AngularJS to do something with a DOM element. Let's look at the main directives we used:

Directive Purpose
ng-app Defines the root element of an AngularJS application
ng-controller Specifies which controller to use for the HTML element
{{ }} Displays the value of an expression

Here's a more detailed explanation:

  1. ng-app: This directive initializes an AngularJS application. It tells AngularJS that it should take control of this part of the page. In our example, we put it on the <html> tag, making our entire page an AngularJS application.

  2. ng-controller: This directive specifies a JavaScript controller class. The controller is where we define the application behavior by defining functions and values. In our example, myCtrl is our controller.

  3. {{ }}: These double curly braces are AngularJS expressions. They tell AngularJS to evaluate the expression inside and replace it with the result. In our case, {{name}} is replaced with "AngularJS Beginner".

Now, let's look at our JavaScript code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = 'AngularJS Beginner';
});

  1. angular.module('myApp', []) creates a new AngularJS module named 'myApp'. This matches the name we used in ng-app="myApp".

  2. app.controller('myCtrl', function($scope) { ... }) defines our controller. The $scope is a special object that acts as a bridge between the controller and the view (our HTML).

  3. $scope.name = 'AngularJS Beginner' sets a property on the $scope. This is what allows us to use {{name}} in our HTML.

And there you have it! You've just created and understood your first AngularJS application. Isn't it exciting?

Remember, learning to code is like learning a new language. It might seem confusing at first, but with practice, it becomes second nature. When I first started teaching AngularJS, I had a student who was so confused by all the curly braces that he started calling it the "mustache language"! But by the end of the course, he was creating complex applications and laughing at his initial confusion.

So don't worry if everything doesn't click immediately. Keep practicing, try modifying the code (what happens if you change 'AngularJS Beginner' to your own name?), and most importantly, have fun! In our next lesson, we'll explore more AngularJS features and start building more complex applications. Until then, happy coding!

Credits: Image by storyset

Previous Tutorial:
AngularJS - MVC Architecture
Next Tutorial:
AngularJS - Directives