Building your first app with Angular 1x
I said to myself once that Angular was like a puzzle — you’d create little chunks of code here and there and piece them together until it became one large machinery where everything got something from the other and every part needed the other to function and I am utterly fascinated by this.
I already wrote about the basics of angular here and so I’m not going to go over that yet again. Instead, I’m going to show you five easy steps that could help you get started with building your first angular app. Here we go!
1 — Creating the files
The first thing to do is to create your files. You’d need three files for starters. The index.html file, the app.js file as well as your style.css file. After you create your index.html file, you can go ahead to back it up how we usually do so that your index.html file looks something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>From the code snippet above, we can see that within the <head></head> tags, apart from our usual style.css file, we inputed two scripts. The first one is the angular library that we’d be needing to build our angular app.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>And the second one is our app.js file. This is where we’ll be writing our own special code for all our functions, controllers, directives and the other little chunks of code that will make our app work.
<script type="text/javascript" src="app.js"></script>2 — Initializing your App
Now that we have all that set up, we’re going to initialize our app. And how to do that is by writing this code in our app.js file:
var app = angular.module('firstApp', []);This tells angular to create a module called ‘firstApp’. The angular documentation says you can think of a module as a container for the different parts of your app — the controllers, services, filters, directives, etc. After writing that in your app.js file. You can now go back to your index.html file and write this in your <html> tag:
<html ng-app = "firstApp">This is a directive that tells Angular that this is the root element of our application. When you add that, the index.html file will now look like this:
<!DOCTYPE html>
<html app = "firstApp">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>3 — Creating your Controller
There’s a writing rule that says to never use clichés. Some even go so far as to say that if you ever have to choose between a cliché and your life, say you’d rather die. The point of this is that I think we should all decide that we’d rather die than use the usual “hello world”. I think we should write a controller that says something way cooler like: “Yo fam, what’s good?”. So we’re going to first make a controller and then input that message into our controller. This is how to make a controller:
app.controller('MainController', ['$scope', function($scope){
$scope.message = "Yo fam, what's good?"
}]);On the first line, we created a controller called, “Main Controller”. This controller takes in an angular object called $scope. $scope can be seen as the object that joins things from the application controller to the view. Here, the $scope takes in a message that says, “Yo fam, what’s good?” So altogether, by now, our app.js file would look something like this:
var app = angular.module('firstApp', []);
app.controller('MainController', ['$scope', function($scope){
$scope.message = "Yo fam, what's good?"
}]);4 — Binding to the View
To bind to the view, the first thing to do is to declare our controller our in our view. We can do this in our <body> tag like this:
<body ng-controller = "MainController">“ng-controller” is how to declare a controller in your view. After we do this, we now want our message from the controller to show in our view. So we write this:
{{message}}This binds the message to the view.
By now our index.html file should look like this:
<!DOCTYPE html>
<html ng-app = "firstApp">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller = "MainController">
{{message}}
</body>
</html>And also, we should have: “Yo fam, what’s good” showing in our browser when we run the code.
5 — Styling and backing it up.
I did a quick and easy styling, in css of course.
body {
font-size: 40px;
font-family: courier;
text-align: center;
background-color: black;
color: white;
padding-top: 200px;
}And then I changed my own message from “Yo fam, what’s good?” to “Yo Angular, what’s good?” for the purpose and context of this lesson. Mine looks like this now.
I really like how this looks. I think it’s really pretty.
I hope yours looks even better. If you reached here then congrats! You’ve succeeded in building your first angular app and you can now proceed to back it up like me all through International Women’s Day.
And although, you’re just getting started like me, they say little drops of water make a mighty ocean but since all clichés are officially cancelled, I think we should say little seeds of beans make a big ass moin-moin. Lmao. I’m actually not sorry this time.
PS — You can find the code for this lesson here: https://github.com/afope/firstapp.git
