English

AngularJS Tutorial

AngularJS Applications

AngularJS - Notepad Application: Building Your First Web App

Hello, aspiring programmers! I'm thrilled to guide you through the exciting journey of creating your very first web application using AngularJS. As someone who's been teaching programming for over a decade, I can assure you that by the end of this tutorial, you'll have a functional notepad application and a solid understanding of AngularJS basics. So, let's dive in!

AngularJS - Notepad Application

What is AngularJS?

Before we start coding, let's understand what AngularJS is. Imagine you're building a house. AngularJS is like the framework that provides the structure and tools to make your house-building process easier and more organized. It's a JavaScript framework that helps us create dynamic web applications with less effort.

Setting Up Our Development Environment

First things first, we need to set up our workspace. Don't worry; it's simpler than setting up a real workbench!

  1. Open your favorite text editor (I recommend Visual Studio Code for beginners).
  2. Create a new folder called "AngularJS-Notepad".
  3. Inside this folder, create three files:
    • index.html
    • app.js
    • style.css

Creating the HTML Structure

Let's start with our index.html file. This is like the blueprint of our house.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
    <title>AngularJS Notepad</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="NotepadController">
    <h1>My Notepad</h1>
    <textarea ng-model="noteContent"></textarea>
    <p>Character count: {{noteContent.length}}</p>
</body>
</html>

Let's break this down:

  • ng-app="notepadApp": This tells AngularJS that this is the root of our application.
  • ng-controller="NotepadController": This specifies which controller should manage this part of the page.
  • ng-model="noteContent": This binds the textarea to a variable called noteContent in our controller.
  • {{noteContent.length}}: This is an expression that displays the length of our note.

Styling Our Application

Now, let's add some basic styling to make our notepad look nice. In your style.css file, add:

body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

h1 {
    color: #333;
}

This CSS will center our content, set a nice font, and style our textarea and heading.

Creating the AngularJS Application

Now for the exciting part - let's bring our notepad to life with AngularJS! In your app.js file:

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

app.controller('NotepadController', function($scope) {
    $scope.noteContent = '';
});

Let's break this down:

  1. We create an AngularJS module named 'notepadApp'.
  2. We define a controller named 'NotepadController'.
  3. Inside the controller, we initialize noteContent as an empty string.

Adding More Features

Now that we have a basic notepad, let's add some more features to make it useful!

1. Save and Load Functionality

Let's add buttons to save and load our notes. Update your HTML:

<body ng-controller="NotepadController">
    <h1>My Notepad</h1>
    <textarea ng-model="noteContent"></textarea>
    <p>Character count: {{noteContent.length}}</p>
    <button ng-click="saveNote()">Save Note</button>
    <button ng-click="loadNote()">Load Note</button>
</body>

And update your app.js:

app.controller('NotepadController', function($scope) {
    $scope.noteContent = '';

    $scope.saveNote = function() {
        localStorage.setItem('savedNote', $scope.noteContent);
        alert('Note saved!');
    };

    $scope.loadNote = function() {
        $scope.noteContent = localStorage.getItem('savedNote') || '';
        alert('Note loaded!');
    };
});

Here, we're using localStorage to save and load our note. Think of it as a small notebook where your browser can jot down information to remember later.

2. Word Count Feature

Let's add a word count feature. Update your HTML:

<p>Character count: {{noteContent.length}} | Word count: {{wordCount()}}</p>

And add this function to your controller in app.js:

$scope.wordCount = function() {
    return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

This function splits the note content by spaces and counts non-empty elements, giving us a word count.

Putting It All Together

Here's a table summarizing the main AngularJS directives and expressions we've used:

Directive/Expression Purpose
ng-app Defines the root element of an AngularJS application
ng-controller Specifies which controller to use for the HTML element
ng-model Binds the value of HTML controls to application data
ng-click Specifies an AngularJS expression to evaluate when an element is clicked
{{expression}} Outputs the value of an expression

Congratulations! You've just built your first AngularJS application. We've covered the basics of setting up an AngularJS app, using controllers, working with models, and even storing data locally.

Remember, learning to code is like learning a new language. It takes practice, patience, and persistence. Don't be discouraged if something doesn't click immediately – that's all part of the learning process. Keep experimenting with your notepad app, try adding new features, and most importantly, have fun!

In my years of teaching, I've seen countless students go from complete beginners to proficient developers. You're on that same exciting journey now. Keep coding, keep learning, and before you know it, you'll be building complex web applications with ease!

Credits: Image by storyset

Previous Tutorial:
AngularJS - ToDo Application
Next Tutorial:
AngularJS - Bootstrap Application