AngularJS 首次使用如何引用脚本文件Google CDN 还是本地下载angular.js 与 angular.min.js 怎么选【免费下载链接】angular.jsAngularJS - HTML enhanced for web apps!项目地址: https://gitcode.com/gh_mirrors/an/angular.js第一次把 AngularJS 接入一个 HTML 页面时你只需要做两件事确定脚本从哪里来Google CDN 还是自己下载的本地文件以及选择引入angular.js还是angular.min.js。做完这两步后只要页面根元素带有ng-appAngularJS 就会自动初始化。本文的操作依据是仓库中的两份文档脚本获取说明和 Bootstrap 初始化指南。先确定脚本来源CDN 还是本地文件文档给出的两条路径对应不同的使用条件Google CDN把script标签直接指向 Google CDN 上的 URL。这是文档描述的最快起步方式不需要下载任何东西也不需要维护本地副本。本地下载并自行托管适合需要离线开发或希望把 AngularJS 文件放在自己服务器上的场景。到https://code.angularjs.org/可以看到所有已发布版本的目录列表每个版本目录包含该版本发布的全部构建产物。如果后续还要加载多个包含 AngularJS 模块的脚本文件版本目录中的angular-loader.js可以放在最前面加载之后各模块脚本可以异步、按任意顺序加载文档指出这个文件的很多内容常被直接复制进index.html省掉对angular-loader[.min].js的首次请求。angular.js 与 angular.min.js 按运行环境选版本目录中每个 JS 文件都有两种形态angular-mocks.js除外它只用于开发期测试filename.js未混淆、未压缩、人类可读。文档明确要求开发阶段使用非压缩脚本以获得更好的错误信息。filename.min.js经 Closure compiler 压缩混淆。文档强烈建议生产环境使用 min 版本以减小用户浏览器下载的应用体积。filename.min.js.mapsourcemap 文件。可以随.min.js一起部署方便在生产部署中调试压缩代码而不影响性能。对应到 CDNangular.js是可读、未压缩的版本适合 Web 开发angular.min.js是压缩版本适合生产。方式一在 HTML 中直接引用 Google CDN文档给出的示例指向 1.5.6 的压缩版!doctype html html ng-app head titleMy AngularJS App/title script srchttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js/script /head body /body /html使用时注意文档中的两条限制CDN 上只有1.0.1 及以上的版本。如果确实需要更早的版本应改用https://code.angularjs.org/CDN 启用前的官方托管地址。示例中的版本号和angular.min.js/angular.js文件名按你的目标版本与运行环境替换开发期换成angular.js生产用angular.min.js。方式二下载版本文件并在本地引用从https://code.angularjs.org/选中你要的版本目录下载。每个版本目录包含的文件中与首次引用直接相关的有angular.zip包含该版本全部文件的压缩包一次下载拿全。angular.js核心框架文档说明跑起一个 AngularJS 应用只需要它。angular-csp.css仅在使用 CSPContent Security Policy时才需要。angular-mocks.js测试用的 mock 实现只应在测试环境中加载且必须在angular.js之后加载。各附加模块angular-animate.js、angular-route.js、angular-sanitize.js等可选但必须在核心angular[.min].js之后加载。目录中还有docs/可离线查看旧版文档和i18n/ngLocale本地化模块目录以及以2.开头的目录——文档特别提醒以2.开头的目录例如2.0.0-beta.17与 AngularJS 无关是 Angularhttps://angular.io版本的构建产物可以忽略。下载后在页面中按文件名引用即可。Bootstrap 指南给出的最小页面是!doctype html html xmlns:nghttp://angularjs.org ng-app body ... script srcangular.js/script /body /html该指南建议把script标签放在页面底部这样 HTML 的加载不会被angular.js脚本的加载阻塞可以改善应用加载时间。上文的 CDN 示例则把脚本放在head中——两种示例都来自仓库文档按指南的建议本地引用时把脚本放到/body前更符合其加载优化说明。如何判断引用是否生效引用脚本后把ng-app放在应用根元素上通常是html标签即可触发自动初始化。文档描述的初始化时机与行为是AngularJS 在DOMContentLoaded事件时、或在脚本求值时document.readyState已为complete的情况下自动初始化随后查找ngApp指令定位应用根加载对应模块、创建应用的 injector并以ngApp为编译根对整个 DOM 进行编译。文档用它作为自动初始化演示的最小示例是!doctype html html ng-appoptionalModuleName body I can add: {{ 12 }}. script srcangular.js/script /body /html页面打开后{{ 12 }}表达式属于编译范围会被 AngularJS 求值。如果页面上原样显示了表达式文本而没有求值对照文档的两个前置条件检查脚本是否按上面的方式正确加载以及ng-app是否放在了根元素上。若使用ng-strict-di文档建议与ng-app放在同一元素上可以额外确保应用中的服务都做了规范的依赖注入标注。引用脚本时的限制与注意事项不要在生产代码中链接http://code.angularjs.org/上的 latest/snapshot 地址。Bootstrap 指南明确警告生产代码链接到该地址会在站点上留下安全漏洞仅实验性开发可以链接。生产环境应使用固定版本的 CDN 地址或自行托管的文件。CDN 只覆盖 1.0.1 及以上的 AngularJS 版本。本地目录里以2.开头的版本目录属于 Angular而非 AngularJS不要误下载。附加模块脚本必须在核心angular[.min].js之后加载angular-mocks.js同样在angular.js之后且只用于测试环境。完成以上配置后按文档给出的后续路径继续Getting Started 建议先阅读概念概览、走一遍 AngularJS Tutorial或下载 Seed App 项目模板作为起步工程。【免费下载链接】angular.jsAngularJS - HTML enhanced for web apps!项目地址: https://gitcode.com/gh_mirrors/an/angular.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考