Overview of AngularJs Framework

Friday, January 15th, 2016 (0 Comment)

1. What is AngularJS Framework ?

AngularJS Framework is a very powerful front-end JavaScript framework and ease of use, it was developed by google. This is an Open Source Framework free and thousands of programmer worldwide popularity and using.

To learn Angular you must have basic knowledge of JavaScript, how to handle objects … Or even if you know JavaScript depth, it is an advantage a lot. AngularJs work as Single Page format, use the API to retrieve data format, so you must know the techniques handling DHTML, Ajax …

2. Why do we have to use Angularjs Framework ?

AngularJs is like the other frameworks, it offers to library, MVC pattern, the method helps us to develop a web application faster. Thanks AngularJs that we will write code less, but do more anything because AngularJs has built for us many things.

AngularJS use HTML to define the user interface of the application. HTML is a declarative language more intuitive and less complex than the procedure defined interface in JavaScript. HTML is also less fragile than to reorganize more interfaces by JavaScript which means everything little broken.

AngularJS automatically fix with different browsers, so you do not need to worry about browser compatibility issues.

3. How to install AngularJs Framework ?

Visit the site https://angularjs.org and download latest angularJs. In this way, you need to download to your computer angularJs and embedded directly into the application

Alternatively, you can use the compressed version of AngularJS available on the Google server. Using this method, there are 2 main benefits of saving bandwidth for your site and AngularJS will load faster if the user’s devices AngularJS cached. But this way you need network connectivity.

4. Write the first AngularJS program (helloworld)

First, you create html file with named helloworld.html and import angularJs library as the following:

Demo

  • Line 9: ng-app=”helloapp”, declare program beginning of AngularJs, this time AngularJS will recognize and handle the code inside the div tag. “Ng-app” is a required attribute offline, you cannot rename it. helloapp is the name of the application so you can set arbitrary name.
  • Line 11: declare a controller with name is helloController, ng-controller key is required because it is the attribute of AngularJS.
  • Line 14: angular.module(“helloapp “, []) : beginning coding for application with name is helloapp
  • Line 14: controller(“helloController “, function($scope) : handle controller with name is helloController
  • Line 15-18: Inside is the code to declare the return value. You should note that $scope variable is required (cannot change to another name), it is the component exchange information between views and controller, meaning that if you assign any variable in the $scope variable is in view will get that variable with the corresponding key. As in the example above, the key in the corresponding view is {{data.title}} and {{data.website}} because in $scope, you declare an object has two such key

Output:

In an application helloapp, you can create many controller . How to create multiple controllers in one app is a dot (.) to connect the code together. You see the following example to see more clearly.

Demo

  • I set two different controller and return to one $scope variable. $scope variable will render to view respectively each controller.
  • Each controller values in the $scope whether duplicate keys but it’s essentially 2 different controllers should it never be confused with one another

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

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