What Is Angular.JS?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Angular is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?

The impedance mismatch between dynamic applications and static documents is often solved with:

  • a library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.
  • frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives. Examples include:

  • Data binding, as in {{}}.
  • DOM control structures for repeating, showing and hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

Info From  anguyea

 

___________________________________________________________________

Hi!

This is an example about that how to make a server list with Angular.js.

this code is in google and was readapted for this educational purpose.

At the end you should have a standard application of the capture below.

servers-example

 

What Do You Need?

For this example you need a three folders.

folder css folder js   folder imgs

And a app.html this is the code :

<!DOCTYPE  html>
<html lang="es" ng-app="app">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet"  href="css/normalize.css"  media="screen" />
    	<link rel="stylesheet"  href="css/foundation.min.css" media="screen" />  
			<meta charset="UTF-8" />
        <link rel="stylesheet"  href="css/ping.css"  media="screen" />
		<meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta>		

 <title>
        server list.
    </title>
    <link href="/css/result-light.css" type="text/css" rel="stylesheet"></link>
    <style type="text/css">

.responded {
    color:green;
}
.checking,.unchecked {
    color:#FF8C00;
}
.timeout {
    color:red;
}
    </style>
  
    </head>
<div style="float: left;">


</div>
        <div class="row" ng-controller="ServerController">

            <h1 class="subheader">List of Servers</h1>
            <div class="row">
        		<div class="large-12 columns">
        			 <label>Filter your search: </label>
        			 <input type="text" ng-model="buscador" />
        		</div>
        		<div class="large-12 columns">
        			<label>Establishes an order: </label>
	        		<select ng-model="tipoOrden">
				        <option value="">Choose an order</option>
				        <option value="title">Up</option>
				        <option value="-title">Down</option>
				     </select>
			    </div>
        	</div>
                <div style="margin-bottom: 25px" class="row panel radius" ng-repeat="article in articles|filter:buscador|orderBy:tipoOrden">              	
                    
	                <div class="large-3 columns">
	                	<img ng-src="imgs/{{article.img}}"/>
	                </div>
	                
	                <div class="large-8 columns">
	                	<h4 class="subheader">{{ article.title }}</h4><br />
	                	{{ article.sinopsis }}
	                </div>                  
                </div>
        </div>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/controller.js"></script>
    </body>
</html>

 

I’ve attached the completed example  angular.rar (11 downloads )

smile Enjoy

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>