Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create your website with AngularJS

Friday, October 9th, 2015 by Servage

AngularJSWe have recently presented Ember JS as one of the modern frameworks for building great web apps with current standards and technology. Today it is about Angular JS, which is a great alternative to Ember JS. Both frameworks have great capabilities and it would not be fair to focus on a single one of them, because there is no good reason why one of the two frameworks should be better than the other. Smart people say you need to choose the right tool for the job, and when it comes to Ember JS and Angular JS you have two great tools that can solve hard jobs. You will likely be happy with either one of them.

Getting started with Angular

You can include the AngularJS source straight from a CDN or download your own copy of the script to include. You only need to include that single script, there is nothing else to do – no installation or further settings. You are ready to develop your first Angular website.

Directives

Angular builds itself up around directives, which are HTML elements and attributes introduced to the DOM by AngularJS to direct the Javascript code. The directives are based on attributes that do not intervene with regular HTML display and styling, because they are all prefixed with “ng”.

<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="myapp"></div>
  </body>
</html>

Notice the “ng-app” directive in the template above. It tells AngularJS that the app you are developing lives inside the div. Everything else will follow inside that div.

In another example we can use the “ng-init” directive to initialize a variable value.

<div ng-app="myapp" ng-init="productTitle='Great Thing'"></div>

Show template variables

Angular makes it super simple to display variables in templates. Consider the “productTitle” we just set in the code snippet above. That variable could easily be displayed in HTML using the following template.

<p>The product title is <span ng-bind="productTitle"></span></p>

Variable two-way binding

In Angular variables are bound two ways. It means that variables can be set, displayed and changed again. All dependent places will get the update, and change their display. I.e. if you change the “productTitle” from above to something else after you already displayed it in your template, then the template will simply update itself automatically. This behavior is super convenient and extremely powerful, because it saves you from the need of keeping track of where you use different variables, and constantly update them whenever something changes.

Angular comes with a lot of clever ways of building interactive websites super fast. You will learn more in future articles.

Create your website with AngularJS, 4.0 out of 5 based on 4 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.