building your first AngularJS app does not seem that hard , but you don’t know where to start. In this guide, I’ll make getting started as simple as possible.
First I’ll discuss the difficulties of building web applications, and how we can use AngularJS to solve those difficulties ,Then, we’ll look at how to create an AngularJS project from scratch.
Web App Challenges
in general website uses a client-server architecture. so there are two main parts
- your device or web browser.
- the server where the website is hosted.
You type a URL in the browser, and the server sends your browser the HTML, CSS, and Javascript to display the requested web page.
You can interact with the page by clicking buttons and links on the page. so you are basically requesting a whole new page each time you clicked.
This was fine when web pages were static. Now, web pages can be full applications, with interactive user interfaces,and here where the traditional model goes into problems. Every time you click, the whole page is reloaded. This makes a page slow and unresponsive to the user because there is parts that doesn’t have to be changed,so, what we need here is only new information is requested from our server. The rest left static.
Single Page Web Applications
this is about building a single page application so when you visit ,your browser only sends the single page ,this results in a more faster and nicer web app ,in addition many businesses use this approach for their web app projects, including large companies and startups.
Who Does AngularJS Fit In?
AngularJS is a front-end framework for building Single Page Applications. It helps extend HTML to be more dynamic, and suitable for building these type of applications. It’s open source, with support from Google.
Angular is a whole framework of tools to help us build better web applications.
What You Should Know For This Tutorial
Before go through coding, you have to know a little about
-1)HTML -2)CSS -3)Javascript Frameworks -4)jQuery
AngularJS Important Concepts
here are a few concepts you need to know before building your own AngularJS app.
MVC is a design pattern for implementing user interfaces. It separate the logic in our code from how it is displayed. By doing this, we end up with a much elegant and testable application.
2-Way Data Binding
With jQuery, it’s possible to automatically update parts of our page when other information is changed but it’s more complicated. AngularJS has an awesome feature called 2-way data binding. It allows you to bind things together, so that when one thing changes the other one does too at the same time.
Directives
I mentioned before that AngularJS extends HTML. so it’s through directives, AngularJS directives are HTML attributes that start with ng-. These tell Angular to bind a specific behavior to an HTML element.
<html ng-app>
This directive is telling Angular to treat our HTML page as an application.
Building a Sample AngularJS Project
Now, we are going to build a first AngularJS app. this simple app is going to ask for your name,at the same time, it will be displayed on a different line, we are going to use the two concepts we mentioned before 2-way data binding and directives.
Setting Up
Our project is going have one file called index.html.
index.html
<!doctype html> . <html> <head> </head> . <body> . <div> . <label>Name:</label> . <input type="text" placeholder="Enter a name here"> <hr> . <h1>Hello! Your Name</h1> . </div> . </body> </html>
Next, we are going to add some functionality using AngularJS.
Adding in AngularJS
Firstly we’ll need to get the AngularJS framework into our project,the easiest way to do this is to use the hosted version. by including these script tags in the head tags .
<head> . <script . src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> . </head>
AngularJS installed now in our app, we’ll start adding some Directives to let Angular know what to do using the ng- tags .
Adding Directives
In the <html> tag, we need to add ng-app.
<html ng-app>
this tells AngularJS to be active on this section of our html.
Binding Data Together
We want our “Hello! Your Name†text to display the name we type, at the same time we type it. With jQuery, this would be complicated with functions and listeners.but, this is the power of AngularJS it makes things simple, all we need to do is bind the data from our text input field to the text in the “Hello! Your Name†field and this will make the second show the same text we wrote in the first field.
First we add the ng-model=â€yourName†to our <input> tag.
<input type="text" ng-model="yourName" placeholder="Enter a name here">
then,replace the “Your Name†text in the <h1> tags with {{yourName}}.
<h1>Hello! {{yourName}}!</h1>Test It Out
Whatever you type into the name field should automatically be displayed below.
Finally here is the complete code.
<!doctype html> .
<html ng-app> .
<head> .
<script . src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> .
</head> .
<body> .
<div> .
<label>Name:</label> .
<input type="text" ng-model="yourName" placeholder="Enter a name here"> .
<hr> .
<h1>Hello! {{yourName}}!</h1> .
</div> .
</body> .
</html>
Check out these top 3 Best web hosting services
- Want to get top recommendations about best hosting? Just click this link!
