脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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将模板编译成可执行的、数据双向绑定的应用程序。

您可能感兴趣的文章:

相关文章

  • Angular2中监听数据更新的方法

    Angular2中监听数据更新的方法

    今天小编就为大家分享一篇Angular2中监听数据更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    AngularJS 是一个 JavaScript 框架，它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下
    2016-08-08
  • Angular2实现的秒表及改良版示例

    Angular2实现的秒表及改良版示例

    这篇文章主要介绍了Angular2实现的秒表及改良版,结合实例形式分析 Angular2实现秒表功能的原理、操作技巧与相关注意事项,需要的朋友可以参考下
    2019-05-05
  • AngularJS之ionic 框架下实现 Localstorage本地存储

    AngularJS之ionic 框架下实现 Localstorage本地存储

    这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    这篇文章主要介绍了AngularJS 获取ng-repeat动态生成的ng-model值实例详解的相关资料,这里提供实例代码及实现效果图，需要的朋友可以参考下
    2016-11-11
  • 详解Angular路由之子路由

    详解Angular路由之子路由

    本文将介绍Angular子路由的用法，对此感兴趣的同学，可以参考下
    2021-05-05
  • Angular实现响应式表单

    Angular实现响应式表单

    本篇文章主要介绍了Angular实现响应式表单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • AnglarJs中的上拉加载实现代码

    AnglarJs中的上拉加载实现代码

    上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • 通过AngularJS实现图片上传及缩略图展示示例

    通过AngularJS实现图片上传及缩略图展示示例

    本篇文章主要介绍了通过AngularJS实现图片上传及缩略图展示，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • AngularJs Managing Service Dependencies详解

    AngularJs Managing Service Dependencies详解

    本站主要介绍AngularJs Managing Service Dependencies的知识资料，这里整理相关知识，及简单示例代码，有兴趣的小伙伴可以参考下
    2016-09-09

最新评论