Off the Ridge code

Off the Ridge Code Newsletter

Search

How to AngularJS – Part 1 – Introduction to AngularJS

Published April 3, 2015 in AngularJS - 3Comments

Introduction to AngularJS

In the coming weeks I’ll be presenting a series of ‘How to AngularJS’ posts. It’ll be primarily aimed at the novice or beginner audience. (at least in the beginning, no pun intended) :)

First thing’s first: What is AngularJS?

In short, AngularJS is a JavaScript framework to build applications that can run in a web browser.

It started as a Google project but right now it is an open source project that you can contribute to as well.

We are going to write a ‘Hello World’ type of application in AngularJS, so let’s get started.

1. Head on over to www.angularjs.org and download and click on that big blue button in the middle of the screen.

Download AngularJS

I happen to be writing this blog post on my Mac and so I’ve created a folder under ‘Documents’

2. Create a folder somewhere on your computer. (e.g. C:\HowToAngular\)

 ▸ Documents\HowToAngular\

a. Create a subfolder called ‘js’ (e.g. C:\HowToAngular\js\)

b. Click the download button on the www.angularjs.org page, select ‘Stable‘ under Branch and Minified under Build and click download. (At the time of this writing I downloaded version 1.3.x (stable))

Download Angular2

c. Save the file (angular.min.js) to the ‘js’ folder (e.g. C:\HowToAngular\js\angular.min.js)

3. Open your favorite text editor. I use Sublime Text editor. It is easy to use, provides color themes and it is pretty darn fast. I have no affiliation with Sublime Text and you’re welcome to use any HTML editor your heart desires. As a matter of fact, you can use Notepad for this example.

The bare minimum we need to insert into our HTML page for AngularJS is:
a. <script src=”angular.js”></script> – a <script> tag pointing to AngularJS file (angular.js)
b. <ng-app> attribute – it is a directive and that is how AngularJS extends HTML. By the way, ‘ng’ stands for Angular.

4. Create an HTML file with the following:

<!DOCTYPE html>

<html>

<head>
<script src="js\angular.min.js"></script>
</head>

<body>
<h1>Hello AngularJS!</h1>

<p>Under Angular control: </p>
<div ng-app>
{{ 'Hello ' + 'AngularJS!' }}

<br/><br/>

<label>Hello: </label>
<input ng-model="hello" type="text" />
<p>{{hello}}</p>

</div>

<br/>
<p> <b>Not</b> under angular control </p>
<div>
{{ 'Hello' + 'AngularJS!' }}
</div>

</body>

</html>

Notice the <div ng-app> directive that I’ve placed. I could have added the <ng-app> directive to the <html> element and it would have worked just fine; but, you can only have one <ng-app> per page.

The difference of course, is that the first expression renders correctly since it’s under Angular control. The second expression isn’t under Angular control and hence outputs as-is.
I just showed you the bare minimum you need to get started with AngularJS.

Now let’s add one more directive <ng-model>  which binds in this case <input> element to $scope (more on that in future posts) and creates two-way binding – which is the strength of AngularJS.

I’m going to add the following inside our first <div ng-app>

<p style="padding-left: 30px;"><label>Hello: </label>
<input> <strong>ng-model</strong>="hello" type="text" />
<p>{{hello}}</p>

Final output

If you run the page now, you should see the above, and typing anything inside the text box will ‘magically’ output it below with no additional (javascript) code.

Here’s the complete listing:

<!DOCTYPE html>

<html>

<head>
<script src=”js\angular.min.js”></script>
</head>

<body>
<h1>Hello AngularJS!</h1>

<p>Under Angular control: </p>
<div ng-app>
{{ ‘Hello ‘ + ‘AngularJS!’ }}

<br/><br/>

<label>Hello: </label>
<input ng-model=”hello” type=”text” />
<p>{{hello}}</p>

</div>

<br/>
<p> <b>Not</b> under angular control </p>
<div>
{{ ‘Hello’ + ‘AngularJS!’ }}
</div>

</body>

</html>

JsFiddle

I hope you’ve enjoyed getting your feet wet with AngularJS. I know I did!

Please send me comments and questions and stay tuned for my posts on AngularJS.

-Sebastian

  • Avi Newman

    Thank you for posting this!
    According to the recent StackOverflow developer poll, AngularJS is one of the hottest and fastest growing new technologies. I’m excited for your next post.

  • ramy samir

    good start with AngularJS

    • Sebastian

      Thank you Ramy!