Scribd
Upload
56 views7 pages

Why Angularjs?: Learn Angular in Your Browser For Free!

AngularJS provides a framework for building dynamic web applications that aims to solve issues with using HTML for building dynamic views. It allows extending HTML with custom elements and binding data to the view. AngularJS is fully extensible and works well with other libraries. It provides features like data binding, controllers, dependency injection and testing capabilities to build powerful and testable web applications.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
56 views7 pages

Why Angularjs?: Learn Angular in Your Browser For Free!

AngularJS provides a framework for building dynamic web applications that aims to solve issues with using HTML for building dynamic views. It allows extending HTML with custom elements and binding data to the view. AngularJS is fully extensible and works well with other libraries. It provides features like data binding, controllers, dependency injection and testing capabilities to build powerful and testable web applications.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 7

Why AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring
dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your
application. The resulting environment is extraordinarily expressive, readable, and quick to
develop.

Alternatives

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS,
and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these
address the root problem that HTML was not designed for dynamic views.

Extensibility

AngularJS is a toolset for building the framework most suited to your application development.
It is fully extensible and works well with other libraries. Every feature can be modified or
replaced to suit your unique development workflow and feature needs. Read on to find out how.

Learn Angular in your browser for free!

The Basics

 index.html

1. <!doctype html>
2. <html ng-app>
3. <head>
4. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.j
s"></script>
5. </head>
6. <body>
7. <div>
8. <label>Name:</label>
9. <input type="text" ng-model="yourName" placeholder="Enter a name
here">
10. <hr>
11. <h1>Hello {{yourName}}!</h1>
12. </div>
13. </body>
14. </html>

Hint: hover over me.


Name:
Hello !
Watch as we build this app

Add Some Control

Data Binding

Data-binding is an automatic way of updating the view whenever the model changes, as well as
updating the model whenever the view changes. This is awesome because it eliminates DOM
manipulation from the list of things you have to worry about.

Controller

Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior
in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks
or watching model changes.

Plain JavaScript

Unlike other frameworks, there is no need to inherit from proprietary types in order to wrap the
model in accessors methods. AngularJS models are plain old JavaScript objects. This makes your
code easy to test, maintain, reuse, and again free from boilerplate.

 index.html
 todo.js
 todo.css

1. <!doctype html>
2. <html ng-app="todoApp">
3. <head>
4. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.j
s"></script>
5. <script src="todo.js"></script>
6. <link rel="stylesheet" href="todo.css">
7. </head>
8. <body>
9. <h2>Todo</h2>
10. <div ng-controller="TodoListController as todoList">
11. <span>{{todoList.remaining()}} of {{todoList.todos.length}}
remaining</span>
12. [ <a href="" ng-click="todoList.archive()">archive</a> ]
13. <ul class="unstyled">
14. <li ng-repeat="todo in todoList.todos">
15. <label class="checkbox">
16. <input type="checkbox" ng-model="todo.done">
17. <span class="done-{{todo.done}}">{{todo.text}}</span>
18. </label>
19. </li>
20. </ul>
21. <form ng-submit="todoList.addTodo()">
22. <input type="text" ng-model="todoList.todoText" size="30"
23. placeholder="add new todo here">
24. <input class="btn-primary" type="submit" value="add">
25. </form>
26. </div>
27. </body>
28. </html>

Hint: hover over me.

Todo
1 of 2 remaining [ archive ]

 learn AngularJS

 build an AngularJS app

Watch as we build this app


Wire up a Backend

Deep Linking

A deep link reflects where the user is in the app. This is useful so users can bookmark and email
links to locations within the app. Round trip apps get this automatically, but AJAX apps by their
nature do not. AngularJS combines the benefits of deep linking with desktop app-like behavior.

Form Validation

Client-side form validation is an important part of a great user experience. AngularJS lets you
declare the validation rules of the form without having to write JavaScript code. Write less code,
go have beer sooner.

Server Communication

AngularJS provides built-in services on top of XHR as well as various other backends using third
party libraries. Promises further simplify your code by handling asynchronous return of data. In
this example, we use the AngularFire library to wire up a Firebase backend to a simple
AngularJS app.

 index.html
 project.js
 list.html
 detail.html
 project-list.js

1. <!doctype html>
2. <html ng-app="project">
3. <head>
4. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.j
s"></script>
5. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-
resource.min.js">
6. </script>
7. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-
route.min.js">
8. </script>
9. <script
src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
10. <script
src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"
></script>
11. <script src="project.js"></script>
12. <script src="project-list.js"></script>
13. </head>
14. <body>
15. <h2>JavaScript Projects</h2>
16. <div ng-view></div>
17. </body>
18. </html>

Hint: hover over me.

JavaScript Projects

Project Description
Angular One framework. Mobile and desktop.
AngularJS HTML enhanced for web apps!
Backbone Models for your apps.
Cappucino Objective-J.
Ember Ambitious web apps.
GWT JS in Java.
jQuery Write less, do more.
Knockout MVVM pattern.
Polymer Reusable components for the modern web.
React A JavaScript library for building user interfaces.
Spine Awesome MVC Apps.
SproutCore A Framework for Innovative web-apps.

Create Components

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent
new HTML syntax, specific to your application.

Reusable Components
We use directives to create reusable components. A component allows you to hide complex
DOM structure, CSS, and behavior. This lets you focus either on what the application does or
how the application looks separately.

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming
directives give you building blocks to make your application available in all locales.

 index.html
 components.js
 app.js

1. <!doctype html>
2. <html ng-app="app">
3. <head>
4. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.j
s"></script>
5. <script src="components.js"></script>
6. <script src="app.js"></script>
7. </head>
8. <body>
9. <tabs>
10. <pane title="Localization">
11. <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
12. <span>Currency: {{ 123456 | currency }}</span><br>
13. <span>Number: {{ 98765.4321 | number }}</span><br>
14. </pane>
15. <pane title="Pluralization">
16. <div ng-controller="BeerCounter">
17. <div ng-repeat="beerCount in beers">
18. <ng-pluralize count="beerCount" when="beerForms"></ng-
pluralize>
19. </div>
20. </div>
21. </pane>
22. </tabs>
23. </body>
24. </html>

Hint: hover over me.

Locale: US

 Localization
 Pluralization

Date: Sunday, April 1, 2012


Currency: $123,456.00
Number: 98,765.432
Locale: SK

 Localization
 Pluralization

Date: nedeľa, 1. apríla 2012


Currency: 123 456,00 €
Number: 98 765,432

Testability Built-in

Injectable

The dependency injection in AngularJS allows you to declaratively describe how your
application is wired. This means that your application needs no main() method which is usually
an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any
component which does not fit your needs can easily be replaced.

Testable

AngularJS was designed from ground up to be testable. It encourages behavior-view separation,


comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes
with end-to-end scenario runner which eliminates test flakiness by understanding the inner
workings of AngularJS.

You might also like