Home / Uncategorized / Angularjs

Angularjs

Angularjs

AngularJS is an open source JavaScript framework we can call it is a superheroic JavaScript MVC framework also for the Web. We call it superheroic because AngularJS does so much for us that we only have to focus on our core application and let AngularJS take care of  everything else. In 2012, the AngularJS team released a Chrome plugin called Batarang which makes the debugging process a breeze. As a result, the products you develop with AngularJS are very robust and maintainable. It allows us to apply standard, tried-and-tested software engineering practices traditionally used on the server side in client-side programming to accelerate frontend development. It provides a consistent scalable structure that makes it a breeze to develop large, complex applications as part of a team.

Read:- what is Cascading Style Sheets

Angularjs

The complexity involved in building large-scale and complex AJAX apps is tremendous. AngularJS aims to minimize this complexity by offering a great environment for development, as well as the means to test your apps. As a client sideMVW(Model-View-Whatever) framework, one of the most powerful features of AngularJS is its ability to bring structure to your web apps. Another nice thing about AngularJS is that it extends the HTML vocabulary to make it suitable for building web apps, enabling you to create them declaratively; the resulting code is clean and very readable. AngularJS ships with many great features out of the box, which you’ll use in your day-to-day programming. It supports two-way data binding, nice templating, easy REST interaction, custom component creation, multiple views, routing, and much more. AngularJS also plays well with other libraries and frameworks. For example, you can combine jQuery and AngularJS together to create awesome web applications.

Our ability to create amazing web-based apps is incredible, but the complexity involved in making these apps is similarly incredible. We on the Angular team wanted to relieve the pain involved with developing AJAX applications. At Google, we’d worked through the hard lessons of building large web applications like Gmail, Maps, Calendar, and several others.

At the same time, we wanted an environment that helped us make the design choices that make apps easy to create and understand from the start, but that continue to be the right choices to make our apps easy to test, extend, and maintain as they grow large. We’ve tried to do this in the Angular framework. We’re very excited about the results we’ve achieved. A lot of credit goes to the open source community around Angular who do a fantastic job supporting each other and who have taught us many things. We hope you’ll join our community and help us learn how Angular can be even better. Some of the larger and more involved examples and code snippets are available on a GitHub repository for you to look at, fork, and play with at our GitHub page.

How Web Pages Get to Your Browser (Angularjs)

Let’s think of the Internet as a post office. When you want to send a letter to your friend, you first write your message on a piece of paper. Then you write your friend’s address on an envelope and place the letter inside of it. When you drop the letter off at the post office, the mail sorter looks at the postal code and address and tries to find where your friend lives. If she lives in a giant apartment complex, the postal service might deliver the mail to your friend’s front desk and let the building’s employees sort it out by apartments.

The Internet works in a similar way. Instead of a bunch of houses and apartments connected by streets, it is a bunch of computers connected by routers and wire. Every computer has a unique address that tells the network how to reach it. Similar to the apartment building analogy above, where we have many apartments that share the same address, several computers can exist on the same network or router (as when you connect to WiFi at a Starbucks). In this case, your computer shares the same IP address as the other computers. Your computer can be reached individually, however, by its “internal IP address” (like the apartment number in our analogy), about which the router is aware (as the apartment building employees in our analogy are aware of your friend’s apartment number).

IP stands for Internet Protocol. An IP address is a numerical identifier assigned to each device participating in a network. Computers, printers, and even cell phones have IP addresses. There are two main types of IP addresses: ipv4 and ipv6 addresses. The most common addresses today are ipv4 addresses. These look like 192.168.0.199. Ipv6 addresses look like 2001:0db8:0000:0000:0000:ff00:0042:8329. When you open your web browser on your computer and type in http://google.com, your web browser “asks” the internet (more precisely, it “asks” a DNS server) where google.com’s address is. If the DNS server knows the IP address you’re looking for, it responds with the address. If not,it passes the request along to other DNS servers until the IP address is found and serve $ dig google.com.

If you are on a Mac, you can open the terminal program called Terminal, usually located in your /Applications/Utilities. If you are using Windows, you can find your terminal by going to the Start Button and typing cmd in the Run option. Once the DNS server responds with the IP address of the computer you’re trying to reach (i.e., once it finds google.com), it also sends a message to the computer located at that IP address asking for the web page you’re requesting.

