index.html<\/p>\n
<!-- \u672c\u6bb5\u793a\u4f8b\u4ee3\u7801\u6765\u81ea AngularJS \u5b98\u65b9\u7ad9\u70b9 angularjs.org -->\r\n<!doctype html>\r\n<!-- ng-app \u8868\u793a\u5728\u5f53\u524d\u533a\u57df\u5185\u542f\u7528 AngularJS -->\r\n<html ng-app>\r\n <head>\r\n <!-- \u8f7d\u5165 AngularJS \u6587\u4ef6 -->\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.3\/angular.min.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <div>\r\n <label>Name:<\/label>\r\n <!-- ng-model \u8868\u793a\u5f53\u524d\u63a7\u4ef6\u4e0e\u6307\u5b9a model \u5173\u8054\u3002\u63a7\u4ef6\u53d8\u66f4\u65f6\uff0cmodel \u4e5f\u4f1a\u6539\u53d8\uff0c\u53cd\u4e4b\u4ea6\u7136 -->\r\n <input type=\"text\" ng-model=\"yourName\" placeholder=\"Enter a name here\">\r\n <hr>\r\n <!-- {{ }} \u7528\u4e8e\u7ed1\u5b9a model\u3002\u5f53 model \u7684\u503c\u6539\u53d8\uff0c\u6b64\u5904\u7684\u663e\u793a\u4e5f\u4f1a\u6539\u53d8 -->\r\n <h1>Hello {{yourName}}!<\/h1>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/pre>\n\u4f7f\u7528\u63a7\u4ef6<\/h3>\n
index.html<\/p>\n
<!doctype html>\r\n<html ng-app=\"todoApp\">\r\n <head>\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.3\/angular.min.js\"><\/script>\r\n <!-- \u4e1a\u52a1\u903b\u8f91\u4f9d\u7136\u901a\u8fc7 JavaScript \u5b9e\u73b0 -->\r\n <script src=\"todo.js\"><\/script>\r\n <link rel=\"stylesheet\" href=\"todo.css\">\r\n <\/head>\r\n <body>\r\n <h2>Todo<\/h2>\r\n <!-- \u8be5 div \u7684\u884c\u4e3a\u5c06\u901a\u8fc7 TodoListController \u7c7b\u63a7\u5236 -->\r\n <div ng-controller=\"TodoListController as todoList\">\r\n <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining<\/span>\r\n <!-- ng-click \u5b9a\u4e49\u4e86\u70b9\u51fb\u65f6\u5c06\u8c03\u7528\u54ea\u4e2a\u65b9\u6cd5 -->\r\n [ <a href=\"\" ng-click=\"todoList.archive()\">archive<\/a> ]\r\n <ul class=\"unstyled\">\r\n <!-- ng-repeat \u53ef\u81ea\u52a8\u904d\u5386\u5e76\u5411 DOM \u6dfb\u52a0\u5143\u7d20 -->\r\n <li ng-repeat=\"todo in todoList.todos\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" ng-model=\"todo.done\">\r\n <span class=\"done-{{todo.done}}\">{{todo.text}}<\/span>\r\n <\/label>\r\n <\/li>\r\n <\/ul>\r\n <!-- \u70b9\u51fb\u6309\u94ae\u65f6\u5c06\u8c03\u7528 addTodo() -->\r\n <form ng-submit=\"todoList.addTodo()\">\r\n <input type=\"text\" ng-model=\"todoList.todoText\" size=\"30\"\r\n placeholder=\"add new todo here\">\r\n <input class=\"btn-primary\" type=\"submit\" value=\"add\">\r\n <\/form>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/pre>\ntodo.js<\/p>\n
angular.module('todoApp', [])\r\n .controller('TodoListController', function() {\r\n var todoList = this;\r\n \/\/ \u9ed8\u8ba4\u6dfb\u52a0\u4e24\u6761\u6761\u76ee\r\n todoList.todos = [\r\n {text:'learn angular', done:true},\r\n {text:'build an angular app', done:false}];\r\n \r\n todoList.addTodo = function() {\r\n \/\/ \u501f\u52a9 Array.push() \u63d2\u5165\u6761\u76ee\r\n todoList.todos.push({text:todoList.todoText, done:false});\r\n todoList.todoText = '';\r\n };\r\n \r\n todoList.remaining = function() {\r\n var count = 0;\r\n angular.forEach(todoList.todos, function(todo) {\r\n count += todo.done ? 0 : 1;\r\n });\r\n return count;\r\n };\r\n \r\n todoList.archive = function() {\r\n var oldTodos = todoList.todos;\r\n todoList.todos = [];\r\n angular.forEach(oldTodos, function(todo) {\r\n if (!todo.done) todoList.todos.push(todo);\r\n });\r\n };\r\n });<\/pre>\ntodo.css<\/p>\n
.done-true {\r\n text-decoration: line-through;\r\n color: grey;\r\n}<\/pre>\n <\/p>\n
\u672a\u5b8c\u5f85\u7eed<\/p>\n","protected":false},"excerpt":{"rendered":"