Level 1: Getting Started

Getting Started With AngularJS

First of all lets talk about Why angularJS?. To make Single Page Applications (SPA) we required angularjs. Now what is SPA? Sometimes you noticed while browsing after clicking a button or link the page reloads again with fetching new contents from the server. Try this http://campus.codeschool.com/ and explore the things you will experience some awesome effects without reloading the whole page again. This is what does the angularJS for you it just update the part of the page instead reloading the whole page again.There are much more things to talk about it which we will discuss in this blog.

First of all i would like to tell you about this course...This course is divided in 5 levels which are listed below

• Getting Started
• Filters And Directives
• Forms, Models, And Validations
• Creating Directives
• Dependencies And Serivces

So let's get started with setting up the environment for our course.Following libraries are required for this course:

• Bootstrap
• AngularJS
• Jquery

Add above libraries in index.html.Your code should be look like this..

         <!DOCTYPE html>
         <html ng-app  lang="en">
         <head>
         <title>Shaping With AngularJS</title>
  <link rel="stylesheet" href="bootstrap.css">
         <script src="jquery.js"></script>
         <script src="angular.js"></script>
       
         </head>
         <body>
                      .................
                      .................
         </body>
         </html>
         

Note: To make it work please include ng-app directive at in the html tag..
To test your environment follow these steps:

1. Add expression in the body tag : {{"Hello,"+" AngularJS!"}}
2. Open index.html in your browser
3. Output should look like this

Hello, AngularJS!

If you found something wrong than please check the paths of files that you are including in index.html.
Few things that we can notice here is that:

• To tell the browser what part of the application is handled by the angularjs we use ng-app which tell the scope.
• what ever you write in between {{ }} will be processed by angularjs

What is AngulsrJS?

AngularJS is a javascript framework. Which is worked on MVC architecture. MVC architecture is a pattern used to develope applications. Where M stands for Model where the data reside, V for View i.e. the front end to which we interact and C for controller which sync Model to View or View to Model. The AngularJS basically help us in providing behaviour in our applications. Before proceeding i would like to tell some terminologies which will be helpful in understanding the angularjs.

Directives

Directive is a marker in HTML tag that tells angular to run some javascript code. For example: ng-click for click event etc.

Module:

Where we write the piece of the angular application.

Controllers:

Where we write behaviour for our application. We can say them function in reference of programming language

Hello, {{name}} !