Every path of a web page is written with its own HTML (with a few exceptions). For example, when your browser requests http://google.com, it receives different HTML than if it were to request http://google.com/images. Now that your computer has the IP address it needs to get http://google.com, it asks the Google server for the HTML it needs to display the page. Once the remote server sends back that HTML, your web browser renders it (i.e., the browser works to make the HTML look the way google.com is designed to look).

Before we jump straight into our coverage of Angular, it’s important to know what your browser is doing when it renders a web page. There are many different web browsers; the most common browsers today include Chrome, Safari, Mozilla Firefox, and Internet Explorer. At their core, they all basically do the same thing: fetch web pages and display them to the user. Your browser gets the HTML text of the page, parses it into a structure that is internally meaningful to the browser, lays out the content of the page, and styles the content before displaying it to you.

All of this work happens behind the scenes. Our goal as web developers is to build the structure and content of our web page so that the browser will make it look great for our users. With Angular, we’re not only building the structure, but we’re constructing the interaction between the user and our app as a web application.

The official AngularJS introduction describes AngularJS as a:client-side technology, written entirely in JavaScript. It works with the long established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before. It is a framework that is primarily used to build single page web applications. AngularJS makes it easy to build interactive, modern web applications by increasing the level of abstraction between the developer and common web app development tasks. The AngularJS team describes it as a “structural framework for dynamic web apps.”

AngularJS makes it incredibly easy to build web applications; it also makes it easy to build complex applications. AngularJS takes care of advanced features that users have become accustomed to in modern web applications, such as:

• Separation of application logic, data models, and views

• Ajax services

• Dependency injection

• Browser history (makes bookmarking and back/forward buttons work like normal web apps)

• Testing

How Is It different?

In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from the outside in. For instance, using jQuery¹¹, to add a button in the DOM, we’ll have to know where we’re putting the element and insert it in the appropriate place:

var btn = $(“<button>Hi</button>”);

btn.on(‘click’, function(evt) { console.log(“Clicked button”) });

$(“#checkoutHolder”).append(btn);

Although this process is not complex, it requires the developer to have knowledge of the entire DOM and force our complex logic inside JavaScript code to manipulate a foreign DOM. AngularJS, on the other hand, augments HTML to give it native Model-View-Controller (MVC) capabilities. This choice, as it turns out, makes building impressive and expressive client-side applications quick and enjoyable. It enables you, the developer, to encapsulate a portion of your entire page as one application, rather than forcing the entire page to be an AngularJS application.

This distinction is particularly beneficial if your workflow already includes another framework or if you want to make a portion of the page dynamic while the rest operates as a static page or is controlled by another JavaScript framework. Additionally, the AngularJS team has made it a point to keep the library small when compressed, such that it does not impose heavy penalties for using it (the compressed, minified version weighs in under 9KB at the time of this writing). This feature makes AngularJS particularly good for prototyping new features.

License

The AngularJS source code is made freely available on Github under the MIT license. That means you can contribute to the source and help make AngularJS even better. In order to contribute, the Angular team has made the process relatively straightforward. Any major changes should be discussed on the Angular mailing list, thus making the potential change available for modification, allowing other developers to join in the discussion, and preventing code/work duplication. More information on contributing can be found at contribution section of the Angular website.

Data Binding and Your First AngularJS Web Application Hello World

The quintessential place to start writing an AngularJS app is with a hello world application. To write our hello world application, we’ll start with the simplest, most basic HTML we can possibly write. We’ll take a more in-depth look into AngularJS as we dive into the framework. For now, let’s build our hello world application.

<!DOCTYPE html>

<html ng-app>

<head>

<title>Simple app</title>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js”>

</script>

</head>

<body>

<input ng-model=”name” type=”text” placeholder=”Your name”>

<h1>Hello {{ name }}</h1>

</body>

</html>

Angularjs

I hope that you understand my post. if you like this post then share my post, and comment on my post if you have any suggestion or Queries related to Angularjs. Thank you!

Check Also

nas

nas

nas Making your own NAS If you have an old PC sitting around doing nothing, …

Leave a Reply

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