First AngularJs application

Version: AngularJS v1.3.0-beta.10

AngularJS is one of the most popular and perspective way to build dynamic and efficient web application designed by Google.

What is AngularJS?

AngularJS is a MVC framework designed by Google to extend HTML functionality and written on JavaScript allows you to build “single web page JavaScript based application”. Even more AngularJS completely front-end and fully compatible with mobile browsers. Also you can feel comfortable because it uses MIT license.

Why you need to use it?

AngularJS helps to better organise your web app and extend functionality of basic JavaScript and HTML. Moreover AngularJS gives you ability to easy implement to your app filters, services and most testy part is a directives.

In a case where you have some amount of views and for each one you need some JS logic, to manipulate with filters and global services for you web app AngularJS can make your life easier and code cleaner.

How it works?

Data binging: one of the most pleasurable think in AngularJS is a dynamic connection between HTML view and JS side thats mean lifetime continuos updates of all values and objects.

Main components: main structure of the app can be described like few main structural components:
basic HTML page
definition of your Angular app in JS file and connection with HTML part
Angular controllers where actual web-app logic are

Relation between components: very important to understand that everything that you defining like angular element and no mater which kind of element variable, method or ever service you can easily be accessed in HTML code or from any JS part of the app.
AngularJS uses own isolated scope to define all components and important to remember that inside of the Angular components may be isolated from each other by using “controllers”.

Simple Angular application

The best way to learn how it works is a small demonstration of angular implementation. I’m not touching “directives” the most funny part of Angular. Lets leave this for future topics about AngularJS.
Step 1:
To work with Angular you will need Angular lib which can be downloaded from https://angularjs.orgstructure_angular_app
Step 2:
Create simple file structure for HTML site:

  • index.html – HTML document where we going to place code of our page.
  • js/lib/angular.js – Angular library, in this case I used AngularJS v1.3.0
  • js/app/app.js – file whre we will define Angular app
  • js/app/firstpage-controller.js – Angular logic to run our app.
  • css/bootstrap.css – quite common set of CSS styles just to make app more stylish. Not mandatory to have.

app.js code

This one line of code is actually definition of our Angular app with name “FirstApp”. Empty brackets [] means that now we don’t have any extra modules that we including for this app.

index.html code

Inside HTML code we can see few places where we inserting Angular parts.

  1. <body ng-app=“FirstApp"> – connecting code from app.js with HTML code. This mean that code placed inside tag will be processed like Angular application.
  2. <div ng-controller=“firstpageController"> – connecting code from firstpage-controller.js with HTML file. The “firstpageController” is a name of the Angular controller defined inside firstpage-controller.js file. That the business logic of our app which describes how code inside <div ng-controller=“firstpageController”> container will be processed.
  3. {{heder}} and {{getDate()}} – variable and method from firstpageController. Browser will render this code and will replace these parameters with value for {{header}} and with result of executing getDate() method.
  4. <input type="text" ng-model="yourName" placeholder="Enter a name here”> – input field where value equal to “yourName” Angular variable. ng-model=“yourName" – can be placed to any kind input field and value from such field will be automatically assigned to variable defined in ng-model.
  5. <p class="text-info">Hello, {{yourName}}!</p> – displays {{yourName}} variable. Everything that entered to input field defined one line before will be automatically displayed in this string.

firstpage-controller.js code

  1. function firstpageController($scope) – name of the controller which can be used in HTML code. Important to remember that name your controller is the name of main method( in that case “firstpageController”) but not a file name. And $scope – is a definition of isolated scope for this controller. now all Angular variables in this controller can be accessed from $scope. For example: $scope.yourName, $scope.header, $scope.getDate = function(){};
  2. $scope.header = "Sample of simple AngularJs app” – defined variable with name “header” and {{header}} from HTML file will be replaced for “Sample of simple AngularJs app”
  3. $scope.getDate – method that returns current date.

Result

If all steps done correctly you will able to see something like this:

Angular_demo_and_firstpage-controller_js_—_Angular_intro

Source code of this app you can download here: Angular_intro

© 2014 Artem Gryn personal blog