{"id":23799441,"url":"https://github.com/yangjunlong/angular-book","last_synced_at":"2026-01-31T02:02:09.277Z","repository":{"id":102652102,"uuid":"94628098","full_name":"yangjunlong/angular-book","owner":"yangjunlong","description":"Angularjs Learning Notes","archived":false,"fork":false,"pushed_at":"2017-08-22T10:54:05.000Z","size":777,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T12:47:22.929Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://yangjunlong.github.io/angular-book/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yangjunlong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-17T14:16:47.000Z","updated_at":"2017-07-14T02:13:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4b4b4fc-e86b-4d65-bd51-aaaa8fd06c0e","html_url":"https://github.com/yangjunlong/angular-book","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yangjunlong/angular-book","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fangular-book","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fangular-book/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fangular-book/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fangular-book/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yangjunlong","download_url":"https://codeload.github.com/yangjunlong/angular-book/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fangular-book/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28926630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T22:32:35.345Z","status":"online","status_checked_at":"2026-01-31T02:00:09.179Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-01T21:16:22.607Z","updated_at":"2026-01-31T02:02:09.272Z","avatar_url":"https://github.com/yangjunlong.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![AngularJS](./static/AngularJS-large.png)\n\n\u003e`AngularJS`最初是由Miško Hevery和Adam Abrons于2009年开发，后来成为了`Google`的项目。`AngularJS`弥补了HTML在构建应用方面的不足，通过使用标识符（directives）结构，来扩展Web应用中的HTML标签，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。\n\n## AngularJS是什么？\nAngularJS是一个构建动态WEB应用程序的框架。它允许你使用HTML作为模板语言，并允许你扩展HTML的语法来清晰简洁的实现你的应用程序组件。AngularJS的数据绑定和依赖注入可以省掉很多你必须要编写的代码。\n\n通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：\n\n* **类库**\n类库是一些函数的集合，它为你写的WEB应用提供了可重用的方法来帮助你快速实现某个功能，它只有在你需要的时候被调用。比如：jQuery等\n* **框架**\n框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：durandal、ember等。\n\nAngularJS试图去创建新的HTML标签来尝试补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。\n\n* 使用双大括号\\{\\{\\}\\}语法进行数据绑定(Data binding)\n* 使用DOM控制结构来实现迭代、显示、隐藏DOM片段\n* 支持表单和表单验证\n* 将新的行为附加到DOM元素，比如DOM事件处理\n* 将HTML分组成可重用的组件\n\n## 一个Hello world程序\n\n[示例](./example/helloworld.html)\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app\u003e\n  \u003chead\u003e\n    \u003cscript src=\"./static/lib/angularjs/1.6.5/angular.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv\u003e\n      \u003clabel\u003eName:\u003c/label\u003e\n      \u003cinput type=\"text\" ng-model=\"yourName\" placeholder=\"Enter a name here\"\u003e\n      \u003chr\u003e\n      \u003ch1\u003eHello {{yourName}}!\u003c/h1\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n或 通过下面的方式手动初始化\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"../static/lib/angularjs/1.6.5/angular.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv\u003e\n      \u003clabel\u003eName:\u003c/label\u003e\n      \u003cinput type=\"text\" ng-model=\"yourName\" placeholder=\"Enter a name here\"\u003e\n      \u003chr\u003e\n      \u003ch1\u003eHello {{yourName}}!\u003c/h1\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    angular.element(document).ready(function() {\n        angular.bootstrap(document, [function() {}]);\n    });\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n\u003ciframe src=\"./example/helloworld.html\" style=\"width: 100%; height: 250px;\"\u003e\u003c/iframe\u003e\n\n引入AngularJS库文件\n```\n\u003cscript src=\"./static/lib/angularjs/1.6.5/angular.js\"\u003e\u003c/script\u003e\n```\n\n当页面加载时，标记ng-app用来告诉AngularJS处理整个HTML页并引导应用\n```\n\u003chtml ng-app\u003e\n```\n\n指令`ng-model`将`\u003cinput\u003e`输入的值绑定到了变量`yourname`。\n```\n\u003ch1\u003eHello {{yourName}}!\u003c/h1\u003e\n```\n\n* AngularJS表达式用双括号`\\{\\{ \\}\\}`形式表示，他会对包裹的yourname变量进行解析\n* 指令`ng-model`将`\u003cinput\u003e`输入的值绑定到了变量`yourname`\n* {{yourname}}表达式将结果解析出来，这个过程是同步的，这就是AngularJS的双向数据绑定\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangjunlong%2Fangular-book","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyangjunlong%2Fangular-book","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangjunlong%2Fangular-book/lists"}