Ehsan Ghanbari

Experience, DotNet, Solutions

Basic definitions of AngularJS

A JavaScript framework (Not a library) based on MVV pattern created by Google which makes the code readable, organized and extensible.  You know in large application developments especially in SPAs which has been on top during the last few years, managing and developing JavaScript in client side is so hard. AngularJS provides some powerful features for developers like  Expressions, Directives, Data Binding, Filters, Partial Views, Modules, Dependency Injection, Routes, Controllers, Scope, Services… and makes the JavaScript development easier and powerful.

 Based on Wikipedia, AngularJS directives allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.

  1. ng-app: Declares an element as a root element of the application allowing the behavior to be modified through custom HTML tags.
  2. ng-bind: Automatically changes the text of an HTML element to the value of a given expression.
  3. ng-model: Similar to ng-bind, but allows two-way data binding between the view and the scope.
  4. ng-class: Allows class attributes to be dynamically loaded.
  5. ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.
  6. ng-repeat: Instantiate an element once per item from a collection.
  7. ng-show & ng-hide: Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
  8. ng-switch: Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
  9. ng-view: The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
  10. ng-if: Basic if statement directive which allows showing the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted. 

 

AngularJS features do not come in a single blog post (I'll cover all of them in the future). but for instance, run this piece of code and see the result (This is again one of those hello world samples!)

<html>

<head>

    <title>Angular</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>

<body>

    <div> <input type="text" ng-model="SayHello"> <h1>, {{ SayHello}}!</h1> </div>

</body>

</html>

 

About Me

Ehsan Ghanbari

Hi! my name is Ehsan. I'm a developer, passionate technologist, and fan of clean code. I'm interested in enterprise and large-scale applications architecture and design patterns. I spend a lot of time on software architecture. Since 2008, I've been as a developer for different companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the past years, Read More

Post Tags
Pending Blog Posts
using Elmah in asp.net MVC4
Using FluentSecurity in MVC
Strategic design
Factory Pattern
time out pattern in ajax
Redis as a cache server
How to use PagedList In asp.net MVC
Multiple submit buttons in asp.net MVC
Domain driven design VS model driven architecture
What's the DDD-lite?
comments powered by Disqus