Hi everyone in this blog I’m explaining about angularjs.
What is Angularjs?
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
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
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,
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.
Angular is not a single piece in the overall puzzle of building the
client-side of a web application. It handles all of the DOM and AJAX glue code
you once wrote by hand and puts it in a well-defined structure. This makes
Angular opinionated about how a CRUD application should be built. But while it
is opinionated, it also tries to make sure that its opinion is just a starting
point you can easily change. Angular comes with the following out-of-the-box:
Everything you need to build a CRUD app in a
cohesive set: data-binding, basic templating directives, form validation,
routing, deep-linking, reusable components, dependency injection.
Testability story: unit-testing, end-to-end
testing, mocks, test harnesses.
Seed application with directory layout and test
scripts as a starting point.
Angular simplifies application development by presenting a
higher level of abstraction to the developer. Like any abstraction, it comes at
a cost of flexibility. In other words not every app is a good fit for Angular.
Angular was built with the CRUD application in mind. Luckily CRUD applications
represent the majority of web applications. To understand what Angular is good
at, though, it helps to understand when an app is not a good fit for Angular.
Template: HTML with additional markup
Directives: extend HTML with custom attributes and elements
Model: the data shown to the user in the view and with which the
Scope: context where the model is stored so that controllers,
directives and expressions can access it
Expressions: access variables and functions from the scope
Compiler: parses the template and instantiates directives and
Filter: formats the value of an expression for display to the user
View: what the user sees (the DOM)
Data Binding: sync data between the model and the view
10. Controller: the business logic
11. Dependency Injection: Creates and wires
objects and functions
12. Injector: dependency injection
13. Module: a container for the
different parts of an app including controllers, services, filters, directives which
configures the Injector
14. Service: reusable business
logic independent of views
following example we will build a form to calculate the costs of an invoice in
with input fields for quantity and cost whose values are multiplied to produce
the total of the invoice:
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="clearfix"> </div>
<div class="clearfix"> </div>
table-bordered table-striped" ng-app>
<input type="number" min="0" ng-model="qty"></td>
<input type="number" min="0" ng-model="cost"></td>
cost | currency}}</td>
in my next post i'll explain about Jquery Validation Client