Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Basic Angular Tutorial: Simple Controller ng-repeat Example

1/5/2016

0 Comments

 
For the super basic Angular example with pure html check out the Angular Hello World post. This post is a step up; it's the regular basic angular tutorial (advanced basic tut coming soon!). Here we're going making use of a Javascript file to save data in an array let angular update our DOM elements acordingly. Yeaahhooo!

What Are We Making Here, Anyway?

Below You can test the Angular application that I'll show you how to make in this tutorial (We aren't using any css here, and my blog is automatically adding some styling to the webapp so yours might look slightly different when you drag the files into your browser):
Add a new task here:

To Do's

  • {{ task }}

Let's See Some Code

Ok. I'm going to show you the html file, and we'll dissect it together. You can copy this whole snippet and save it as MyHtmlFile.html (the name really doesn't matter).
MyHtmlFile.html
File Size: 0 kb
File Type: html
Download File

<div ng-app>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="MyController.js"></script>

    <div ng-controller="ToDoListController">
     Add a new task here: <input type="text" ng-model="newTask"/>
        <button ng-click="add()">Add</button>
        <h2>To Do's</h2>
        <ul>
            <li ng-repeat="task in taskArray"> {{ task }} </li>
        </ul>
 
    </div>

</div>
Let's run through what's going on here.
  1. Wrap everything in the file in a <div> tag and use the ng-app directive to tell the browser that this is an Angular webapp.
  2. Load two different Javascript files. The first is the minified Angular.js library. The second is the custom controller file that we will be making very soon.
  3. Create a new div for the controller. we set the ng-controller directive to the function for that particular controller.
  4. We will then put some text on the page instructing the user to "Add a new task here: ," followed by an input box allowing them to enter text. We'll bind that input box's value to the variable newTask using the ng-model directive. 
  5. We create a button labeled Add that, when clicked, will fire the add() function in our controller Javascript code. 
  6. We'll create a heading with the text To Do's  and use ng-repeat to display each task in our taskArray (both variables from our controller Javascript code.    

The Javascript Controller

We'll also need a Javascript file. This will hold the logic for out controller. It can be any name you like, but be sure that it matches with the name of the file you put in the <script> tag in MyHtmlFile.

MyController.js
File Size: 0 kb
File Type: js
Download File

function ToDoListController($scope) {
        $scope.taskArray = ["clean apartment", "write some code", "go out to eat"];
 
                console.log("hello");
        $scope.add = function() {
        $scope.taskArray.push($scope.newTask);
        $scope.newTask = "";
        }
    }
This is quite a simple file. Programmers shouldn't be bothered will classes and all that nonsense. ;)
  1. First, create a function called ToDoListController. This will be called when the <div> from the html file is created. The function automatically accepts the $scope argument (we get this for free from the Angular framework). This is unique to Angular and allows you to access the binded variables from the html file.
  2. Then we'll set up the variable taskArray and populate it with some dummy data.
  3. We'll then declare the function add then we need to occur when the Add button is clicked. 
  4. Inside of the add function let's push what's currently in the textbox into our taskArray and set the text input to an empty string. 

Putting It All Together

Save these two files in the same folder in your computer. Then just drag the MyHtmlFile.html file into the browser and it should work. If you don't want to put them in the same folder then you just need to change the path in your MyController.js script tag to reflect where you have it, using either the relative or absolute path.
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Want FREE access to
    my daily stock tips 
    ​newsletters??
    Sign up here:

    - Triple Gainers
    - Rippers N' Dippers
    - Growingest Growers
    ​

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2021