AngularJS Introduction and examples

AngularJS

AngularJS is a MVC – Model View Controller framework i recommended in my previous post. Here i’,m going to go through the basics of Angular as well provide you with challenges and examples. Warning! this is not a full introduction to angular, here i just explain some nifty features to get you exited and show you some examples. Hope you enjoy! 

Angular, what is it?

Angular is framework used to write main table dynamic organized web applications. In your HTML you sprinkle what is called directives on your html tags. A directive is simply attributes Angular has defined that you place in your tags. The framework provides you with cool features that allow you to create structured web apps and single page applications(SPA). go to Angularjs.org to see how to get started and install it.

Directives

Directives and angular defined attributes that you place in your tags. Which your angular uses to manipulate the html page.There are many directives that come with angular like ng-app, ng-repeat, ng-model. you need ng-app to include this as some container element in your application in order for it to work with angular. later i will show you a simple example with ng-model.

Controllers

A controller is something you define in your JS files. you attach it to the DOM – Document Object Model by including the ng-controller directive on a container element. When you want to pass data to the DOM via the ng-controller directive you include the scope object in your controller.

Example

ng-model

This is a simple ng-model example. here the data getting retrieved from the input element is getting updated in real time and displayed in the h1 tag. all without even touching a javascript file. in angular you use something called expressions, they are composed of two curly braces on either side. you could do {{ 3 + 4 }} and it would display 7! This example will update the name in real time! the name expression all ways be equal to the value of the input field.

model

ng-controller

The $scope is what allows us to communicate data from the controller to the dom. in this example the myCtrl controller stores a greeting in $scope. The container element that carries the controller tag with a value of myCtrl now has access to the greeting variable.

ctrl

Challanges

a): What does MVC stand for?

b): What does the scope object do?

c): What is an expression?

d): what is a directive?

Thank you for reading! i hope you enjoyed this short intro. But this is by no means a comprehensive guide. I made this to get you exited about the cool features and get you interested in the framework. To read more go to their website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s