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

Share this postShare on FacebookDigg thisShare on Google+Share on LinkedInShare on RedditTweet about this on Twitter