Hello there, today, we will start a basic entry to the AngularJS framework.
But, before that, I encourage you to learn the origins of the framework on Wikipedia here http://en.wikipedia.org/wiki/AngularJS, the differences between JQuery and AngularJS i have posted here https://creativcoders.wordpress.com/2014/05/11/differences-between-jquery-and-angularjs/.
This first tutorial is very simple and basic, we will just show our first “Hello world” with AngularJS, later I will show you more complex tips.
We will not use css in this example, just create a specific folder in which you will create an index.html file and a simple helloWorld.js file in a directory called “js”, like this.
js/helloWorld.js
index.html
Your index.html template must look like this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Angular - first hello world</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section>
<header id='header'>
<h1></h1>
</header>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="js/helloWorld.js"></script>
</body>
</html>
Ok, you see in this example that we already have included angular.js from Google and our helloWorld.js script.
Our job will be to update h1 tag and apply it a dynamic text… “Hello world!”, let’s go!
To tell AngularJS that we will work in the body, we have to decorate it with a directive called ‘ng-app’, let’s name it ‘hello’, just like this:
<body ng-app='hello'>
Then, we have to create in js/helloWorld.js, an empty ‘hello’ Angular module that will initiate angularJSin the body.
var app = angular.module('hello', []);
AngularJS now knows that we will manipulate the body with the hello module, but we want the “Hello world!”text in the h1 tag to be dynamically modified.
We will then target he head tag “section” upon h1, and decorate it with a controller directive we will name ‘helloController’, just like this.
<section ng-controller='helloController'>
Now, we will attach to hello module, a helloController.
var app = angular.module('hello', []);
//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
});
Right! you know how to attach an Angular module to a body and a controller to a tag, now, we need to attach a dynamic data (model) to h1 tag.
To do this, we will work with models, models in AngularJS help you manipulate datas through ng-model directive in the view. You only have to change datas in the specified controller through the scope.
Simple example, if you have to change a tag var or an input value, you have to specified a directive called ng-model to it, and a corresponding var like this “{{myModel}}” in the value field.
Concrete example, we specify a model directive we name “welcome”.
//Like many other templating engines we use double brackets to define vars
//When defined in the controller, the var model "{{welcome}}" will be dynamically replaced
<h1 ng-model='welcome'>{{welcome}}</h1>
In the controller, we simply add this to the scope
var app = angular.module('hello', []);
//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
$scope.welcome = 'Hello World!';
});
This is how your complete html code must look like.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Angular - first hello world</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<!-- ng-app is a directive that specifies that we are using angular.js -->
<body ng-app='hello'>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section ng-controller='helloController'>
<header id='header'>
<h1 ng-model='welcome'>{{welcome}}</h1>
</header>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="js/helloWorld.js"></script>
</body>
</html>
Congratulations, you’ve just done with success your first hello world tutorial with AngularJS, wasn’t it so simple?
More tutorials will come soon, keep in touch.
Creativ' Coders 