AngularJS Application Introduction


Module

Every Angular application starts from creating a module. A module is a container for the different parts of your application: controllers, service, and so on. To get started all we need to do is create a file, add a few lines of code to it and then reference it in our HTML file. Those few lines of code will be our module and our controller.

Shown below is the contents of the file. I called my file app.js.

var app = angular.module('myApp', []);
app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});

Now all we need to do is use our code in our web page’s HTML. Create another file with the following contents and save it as myapp.html in the same location as your app.js file. After that, all you need to do is run the HTML file in the browser. In Windows you can right-click it to get the pop-up menu and select Open with… and choose a browser.

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  </head>
  <body ng-controller="HomeController">
    <h1>{{message}}</h1>
    <script src="app.js"></script>
  </body>
</html>

Angular Version 2

AngularJS version 2 is not a complex major update; this is a whole rewrite that isn’t compatible with the older version. Google isn’t giving developers who built applications with Angular 1.x an easy upgrade path, and many of them are now looking at which technology to use next.

With Angular 1.x you will not be developing mobile apps, however, the new Angular version will be focused on the development of mobile apps. The rationale is that it’s easier to handle the desktop aspect of things, once the challenges related to mobile (performance, load time, etc.) have been addressed.

Leave a comment

Your email address will not be published. Required fields are marked *