LEARN DEVELOP DISCUSS
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.
Visit [Link] for the actively supported Angular.
TRY THE NEW ANGULAR
DOWNLOAD ANGULARJS
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.
Visit [Link] for the actively supported Angular.
VIEW ON GITHUB Follow @angular
Why AngularJS? Alternatives Extensibility
HTML is great for declaring static documents, Other frameworks deal with HTML’s AngularJS is a toolset for building the
but it falters when we try to use it for declaring shortcomings by either abstracting away HTML, framework most suited to your application
dynamic views in web-applications. AngularJS CSS, and/or JavaScript or by providing an development. It is fully extensible and works
lets you extend HTML vocabulary for your imperative way for manipulating the DOM. well with other libraries. Every feature can be
application. The resulting environment is Neither of these address the root problem that modified or replaced to suit your unique
extraordinarily expressive, readable, and quick HTML was not designed for dynamic views. development workflow and feature needs. Read
to develop. on to find out how.
The Basics
Hint: hover over me . Edit Me
[Link]
1. <!doctype html>
2.
LEARNName: DEVELOP DISCUSS
<html ng-app >
3. <head> Enter a name here
4. AngularJS
<script support
src has officially ended as of January 2022. See what ending support means and read the end of life announcement.
="[Link]
[Link] "></script> Visit [Link] for the actively supported Angular.
5. </head>
6.
7.
<body>
<div>
Hello !
8. <label>Name:</label>
9. <input type="text" ng-model ="yourName" placeholder="Enter a name here">
10. <hr> Watch as we build this app
11. <h1>Hello {{yourName}} !</h1>
12. </div>
13. </body>
14. </html>
Add Some Control
Data Binding Controller Plain JavaScript
Data-binding is an automatic way of updating Controllers are the behavior behind the DOM Unlike other frameworks, there is no need to
the view whenever the model changes, as well elements. AngularJS lets you express the inherit from proprietary types in order to wrap
as updating the model whenever the view behavior in a clean readable form without the the model in accessors methods. AngularJS
changes. This is awesome because it usual boilerplate of updating the DOM, models are plain old JavaScript objects. This
eliminates DOM manipulation from the list of registering callbacks or watching model makes your code easy to test, maintain, reuse,
things you have to worry about. changes. and again free from boilerplate.
Hint: hover over me . Edit Me
[Link] [Link] [Link]
Todo
1 of 2 remaining [ archive ]
learn AngularJS
build an AngularJS app
add new todo here add
Watch as we build this app
1. <!doctype html>
2.
LEARN DEVELOP DISCUSS
<html ng-app ="todoApp">
3. <head>
4. AngularJS
<script support
src has officially ended as of January 2022. See what ending support means and read the end of life announcement.
="[Link]
[Link] "></script> Visit [Link] for the actively supported Angular.
5. <script src=" [Link] "></script>
6. <link rel="stylesheet" href="[Link]">
7. </head>
8. <body>
9. <h2>Todo</h2>
10. <div ng-controller ="TodoListController as todoList">
11. <span>{{[Link]()}} of {{[Link]}} remaining</
span>
12. [ <a href="" ng-click ="[Link]()">archive</a> ]
13. <ul class="unstyled">
14. <li ng-repeat ="todo in [Link]">
15. <label class="checkbox">
16. <input type="checkbox" ng-model ="[Link]">
17. <span class="done- {{[Link]}} ">{{[Link]}}</span>
18. </label>
19. </li>
20. </ul>
21. <form ng-submit ="[Link]()">
22. <input type="text" ng-model="[Link]" 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>
Create Components
Directives Reusable Components Localization
Directives are a unique and powerful feature We use directives to create reusable An important part of serious apps is
available in AngularJS. Directives let you invent components. A component allows you to hide localization. AngularJS's locale aware filters and
new HTML syntax, specific to your application. complex DOM structure, CSS, and behavior. This stemming directives give you building blocks to
lets you focus either on what the application make your application available in all locales.
does or how the application looks separately.
Hint: hover over me . Edit Me
[Link] [Link] [Link]
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
1. <!doctype html>
2.
LEARNCurrency:DEVELOP
123 456,00 € DISCUSS
<html ng-app= "app" >
Number: 98 765,432
3. <head>
4. AngularJS
<script support
src has officially ended as of January 2022. See what ending support means and read the end of life announcement.
="[Link]
[Link]"></script> Visit [Link] for the actively supported Angular.
5. <script src="[Link]"></script>
6. <script src="[Link]"></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>
Navigation, Forms and Backends
Deep Linking Form Validation Server Communication
A deep link reflects where the user is in the app. Client-side form validation is an important part AngularJS provides built-in services on top of
This is useful so users can bookmark and email of a great user experience. AngularJS lets you XHR as well as various other backends using
links to locations within the app. Round trip declare the validation rules of the form without third party libraries. Promises further simplify
apps get this automatically, but AJAX apps by having to write JavaScript code. Write less code, your code by handling asynchronous return of
their nature do not. AngularJS combines the go have beer sooner. data.
benefits of deep linking with desktop app-like
behavior.
Testability Built-in
Injectable Testable
The dependency injection in AngularJS allows you to declaratively AngularJS was designed from ground up to be testable. It encourages
describe how your application is wired. This means that your application behavior-view separation, comes pre-bundled with mocks, and takes full
needs no main() method which is usually an unmaintainable mess. advantage of dependency injection. It also comes with end-to-end
Dependency injection is also a core to AngularJS. This means that any scenario runner which eliminates test flakiness by understanding the inner
component which does not fit your needs can easily be replaced. workings of AngularJS.
Super-powered by Google ©2010-2021 Back to top
Code licensed under the The MIT License. Documentation licensed under CC BY 4.0.