CodeWorld55

Showing posts with label Javascript. Show all posts

How to Setup Environment of Angular JS

In this part we will examine about how to set up AngularJS library to be utilized as a part of web application advancement. We will likewise quickly ponder the index structure and its substance.

When you open the connection https://angularjs.org/, you will see there are two alternatives to download AngularJS library:

- View on GitHub- Click on this catch to go to GitHub and get the majority of the most recent scripts.

- Download- Or tap on this catch, a screen as underneath would be seen:

This screen gives different choices of utilizing Angular JS as takes after:

# Downloading and facilitating records generally

There are two unique choices legacy and most recent. The names itself are self unmistakable. legacy has form under 1.2.x and most recent has 1.3.x rendition.

We can likewise run with the minified, uncompressed or compressed form.

# CDN access: You additionally have entry to a CDN. The CDN will give you access the world over to territorial server farms that for this situation, Google host. This implies utilizing CDN moves the obligation of facilitating records from your own servers to a progression of outer ones. This likewise offers leeway that if the guest to your site page has officially downloaded a duplicate of AngularJS from the same CDN, it won't need to be re-downloaded.

We are utilizing the CDN adaptations of the library all through this instructional exercise.

Example

Presently give us a chance to compose a straightforward illustration utilizing AngularJS library. Give us a chance to make a HTML record myfirstexample.html as underneath:

<!doctype html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>
   <body ng-app="myapp">
      <div ng-controller="HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>

Following sections describe the above code in detail:

Include AngularJS

<head>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Point to AngularJS app

Next we tell what a piece of the HTML contains the AngularJS application. This done by including the ng-application ascribe to the root HTML component of the AngularJS application. You can either add it to html component or body component as demonstrated as follows:

<body ng-app="myapp">
</body>

View

The view is this part:

<div ng-controller="HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller advises AngularJS what controller to use with this perspective. helloTo.title advises AngularJS to compose the "model" worth named helloTo.title to the HTML at this area.

Controller

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
    });
</script>

This code enlists a controller capacity named HelloController in the precise module named myapp. We will consider all the more about modules and controllers in their separate sections. The controller capacity is enrolled in precise by means of the angular.module(...).controller(...) capacity call.

The $scope parameter went to the controller capacity is the model. The controller capacity includes a helloTo JavaScript object, and in that protest it includes a title field.

Execution

Save the above code as myfirstexample.html and open it in any program. You will see a yield as beneath:

At the point when the page is stacked in the program, taking after things happen:

HTML archive is stacked into the program, and assessed by the program. AngularJS JavaScript document is stacked, the precise worldwide article is made. Next, JavaScript which enlists controller capacities is executed.

Next AngularJS look over the HTML to search for AngularJS applications and perspectives. When perspective is found, it join that view to the comparing controller capacity.

Next, AngularJS executes the controller capacities. It then renders the perspectives with information from the model populated by the controller. The page is currently prepared.

AngularJS is an effective JavaScript library. It is utilized as a part of Single Page Application (SPA) ventures. It amplifies HTML DOM with extra traits and makes it more receptive to client activities. AngularJS is open source, totally free, and utilized by a huge number of engineers the world over. It is authorized under the Apache permit form 2.0.

This instructional exercise is intended for programming experts who need to take in the nuts and bolts of AngularJS and its customizing ideas in basic and simple steps. It depicts the segments of AngularJS with suitable samples.

You ought to have an essential comprehension of JavaScript and any content manager. As we are going to create online applications utilizing AngularJS, it will be great in the event that you have a comprehension of other web advances, for example, HTML, CSS, AJAX, and so on.

What is AngularJS?

AngularJS is an open source web application structure. It was initially grown in 2009 by Misko Hevery and Adam Abrons. It is currently kept up by Google. Its most recent rendition is 1.3.14.

Meaning of AngularJS as put by its official documention is as per the following:

AngularJS is an auxiliary structure for element web applications. It gives you a chance to utilize HTML as your layout dialect and gives you a chance to extend HTML's language structure to express your application's parts unmistakably and briefly. Rakish's information tying and reliance infusion kill a significant part of the code you right now need to compose. What's more, it all happens inside of the program, making it a perfect accomplice with any server innovation.

Features

AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).

AngulajJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.

Application written in AngularJS is cross-browser compliant. AngularJS automatically handles javascript code suitable for each browser.

AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Overall, AngularJS is a framework to build large scale and high performance web appliation while keeping them as easy-to-maintain.

Core Features

Taking after are most vital center components of AngularJS:

Information tying: It is the programmed synchronization of information in the middle of model and perspective segments.

Scope: These are protests that allude to the model. They go about as a paste in the middle of controller and perspective.

Controller: These are Javascript capacities that are sure to a specific degree.

Administrations: AngularJS accompany a few inherent administrations for instance $http to make a XMLHttpRequests. These are singleton objects which are instantiated just once in application.

Channels: These select a subset of things from a cluster and returns another exhibit.

Mandates: Directives are markers on DOM components, (for example, components, characteristics, css, and that's just the beginning). These can be utilized to make custom HTML labels that serve as new, custom gadgets. AngularJS has fabricated in mandates (ngBind, ngModel...)

Templates:These are the rendered perspective with data from the controller and model. These can be a solitary record (like index.html) or different perspectives in one page utilizing "partials".

Directing: It is idea of exchanging perspectives.

Model View Whatever: MVC is a configuration design for isolating an application into distinctive parts (called Model, View and Controller), each with unmistakable obligations. AngularJS does not actualize MVC in the customary sense, but instead something closer to MVVM (Model-View-ViewModel). The Angular JS group alludes it amusingly as Model View Whatever.

Profound Linking: Deep connecting permits you to encode the condition of utilization in the URL with the goal that it can be bookmarked. The application can then be restored from the URL to the same state.

Reliance Injection: AngularJS has an implicit reliance infusion subsystem that helps the designer by making the application simpler to create, comprehend, and test.

Concepts

Taking after graph portrays some vital parts of AngularJS which we will talk about in point of interest in the resulting sections.

angular js tutorial example introduction

Advantages of AngularJS

AngularJS gives ability to make Single Page Application in a clean and viable way.

AngularJS gives information tying ability to HTML accordingly giving client a rich and responsive experience

AngularJS code is unit testable.

AngularJS utilizes reliance infusion and make utilization of partition of concerns.

AngularJS gives reusable parts.

With AngularJS, designer compose less code and get more usefulness.

In AngularJS, perspectives are unadulterated html pages, and controllers written in javascript do the business preparing.

On top of everything, AngularJS applications can keep running on every real program and PDAs including Android and iOS based telephones/tablets.

Disadvantages of AngulaJS

Despite the fact that AngularJS accompanies heaps of in addition to focuses yet same time we ought to consider the accompanying focuses:

Not Secure : Being JavaScript just structure, application written in AngularJS are not protected. Server side confirmation and approval is must to keep an application secure.

Not degradable: If your application client debilitates Javascript then client will simply see the fundamental page and nothing more.

The AngularJS Components

The AngularJS structure can be partitioned into taking after three noteworthy parts:

ng-application : This mandate characterizes and joins an AngularJS application to HTML.

ng-model : This mandate ties the estimations of AngularJS application information to HTML info controls.

ng-tie : This mandate ties the AngularJS Application information to HTML labels.

CodeWorld55

AngularJS - MVC Architecture

The Model

The View

The Controller

AngularJS Environment Setup