AngularJS Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it as a first AngularJS walkthrough for newcomers and for people stuck on todo-list style problems, and many askers say they followed it.
Recommended by 3 people across 3 different months, 2012 to 2015.
What it is
A 12-minute beginner screencast by John Lindquist that builds a small AngularJS todo list from scratch, covering controllers, scope, ng-repeat, filters and data binding. It also shows editor tricks like generating files from HTML as you type, and links a jsfiddle of the finished result.
What people said
Recommends Jahed · 2015-02 · Stack Overflow · on “AngularJS isn`t working”
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope). Check out the Todo example on Angular's official website, it's more up to date. [LINK] (scroll down). Here's the video for it: [this video]
Recommends sheppe · 2015-07 · Stack Overflow · on “$watch for ng-model changes”
It seems like you're just getting started with Angular, so it could be worth watching the video playlist at [this video]
Recommends Okazari · 2015-08 · Stack Overflow · on “AngularJS - Create HTML dynamically”
Actually the best way is to have a controller. Do the $http call in the controller. In the .success() function handle the value and store it into a $scope variable. Then in the HTML displaying it like this {{myvalue}}. You should do some great tutorial about angular [this video]
Cites Vojta · 2012-05 · Stack Overflow · on “AngularJS - Remove table row after object destroyed”
You don't want to access the DOM from the controller. That's against the Zen of Angular :-D Use ng-hide directive: <td><a ng-click="hide()" ng-hide="isHidden">Delete</a></td> And the controller just change the model value, that ng-hide is bound to (in this case isHidden property). How do you populate the table ? Are you using ng-repeat ? If so, it's enough to just remove the item from the collection that ng-repeat repeats over and the DOM will be updated automatically. Check out [this video]
Cites mmln · 2012-12 · Stack Overflow · on “Creating files while writing html in sublimetext2 (creating files from scope)”
I noticed a useful feature while watching angular.js how to video: [this video] That feature is creating a file (filename + file extention) based on what you write in html/css code. Is this possible with sublime text2? If so, is there such plugin i could use?
Cites spuder · 2013-05 · Stack Overflow · on “How to create a filter in AngularJS”
Using AngularJS, how do you create a subset of items in an array? For example; create a new array from "todos" that only includes the "done:true" items. function fooController ($scope) { $scope.todos = [ {text:'foo' , done:false}, {text:'foobar' , done:true}, {text:'foofoo' , done:false}, {text:'foobar2' , done:true} ] } [LINK] [this video] See about 10:45 -> end
Cites Angad Dubey · 2014-03 · Stack Overflow · on “filter function in angular js not working”
I've followed this basic AngularJS tutorial : [this video] Everything went well until I added the clearCompleted() method. it does not seem to be working: HTML: <!DOCTYPE html> <html ng-app> <head> <script type="text/javascript" src=" [LINK] "></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="todo.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="todo.css"> </head> <body> <div ng-controller=
Cites dcparham · 2014-11 · Stack Overflow · on “angular js todo list not showing up”
trying beginner's Angular using tutorial here: [this video] . i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" [LINK] , but also here: [what am i missing??] index.html: <!doctype html> <html ng-app> <head> <script src=" [LINK] "></script> <script src=" [LINK] "></script> <script type="text/javascript" src="js/todo.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" </head> <body> <div ng-controllers="TodoCtrl"> {{totalTodos}} </div> </body> </html> todo.js: function TodoCtrl($scope) { $scope.totalTodos = 4; }