AngularJS ngClick and ngRepeat

ngclick

Second article about AngularJS and today we are going to see ngClick and ngRepeat directives. I’ve decided to write about these directives because they are very important and we use them all the time.

Let’s assume the following code

(function(){

  var myApp = angular.module('myApp', []);

  myApp.controller("myController", function($scope){

  });

})();

Wrapping your Javascript in a closure is a good habit!

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS ngClick and ngRepeat</title>
  </head>
  <body ng-controller="myController">

    <!-- ngClick example goes here -->

    <!-- ngRepeat example goes here -->

    <script src="angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

ngClick

The first thing we need to do is to create a button in our HTML code and through the ngClick directive call the click function. After that, we will define the click function inside the controller.

<button ng-click="click();">Click</button>

{{ message }}
myApp.controller("myController", function($scope){

  $scope.click = function(){

    $scope.message = "It's working!";

  }

}

Great. The button is working through the ngClick directive and the message expression we’ve created was replaced by “It’s working”.

ngRepeat

When we work with AngularJS, objects and arrays are used daily. Let’s continue our example including an array of objects and store the data inside the controller

myApp.controller("myController", function($scope){
  
  $scope.message = "It's working!";
  $scope.users = json; // Storing data inside the controller

});

var json = [
  {name: "Guilherme", email: "guilherme@test.com", age: "22"},
  {name: "Milena", email: "milena@test.com", age: "26"}
];

Now we’ve got a user array, simulating a JSON in the real life ;) How do we print out this data inside our webpage? We need to use the ngRepeat directive.

<ul>
  <li ng-repeat="user in users">{{ user.name }}</li>
</ul>

The page has been printed out with all the names. But we need to print out the email as well as the age. What do you think about changing the list to a table? It will be easy.

<table>
  <tr ng-repeat="user in users">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.age }}</td>
  </tr>
</table>

What if we want to keep our list and print out the name, email and age?

<ul>
  <li ng-repeat-start="user in users">{{ user.name }}</li>
  <li>{{ user.age }}</li>
  <li ng-repeat-end>{{ user.email }}</li>
</ul>

Conclusion

The ngClick and ngRepeat directives are extremely easy to work with. JSON works great with the ngRepeat directive and it’s very common to use. You can find these examples on GitHub https://github.com/guinatal/blog-examples

First AngularJS App

angularjs

Hello! This is my first post and I have decided to write about AngularJS. I am still improving my skills with Angular and I would like to share my knowledge. Today, we are going to see how to start an AngularJS App and learn basic concepts like Module, Directives and Expressions.

<!DOCTYPE html>
<html>
  <head>
    <title>First AngularJS App</title>
  </head>
  <body>
    <h1>First AngularJS App</h1>
  </body>
</html>

The first thing we need to do is to import the AngularJS library and initialize the application through the ng-app directive. After that, the app is ready to read Angular codes.

<!DOCTYPE html>
<html ng-app> <!-- Directive -->
  <head>
    <title>First AngularJS App</title>
  </head>
  <body>
    <h1>First AngularJS App</h1>

    <!-- Expressions -->
    <p>8 + 5 = {{ 8 + 5 }}</p>
    <p>100 / 2 = {{ 100 / 2 }}</p>
    <p>100 * 2 + 1 = {{ 100 * 2 + 1 }}</p>
    <p>Currency = {{ 100 | currency }}</p>

    <!-- AngularJS Library -->
    <script src="angular.min.js"></script>
  </body>
</html>

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. In the following link you have a list of directives https://docs.angularjs.org/api/ng#directive

Controllers

AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller.
First of all, we need to create an Angular Module for our application.

<html ng-app="myApp">

It is time to build our application file. Let’s create the app.js file and import it. As you can see, the controller is attached (inside) to the application.

<script src="app.js"></script>
(function(){
  var myApp = angular.module('myApp', []);

  // Controller
  myApp.controller("myController", function(){

    this.user = obj;

  });

  var obj = {
    name: 'Guilherme',
    password: '123',
    age: '23'
  }

})();

In our current HTML, we have the directive (ng-controller), controller name (myController) and an Alias (controller).

<!DOCTYPE html>
<html ng-app="myApp"> <!-- Directive -->
  <head>
    <title>First AngularJS App</title>
  </head>
  <body>
    <h1>First AngularJS App</h1>

    <!-- Expressions -->
    <article>
      <h1>Expressions</h1>
      <p>8 + 5 = {{ 8 + 5 }}</p>
      <p>100 / 2 = {{ 100 / 2 }}</p>
      <p>100 * 2 + 1 = {{ 100 * 2 + 1 }}</p>
      <p>Currency = {{ 100 | currency }}</p>
    </article>

    <!-- Controller -->
    <article ng-controller="myController as controller">
      <h1>Controller</h1>
      <p>{{ controller.user.name }}</p>
      <p>{{ controller.user.password }}</p>
      <p>{{ controller.user.age }}</p>
    </article>

    <!-- AngularJS Library -->
    <script src="angular.min.js"></script>
    <!-- External Javascript -->
    <script src="app.js"></script>
  </body>
</html>

Conclusion

We have just made a very simple app using AngularJS, but I believe that now you (if had never seen) have an idea of the power and simplicity of this great javascript framework. I did and recommend the free course of AngularJS. http://campus.codeschool.com/courses/shaping-up-with-angular-js