Angular.JS

Angular.js is a structural framework for dynamic web apps. If that is confusing, don’t worry! Basically, it means we can extend HTML’s syntax to express an application’s components more fully. To start, we’ll create an index.html document and a js folder.

Image for post

Next, we’ll import the Angular.js framework just like we did for Bootstrap and jQuery. For this tutorial, we will be using Angular 1.

Image for post

In this tutorial, we’ll be making a to-do list application. To do this, we’ll make an app.js file inside of our js folder and write a line of code that initializes our app (also called module) for us.

To connect our app.js file to the HTML code, we’ll link it over in our index.html. Usually, we put this type of import towards the end of the body.

Image for post

Although our app.js is imported, there’s still more to do (no pun intended). We need to connect our ToDoList module to our HTML code. To do this, we’ll write ng-app=”ToDoList” as an attribute of the body. This states that everything in the body will be a part of the ToDoList application. Furthermore, this attribute is called an angular attribute because it is part of angular and not plain html.

Image for post

Next, we’ll create our controller, which will handle the data for our application. To do this, we’ll make a controllers folder inside of our js folder and add a MainController.js file.

Image for post

Now, we can write some code for our MainController.

Image for post

Just like most of our files, we’ll import this into our index.html and put it right before the closing body tag.

Image for post

Now, going back to the MainController, we can set some values in the scope object. For now, we can think of the scope object as something everything in our program can talk to. The view aka our index.html can see what’s in the scope and our controller can set what’s in the scope. This is how the two files communicate and can pass information to and from each other — through the scope object! Thinking in this way, we’ll write some “to-do list” items and put them in the scope of our controller.

Image for post

Here, we added a list attribute to the scope and set the value of this attribute to an array containing “Clean my room”, “Go to the store”, and “Study Cracking the Coding Interview”. Now, how does our view (our index.html) know about this controller? Sure, the file is imported, but there’s one other thing we have to do. We need to attach it to an element in the HTML code. We’ll attach it by creating a div, accessing its ng-controller controller attribute, and giving it the value “MainController.”

Image for post

To access the to-do list items in scope, we can write some more code.

Image for post

The curly braces are called handlebars and they note that these items are coming from the scope object. Without them, our list items would have the literal text list[0], list[1] instead of our actual to-do list items. Refreshing the page, we see the items in our list!

Image for post

However, looking back at our code, this is somewhat inefficient and only works if we have exactly three items in the list. Instead, we can use an angular directive called ng-repeat to iterate through the items in the list. We’ll learn more about directives later, but for now, just think of them as a tool that helps make our code more modular and concise. We’ll create another div and add ng-repeat as an attribute.

Image for post

Here, we name each thing in the list an item and for each item, we put it in a li tag. Again, we are accessing the list attribute from the scope object, which was set in the controller. The list attribute has the value of an array that has our to-do’s inside of it. We use the ng-repeat directive to go through the items and put each in their own li tag.

One last thing before we go! We can also add an input field in our HTML so we can add things to our to-do list from the webpage. To do this, we’ll write some more code in our index.html.

Image for post

This creates an input field and ng-model (another angular directive) binds the input to the variable addToDo. This addToDo is an attribute of the controller’s scope object so it can be accessed again in the index.html file and in the MainController. We’ll also create a button so when the button is pressed, the item in the input is added to the list.

Image for post

When we click the button, the addItem() function will be run — but this function doesn’t exist yet! Going back to our MainController.js, we’ll add some more code.

Image for post

Here, we add a new attribute to our scope, addItem, and give it the value of a function. Inside the function, we access our list and push on the addToDo variable, which has the value of the input field from the index.html. Now, if we refresh our page and try to add a to-do… we can!

Image for post

However, when we refresh the page, our added data will disappear because we haven’t saved it anywhere. Something to think about. In next week’s tutorial, we’ll talk more about angular.js and go into directives, services, routing, and accessing an endpoint from your code! See you next time.

Image for post

Things to Remember:

<!-- How to Import Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script><!-- How to How to Initialize a Module -->
var app = angular.module('ModuleName', []);<!-- How to Create a Controller -->
app.controller('ControllerName', ['$scope', function($scope) {
$scope.text = "Value for Text Attribute in Scope"
$scope.method = function() {
/* body of function */ }
}]);<!-- What You Need To Import -->
1. angular framework
2. app.js (modules)
3. controller files<!-- What You Need To Attach in index.html -->
1. application with ng-app
2. controller with ng-controller

Some Built-in Directives:

<!-- ng-repeat -->
// loop through a collection / array
<div ng-repeat= "color in colors">
<li> ""color"" </li> // except with handlebars instead of quotes
</div><!-- ng-click -->
// execute a method or expression when element is clicked
<button ng-click="changeBackgroundColor()"></button><!-- ng-src -->
// use angular to set a source path for an image
<img ng-src="https://www.myblog.com/article/images/"><!-- ng-href -->
// use angular to set the source for a link
<a ng-href="http://www.myblog.com/article">click here!</a> <!-- ng-model -->
// bind input elements to scope attributes
<input ng-model="name"></input>

Code from this blog post

Author avatar
Sandip Savaliya
https://www.whitelioninfosystems.com
Entrepreneur | Developer | GDG Speaker | IOT Enthusiastic | Tech Explorer

Post a comment

Your email address will not be published. Required fields are marked *