Erik Aybar

Up And Running With AngularJS - Part 1

May 14, 2014


In this post … AngularJS

Project GitHub Repo


From the Homepage

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Quick Start - Step 1

The bare essentials for those who have yet to lay eyes on AngularJS code…

Here is the code in its entirety…

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Up and Running with AngularJS - Part One</title>
    <!-- Bootstrap 3 CSS CDN -->
    <link rel="stylesheet" href="">

<!-- Add ng-app to activate AngularJS -->
<body ng-app>

    <div class="container">
        <h1>Up and Running with AngularJS <small>Part One</small></h1>

        <!-- Declare the controller for this div. Scope hoopla. More on that later... -->
        <div ng-controller="OurController">
                <!-- Lets play with some data binding! -->
                Here is foo: {{foo}}


    <!-- AngularJS CDN     -->
    <script src=""></script>
    <!-- Some Basic AngularJS -->
    <script type="text/javascript">
        function OurController($scope) {
            // Bind foo to our scope for "OurController"
            $ = "Bar";

And we have data binding. Albeit overly simple and virtually useless.

AngularJS Data Binding Simple Example

What are those {{ }} crazy looking curly braces you ask?

More on that to come…

Project GitHub Repo

Special Note: Thank you to Dave Balmer for the Quick Guide on setting up Syntax Highlighting with prism.js set up on the default Ghost Blog Theme

Erik Aybar

👋🏽 Hi! I'm Erik Aybar. I'm a software person working remotely from St. George, Utah. This is my blog.