脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS引导程序

AngularJS初始化过程分析(引导程序)

 更新时间：2014年12月06日 17:15:04   投稿：junjie  
这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下

概览

这一节解释了AngularJS初始化的过程，以及需要的时候你该如何修改AngularJS的初始化。

AngularJS的 <script> 标签

这个示例展示了我们推荐的整合AngularJS的方法，它被称之为“自动初始化”。

复制代码 代码如下:

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
    <body>
        ...
    <script src="angular.js"><script>
    </body>
</html>

formatDate

1.将上面代码中的script标签放在页面的底部。将script标签放在底部缩短应用加载的时间，因为这样HTML的加载不会被angular.js脚本的加载阻塞。你可以从http://code.angularjs.org获得最新的版本。请不要在你的代码里面引用这个URL，因为它会暴露你的站点的安全隐患。如果只是实验性质的开发，那链接到我们的站点没有什么问题。

1).angular-[version].js 是具有可读性的版本, 适合开发和调试。
2).angular-[version].min.js 是压缩和混淆后的版本, 适合部署到成型产品中。

2.请将ng-app指令 放到你的应用的标签根节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中。

复制代码 代码如下:

<html ng-app>

3.如果你想使用旧版的指令语法：ng:，那还需要将xml-namespace写在<html>中 才能使AngularJS在IE下正常工作。(这样做是因为一些历史原因, 我们不推荐继续使用ng:的语法。)

复制代码 代码如下:

<html xmlns:ng="http://angularjs.org">

自动初始化

AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令 寻找你的应用根作用域。如果 ng-app指令找到了，那么AngularJS将会：

1.载入和 指令 内容相关的模块。
2.创建一个应用的“注入器(injector)”。
3.已拥有ng-app 指令 的标签为根节点来编译其中的DOM。这使得你可以只指定DOM中的一部分作为你的AngularJS应用。

复制代码 代码如下:

<!doctype html>
<html ng-app="optionalModuleName">
    <body>
        I can add: {{ 1+2 }}.
        <script src="angular.js"></script>
    </body>
</html>

手动初始化

如果你需要主动控制一下初始化的过程，你可以使用手动执行引导程序的方法。比如当你使用“脚本加载器(script loader)”，或者需要在AngularJS编译页面之前做一些操作，你就会用到它了。

下面的例子演示了手动初始化AngularJS的方法。它的效果等同于使用ng-app指令 。

复制代码 代码如下:

<!doctype html>
<html xmlns:ng="http://angularjs.org">
    <body>
        Hello {{'World'}}!
        <script src="http://code.angularjs.org/angular.js"></script>
        <script>
            angular.element(document).ready(function() {
            angular.bootstrap(document);
            });
        </script>
    </body>
</html>

下面是一些你的代码必须遵守的顺序：

1.等页面和所有的脚本加载完之后，找到HTML模板的根节点——通常就是文档的根节点。
2.调用 api/angular.bootstrap将模板编译成可执行的、数据双向绑定的应用程序。

您可能感兴趣的文章:

相关文章

  • angularjs基础教程

    angularjs基础教程

    AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
    2014-12-12
  • Angular.js 实现带手柄自由调整页面大小的功能

    Angular.js 实现带手柄自由调整页面大小的功能

    这篇文章主要介绍了Angular.js 实现带手柄自由调整页面大小的功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-12-12
  • Angular路由ui-router配置详解

    Angular路由ui-router配置详解

    这篇文章主要介绍了Angular路由ui-router配置详解，非常不错，具有一定得参考借鉴价值，需要的朋友参考下吧
    2018-08-08
  • AngularJS 监听变量变化的实现方法

    AngularJS 监听变量变化的实现方法

    今天小编就为大家分享一篇AngularJS 监听变量变化的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Ubuntu系统下Angularjs开发环境安装

    Ubuntu系统下Angularjs开发环境安装

    本文主要介绍 Ubuntu系统下Angularjs开发环境安装，这里详细介绍了安装步骤和注意事项，有在Ubuntu 环境下开发的朋友可以参考下
    2016-09-09
  • 详解ng-alain动态表单SF表单项设置必填和正则校验

    详解ng-alain动态表单SF表单项设置必填和正则校验

    这篇文章主要介绍了详解ng-alain动态表单SF表单项设置必填和正则校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

    在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

    这篇文章主要介绍了在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法,需要的朋友可以参考下
    2018-11-11
  • ng2学习笔记之bootstrap中的component使用教程

    ng2学习笔记之bootstrap中的component使用教程

    现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境。接下来通过本文给大家介绍 bootstrap中的component使用教程,需要的朋友可以参考下
    2017-03-03
  • Angularjs中UI Router的使用方法

    Angularjs中UI Router的使用方法

    这篇文章主要为大家详细介绍了Angularjs中UI Router的使用方法，感兴趣的朋友可以参考一下
    2016-05-05
  • monaco editor在Angular的使用详解

    monaco editor在Angular的使用详解

    这篇文章主要为大家介绍了monaco editor在Angular的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09

最新评论