English

AngularJS Tutorial

AngularJS Applications

AngularJS - Environment Setup

Hello there, future web developers! I'm thrilled to be your guide on this exciting journey into the world of AngularJS. As someone who's been teaching computer science for over a decade, I can tell you that setting up your development environment is like preparing your kitchen before cooking a gourmet meal. It might not be the most glamorous part, but it's absolutely essential for success. So, let's roll up our sleeves and get started!

AngularJS - Environment Setup

What is AngularJS?

Before we dive into the setup, let's take a moment to understand what AngularJS is. Imagine you're building a house. HTML would be the foundation and walls, CSS would be the paint and decorations, and JavaScript would be the electricity and plumbing. AngularJS? Well, that's like having a team of expert interior designers and architects who make sure everything works together seamlessly.

AngularJS is a powerful JavaScript framework that extends HTML's capabilities, making it easier to create dynamic, single-page web applications. It's like giving superpowers to your HTML!

Why Do We Need a Development Environment?

You might be wondering, "Can't we just start coding right away?" Well, you could, but it would be like trying to cook a five-course meal in a kitchen with no utensils or appliances. A proper development environment gives you all the tools you need to write, test, and run your AngularJS applications efficiently.

Setting Up Your AngularJS Environment

Now, let's get down to business. Here's what we need to do:

1. Install Node.js

Node.js is like the engine of our development environment. It's a JavaScript runtime that allows us to run JavaScript on our computer, outside of a web browser.

  1. Go to the official Node.js website (https://nodejs.org/).
  2. Download the version recommended for most users.
  3. Run the installer and follow the prompts.

To check if Node.js is installed correctly, open your command prompt or terminal and type:

node --version

You should see the version number of Node.js if it's installed correctly.

2. Install npm (Node Package Manager)

Good news! npm usually comes bundled with Node.js. It's like a giant library where you can borrow (or in this case, download) pre-written code packages to use in your projects.

To check if npm is installed, type:

npm --version

3. Install AngularJS

Now, here's where the magic happens. We're going to use npm to install AngularJS. In your command prompt or terminal, type:

npm install angular

This command tells npm to go fetch the AngularJS package and install it on your computer.

4. Set Up a Simple AngularJS Project

Let's create a basic project to make sure everything is working. First, create a new folder for your project. You can do this through your file explorer or using the command line:

mkdir my-angular-project
cd my-angular-project

Now, let's create two files in this folder:

  1. index.html
  2. app.js

Here's what your index.html should look like:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My First AngularJS App</title>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="MainController">
        <h1>{{ greeting }}</h1>
    </div>
</body>
</html>

And here's your app.js:

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

app.controller('MainController', function($scope) {
    $scope.greeting = 'Hello, AngularJS!';
});

Let's break this down:

  • In index.html, we're creating a basic HTML structure.
  • The ng-app="myApp" attribute tells AngularJS that this is the root element of our AngularJS application.
  • We're including the AngularJS library and our app.js file using <script> tags.
  • The <div ng-controller="MainController"> connects our HTML to the controller we define in app.js.
  • {{ greeting }} is an AngularJS expression that will display the value of greeting from our controller.

In app.js:

  • We create an AngularJS module named myApp.
  • We define a controller named MainController.
  • Inside the controller, we set a greeting property on the $scope object, which AngularJS uses to pass data between the controller and the view (our HTML).

5. Run Your Application

To see your application in action, you'll need a web server. For development purposes, you can use the live-server package. Install it globally using npm:

npm install -g live-server

Then, in your project directory, run:

live-server

This will start a local web server and open your default browser to display your application. You should see "Hello, AngularJS!" on the page.

Conclusion

Congratulations! You've just set up your AngularJS development environment and created your first AngularJS application. It might seem like a lot of steps, but trust me, it gets easier with practice. Remember, every expert was once a beginner, and setting up your environment is the first step on your journey to becoming an AngularJS master.

In our next lesson, we'll dive deeper into AngularJS concepts and start building more complex applications. Until then, feel free to experiment with your new setup. Try changing the greeting or adding more elements to your HTML. The best way to learn is by doing!

Happy coding, and see you in the next lesson!

Method Description
angular.module() Creates or retrieves an AngularJS module
module.controller() Registers a new controller with the module
$scope An object that refers to the application model
ng-app Directive that declares the root element of an AngularJS application
ng-controller Directive that specifies a controller for an HTML element
{{ }} Expression syntax in AngularJS for displaying values

Credits: Image by storyset

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