| <a href='http://github.com/angular/angular.js/edit/master/docs/content/guide/index.ngdoc' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit"> </i>Improve this doc</a> |
| |
| |
| <h1 id="guide-to-angularjs-documentation">Guide to AngularJS Documentation</h1> |
| <p>Everything you need to know about AngularJS</p> |
| <ul> |
| <li><a href="guide/introduction">What is AngularJS?</a></li> |
| <li><a href="guide/concepts">Conceptual Overview</a></li> |
| </ul> |
| <h2 id="tutorials">Tutorials</h2> |
| <ul> |
| <li><a href="tutorial/index">Official AngularJS Tutorial</a></li> |
| <li><a href="http://www.sitepoint.com/10-reasons-use-angularjs/">10 Reasons Why You Should Use AngularJS</a></li> |
| <li><a href="http://wintellect.com/blogs/jlikness/10-reasons-web-developers-should-learn-angularjs">10 Reasons Why Developers Should Learn AngularJS</a></li> |
| <li><a href="https://www.youtube.com/watch?v=HCR7i5F5L8c">Design Principles of AngularJS (video)</a></li> |
| <li><a href="http://www.youtube.com/watch?v=i9MHigUZKEM">Fundamentals in 60 Minutes (video)</a></li> |
| <li><a href="http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background">For folks with a jQuery background</a></li> |
| </ul> |
| <h2 id="core-concepts">Core Concepts</h2> |
| <h3 id="templates">Templates</h3> |
| <p>In Angular applications, you move the job of filling page templates with data from the server to the client. The result is a system better structured for dynamic page updates. Below are the core features you'll use.</p> |
| <ul> |
| <li><a href="guide/databinding">Data binding</a></li> |
| <li><a href="guide/expression">Expressions</a></li> |
| <li><a href="guide/directive">Directives</a></li> |
| <li><a href="api/ngRoute/service/$route">Views and routes (see the example)</a></li> |
| <li><a href="guide/filter">Filters</a></li> |
| <li><a href="guide/forms">Forms</a> and <a href="http://mrbool.com/the-concepts-of-angularjs-forms/29117">Concepts of AngularJS Forms</a></li> |
| </ul> |
| <h3 id="application-structure">Application Structure</h3> |
| <ul> |
| <li><strong>Blog post: </strong><a href="http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/">When to use directives, controllers or services</a></li> |
| <li><strong>App wiring:</strong> <a href="guide/di">Dependency injection</a></li> |
| <li><strong>Exposing model to templates:</strong> <a href="guide/scope">Scopes</a></li> |
| <li><strong>Communicating with servers:</strong> <a href="api/ng/service/$http">$http</a>, <a href="api/ngResource/service/$resource">$resource</a></li> |
| </ul> |
| <h3 id="other-angularjs-features">Other AngularJS Features</h3> |
| <ul> |
| <li><strong>Animation:</strong> <a href="guide/animations">Core concepts</a>, <a href="api/ngAnimate">ngAnimate API</a>, and <a href="http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html">Animation in AngularJS 1.2</a></li> |
| <li><strong>Security:</strong> <a href="api/ng/service/$sce">Strict Contextual Escaping</a>, <a href="api/ng/directive/ngCsp">Content Security Policy</a>, <a href="api/ngSanitize/service/$sanitize">$sanitize</a>, <a href="https://www.youtube.com/watch?v=18ifoT-Id54">video</a></li> |
| <li><strong>Internationalization and Localization:</strong> <a href="guide/i18n">Angular Guide to i18n and l10n</a>, <a href="api/ng/filter/date">date filter</a>, <a href="api/ng/filter/currency">currency filter</a>, <a href="http://www.novanet.no/blog/hallstein-brotan/dates/2013/10/creating-multilingual-support-using-angularjs/">Creating multilingual support</a></li> |
| <li><strong>Mobile:</strong> <a href="api/ngTouch">Touch events</a></li> |
| </ul> |
| <h3 id="testing">Testing</h3> |
| <ul> |
| <li><strong>Unit testing:</strong> <a href="http://www.youtube.com/watch?v=YG5DEzaQBIc">Using Karma (video)</a>, <a href="guide/dev_guide.unit-testing">Unit testing</a>, <a href="guide/dev_guide.services.testing_services">Testing services</a>, <a href="http://blog.jetbrains.com/webstorm/2013/10/running-javascript-tests-with-karma-in-webstorm-7/">Karma in Webstorm</a></li> |
| <li><strong>Scenario testing:</strong> <a href="https://github.com/angular/protractor">Protractor</a></li> |
| </ul> |
| <h2 id="specific-topics">Specific Topics</h2> |
| <ul> |
| <li><strong>Login: </strong><a href="https://developers.google.com/+/photohunt/python">Google example</a>, <a href="http://blog.brunoscopelliti.com/facebook-authentication-in-your-angularjs-web-app">Facebook example</a>, <a href="http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app">authentication strategy</a>, <a href="http://frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/">unix-style authorization</a></li> |
| <li><strong>Mobile:</strong> <a href="http://www.ng-newsletter.com/posts/angular-on-mobile.html">Angular on Mobile Guide</a>, <a href="http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/">PhoneGap</a></li> |
| <li><strong>Other Languages:</strong> <a href="http://www.coffeescriptlove.com/2013/08/angularjs-and-coffeescript-tutorials.html">CoffeeScript</a>, <a href="https://github.com/angular/angular.dart.tutorial/wiki">Dart</a></li> |
| <li><strong>Realtime: </strong><a href="http://www.creativebloq.com/javascript/angularjs-collaboration-board-socketio-2132885">Socket.io</a>, <a href="https://github.com/jeffbcross/omnibinder">OmniBinder</a></li> |
| <li><strong>Visualization:</strong> <a href="http://gaslight.co/blog/angular-backed-svgs">SVG</a>, <a href="http://www.ng-newsletter.com/posts/d3-on-angular.html">D3.js</a></li> |
| <li><strong>Local Storage and session:</strong> <a href="https://github.com/gsklee/ngStorage">ngStorage</a></li> |
| </ul> |
| <h2 id="tools">Tools</h2> |
| <ul> |
| <li><strong>Debugging:</strong> <a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en">Batarang</a></li> |
| <li><strong>Testing:</strong> <a href="http://karma-runner.github.io">Karma</a>, <a href="https://github.com/angular/protractor">Protractor</a></li> |
| <li><strong>Editor support:</strong> <a href="http://plugins.jetbrains.com/plugin/6971">Webstorm</a> (and <a href="http://www.youtube.com/watch?v=LJOyrSh1kDU">video</a>), <a href="https://github.com/angular-ui/AngularJS-sublime-package">Sublime Text</a>, <a href="http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012">Visual Studio</a></li> |
| <li><strong>Workflow:</strong> <a href="https://github.com/yeoman/generator-angular">Yeoman.io</a> and <a href="http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/">Angular Yeoman Tutorial</a></li> |
| </ul> |
| <h2 id="complementary-libraries">Complementary Libraries</h2> |
| <p>This is a short list of libraries with specific support and documentation for working with Angular. You can find a full list of all known Angular external libraries at <a href="http://ngmodules.org/">ngmodules.org</a>.</p> |
| <ul> |
| <li><strong>Internationalization:</strong> <a href="http://angular-translate.github.io">angular-translate</a>, <a href="http://angular-gettext.rocketeer.be/">angular-gettext</a></li> |
| <li><strong>RESTful services:</strong> <a href="https://github.com/mgonto/restangular">Restangular</a></li> |
| <li><strong>SQL and NoSQL backends:</strong> <a href="http://www.breezejs.com/">BreezeJS</a>, <a href="http://angularfire.com/">AngularFire</a></li> |
| <li><strong>UI Widgets: </strong><a href="http://kendo-labs.github.io/angular-kendo/#/">KendoUI</a>, <a href="http://angular-ui.github.io/bootstrap/">UI Bootstrap</a>, <a href="http://wijmo.com/tag/angularjs-2/">Wijmo</a></li> |
| <li><strong>Advanced Routing:</strong> <a href="https://github.com/angular-ui/ui-router">UI-Router</a></li> |
| </ul> |
| <h2 id="deployment">Deployment</h2> |
| <h3 id="general">General</h3> |
| <ul> |
| <li><strong>Javascript minification: </strong><a href="http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/">Background</a>, <a href="http://www.thinkster.io/pick/XlWneEZCqY/angularjs-ngmin">ngmin automation tool</a></li> |
| <li><strong>Tracking:</strong> <a href="http://ngmodules.org/modules/angularytics">Angularyitcs (Google Analytics)</a>, <a href="http://www.bennadel.com/blog/2542-Logging-Client-Side-Errors-With-AngularJS-And-Stacktrace-js.htm">Logging Client-Side Errors</a></li> |
| <li><strong>SEO:</strong> <a href="http://www.yearofmoo.com/2012/11/angularjs-and-seo.html">By hand</a>, <a href="http://prerender.io/">prerender.io</a>, <a href="http://www.brombone.com/">Brombone</a>, <a href="http://getseojs.com/">SEO.js</a>, <a href="http://www.seo4ajax.com/">SEO4Ajax</a></li> |
| </ul> |
| <h3 id="server-specific">Server-Specific</h3> |
| <ul> |
| <li><strong>Django:</strong> <a href="http://blog.mourafiq.com/post/55034504632/end-to-end-web-app-with-django-rest-framework">Tutorial</a>, <a href="http://django-angular.readthedocs.org/en/latest/integration.html">Integrating AngularJS with Django</a>, <a href="http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html">Getting Started with Django Rest Framework and AngularJS</a></li> |
| <li><strong>FireBase:</strong> <a href="http://angularfire.com/">AngularFire</a>, <a href="http://www.youtube.com/watch?v=C7ZI7z7qnHU">Realtime Apps with AngularJS and FireBase (video)</a></li> |
| <li><strong>Google Cloud Platform: </strong><a href="https://cloud.google.com/resources/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications">with Cloud Endpoints</a>, <a href="https://github.com/GoogleCloudPlatform/appengine-angular-gotodos">with Go</a></li> |
| <li><strong>Hood.ie:</strong> <a href="http://www.roberthorvick.com/2013/06/30/todomvc-angularjs-hood-ie-60-minutes-to-awesome/">60 Minutes to Awesome</a></li> |
| <li><strong>MEAN Stack: </strong><a href="http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and">Blog post</a>, <a href="http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/">Setup</a>, <a href="https://developers.google.com/live/shows/913996610">GDL Video</a></li> |
| <li><strong>Rails: </strong><a href="http://coderberry.me/blog/2013/04/22/angularjs-on-rails-4-part-1/">Tutorial</a>, <a href="https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4">AngularJS with Rails4</a>, <a href="https://github.com/hiravgandhi/angularjs-rails">angularjs-rails</a></li> |
| <li><strong>PHP: </strong><a href="http://blog.brunoscopelliti.com/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource">Building a RESTful web service</a>, <a href="http://www.youtube.com/watch?v=hqAyiqUs93c">End to End with Laravel 4 (video)</a></li> |
| </ul> |
| <h2 id="learning-resources">Learning Resources</h2> |
| <h3 id="books">Books</h3> |
| <ul> |
| <li><a href="http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852">AngularJS</a> by Brad Green and Shyam Seshadri</li> |
| <li><a href="http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821">Mastering Web App Development</a> by Pawel Kozlowski and Pete Bacon Darwin</li> |
| <li><a href="http://www.amazon.com/AngularJS-Directives-Alex-Vanston/dp/1783280336">AngularJS Directives</a> by Alex Vanston</li> |
| <li><a href="http://www.amazon.co.uk/Recipes-Angular-js-Frederik-Dietz-ebook/dp/B00DK95V48">Recipes With AngularJS</a> by Frederik Dietz</li> |
| <li><a href="http://www.amazon.com/Developing-AngularJS-Edge-Christopher-Hiller-ebook/dp/B00CJLFF8K">Developing an AngularJS Edge</a> by Christopher Hiller</li> |
| <li><a href="http://ng-book.com/">ng-book: The Complete Book on AngularJS</a> by Ari Lerner</li> |
| </ul> |
| <h3 id="videos-">Videos:</h3> |
| <ul> |
| <li><a href="http://egghead.io/">egghead.io</a></li> |
| <li><a href="http://youtube.com/angularjs">Angular on YouTube</a></li> |
| </ul> |
| <h3 id="courses">Courses</h3> |
| <ul> |
| <li><strong>Free online:</strong> |
| <a href="http://thinkster.io">thinkster.io</a>, |
| <a href="http://www.codecademy.com/courses/javascript-advanced-en-2hJ3J/0/1">CodeAcademy</a></li> |
| <li><strong>Paid online:</strong> |
| <a href="http://www.pluralsight.com/training/Courses/Find?highlight=true&searchTerm=angularjs">Pluralsite (3 courses)</a>, |
| <a href="https://tutsplus.com/course/easier-js-apps-with-angular/">Tuts+</a>, |
| <a href="http://www.lynda.com/AngularJS-tutorials/Up-Running-AngularJS/133318-2.html">lynda.com</a> |
| <a href="http://www.wintellectnow.com/Course/Detail/mastering-angularjs">WintellectNOW (4 lessons)</a></li> |
| <li><strong>Paid onsite:</strong> |
| <a href="http://angularbootcamp.com/">angularbootcamp.com</a></li> |
| </ul> |
| <h2 id="getting-help">Getting Help</h2> |
| <p>The recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on <a href="http://plnkr.co/">Plunker</a>, <a href="http://jsfiddle.net/">JSFiddle</a>, or similar site and then post to one of the following:</p> |
| <ul> |
| <li><a href="http://stackoverflow.com/search?q=angularjs">Stackoverflow.com</a></li> |
| <li><a href="https://groups.google.com/forum/#!forum/angular">AngularJS mailing list</a></li> |
| <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">AngularJS IRC channel</a></li> |
| </ul> |
| <h2 id="social-channels">Social Channels</h2> |
| <ul> |
| <li><strong>Daily updates:</strong> <a href="https://plus.google.com/u/0/+AngularJS">Google+</a> or <a href="https://twitter.com/angularjs">Twitter</a></li> |
| <li><strong>Weekly newsletter:</strong> <a href="http://www.ng-newsletter.com/">ng-newsletter</a></li> |
| <li><strong>Meetups: </strong><a href="http://www.meetup.com/find/?keywords=angularJS&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94108&mcName=San+Francisco%2C+CA&sort=member_count&eventFilter=mysugg">meetup.com</a></li> |
| <li><strong>Official news and releases: </strong><a href="http://blog.angularjs.org/">AngularJS Blog</a></li> |
| </ul> |
| <h2 id="contributing-to-angularjs">Contributing to AngularJS</h2> |
| <p>Though we have a core group of core contributors at Google, Angular is an open source project with hundreds of contributors. We'd love you to be one of them. When you're ready, please read the <a href="misc/contribute">Guide for contributing to AngularJS</a>.</p> |
| <h2 id="final-bits">Final Bits</h2> |
| <p>Didn't find what you're looking for here? Check out <a href="https://github.com/jmcunningham/AngularJS-Learning">AngularJS-Learning</a> for an even more comprehensive list of links to videos, tutorials, and blog posts.</p> |
| <p>If you have awesome AngularJS resources that belong on this page, please tell us about them on <a href="https://plus.google.com/u/0/+AngularJS">Google+</a> or <a href="https://twitter.com/angularjs">Twitter</a>.</p> |
| |
| |
