AngularJS Basics: Modules, Controllers, and $scope

Photo by Roman Synkevych on Unsplash

Welcome to day 1 of my 100 days of code! I decided I wanted to start learning the JavaScript framework, AngularJS. Hopefully, I’ll be able to teach you while doing it. Now, let’s go over the basics.

First, why use AngularJS?

  • Angular promotes correct and consistent code by using separation of concerns. Having different folders and files for these logical chunks enforces clean and structured code.
  • Angular gives us the ability to write dynamic views that are constantly updating by implementing more features into the HTML that we will cover later.
  • The days of waiting for pages to refresh are over! Angular allows us to easily make AJAX requests and keep our pages constant updating without needing to hit that refresh button.

Now let’s get coding!

To create a new Angular project cd into your directory and run “ng new your_app_name”. It will come preloading with a bunch of files we don't need yet. You can delete the app folder and index.html. We are going to create those ourselves.

First, let’s create a new folder . In this file directory, you are going to create a new file named “”. This is just going to tell Angular that we want to create a new moduleIf you don't know what a module is, don’t worry. I am going to explain it below. But for now, just copy this code into your file.

What is a module?

A module is like a container for specific parts of your application. They help us separate our apps into logical chunks. It's typically suggested that you make a module for each part of your app, a base module to start off your app, and each reusable component of your app. Modules are important. Without them, your app can’t run.

Now, let's break down the example code.

The angular object we are using in line one gives us access to the angular core(the core API). It allows us to use and create modules using angular.module.

You also may be noticing that empty array on line 2. That empty array tells angular we need to create a new module. If we didn't have that array, angular would think we want to retrieve a module with the name “exampleModule”. In that empty array, you can also tell angular what modules your program is relying on! It's basically an array of modules, your new module needs to function.

Perfect! We have just learned the setter syntax for modules. Let’s go over how to connect the module to your controller.

Now, let's create a file for our new controller in our js/app file. Let's name it ExampleController.js.

You are going to copy and paste the code below.

In lines 1–2, we are creating a function for the controller. In line 5 we are using the angular.modules to fetch “exampleModule”. In line 6, we are using angular.controller to create our new controller, “MainController”.

To connect the module to HTML, create an index.html folder in the main directory in our app. Now all you have to do is add in the HTML element you want the module to render in.

Now, let’s dive deeper into controllers. We coded one a little earlier, but what is a controller anyway?

Controllers are the backbone of your whole application. Controllers control our data, from handling form inputs to keeping your backend updated, your controller is responsible for a lot.

There are two different types of controllers: fat controllers and thin controllers. Fat controllers are used in MVC and fetch all of our data while dealing with a lot of the presentational and business parts of our frontend. Thin controllers are typically used in MVVM. Thin controllers only deal with the presentational logic.

Can you guess how we would reference our controller in the HTML? Just like how we referenced our module in the HTML. See the code below.

Onto our final topic of this blog post, $scope!

What is $scope?

$scope is an object that we can assign values to and call in our view! $scope is also named by AngularJS so make sure to call it $scope.

We can access every property that we come across in our scope in our views.

For example, if we changed our controller to look like this:

We would access our values in our HTML by doing this:

Now type “python -m SimpleHTTPServer 3000” into your terminal and open up your localhost:3000.

And BOOM! Working app with all the correct values.

$scope is not only used to access data through the view, but it's also an extremely powerful API that lets us communicate between scopes, keep track of data state, watch for changes, and much more.

Thank you so much for taking the time to read my blog post! I am going to be documenting my 100 days of code every other day. Follow along if you want to learn with me!

Hi there! Im a photographer thats pursuing my dreaming of become a software engineer. Join me while I attempt the #100daysofcode challenge!