zoukankan      html  css  js  c++  java
  • Angularjs学习笔记11_手工初始化

     http://my.oschina.net/fuckBAT/blog/375579

     Angular的编译机制允许开发人员给浏览器添加新的Html语法,允许我们添加一些html节点,attribute,甚至创建一些自定义的节点,attributeAngular把这些行为的扩展成为指令directives.Angular带来了有用的directive,并允许我们创建特定领域的directive

    一、Angular初始化的过程

    如何在你有需要的时候对Angular进行手工初始化。

    二、Angular <script> 标签

    <!doctype html>

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

     <body>

      ...

        <script src="angular.js">

        

     </body>

     </html>


    · 将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载,从而降低应用的加载时间。我们可以在http://code.angularjs.org中获取到最新版本的angularJs。出于安全考虑,切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话,直接连接也无妨。

    · 选择:angular-[version].js 是方便阅读的一个版本,适合日常开发、调试使用。

    · 选择:angular-[version].min.js 是压缩、混淆后的版本,适合最终产品使用。

    · 放置”ng-app”到应用的根节点中,如果你想让angular自动启动你的应用,通常可以放置于<html>标签中。

    三、自动初始化

    Angular会在DOMContentLoaded事件中自动初始化,Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到,Angular会做以下事情:

    加载与module相关的directive。

    创建应用相关的injector(依赖管理器)。

    以ng-app指定根节点,开始对DOM进行相关“编译”工作。换言之,可以将页面的其中一部分(非<html>)作为根节点,从而限制angular的作用范围

    <!DOCTYPE HTML>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Bootstrap-auto</title>

        <style type="text/css">

            .ng-cloak {

                display: none;

            }

        </style>

    </head>

    <body>

        这里是ng-app外面的~~{{1+2}}

        <div ng-app>这里是ng-app里面~~~{{1+3*2}}</div>

        <script src="../angular-1.0.1.js" type="text/javascript"></script>

    </body>

    </html>

    注:里面的”ng-cloak”,这个是用于在angular.js编译完成之前(对!没错!是编译完成之前,不是angularjs加载完成之前。所以,如果想很好地避免这个情况,最好的办法是优化应用的加载流程,或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器,所以最好使用class=”ng-cloak”的方式。编译完成后,这个class或属性会被删除。)隐藏模版,避免在页面显示原模版。

    四、手工初始化

    如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作),那么我们可以用一个手工调用的启动方法去代替。

    以下例子等同于使用ng-app这个directive:

    <!DOCTYPE HTML>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Bootstrap-manual</title>

        <style type="text/css">

            .ng-cloak {

                display: none;

            }

        </style>

    </head>

    <body>

        这里是ng-app外面的~~{{1+2}}

        <div id="rootOfApp">这里是ng-app里面~~~{{1+3*2}}</div>

        <script src="../angular-1.0.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            angular.element(document).ready(function() {

                angular.bootstrap(angular.element(document.getElementById("rootOfApp")));

            });

        </script>

    </body>

    </html>


    就是说,我们的代码可以按照以下步骤编写:

    1. 在页面和其他代码加载完成后,找到应用模版的根节点;

    2. 调用angular.bootstrap,让angular去将模版编译为一个可执行的,双向绑定的应用!这里的angular.bootstrap(element,[ modules])是一个编译命令,[modules]貌似不用写,这个问题随后会更新

     

  • 相关阅读:
    Linux2.6内核实现的是NPTL
    linux kernel thread(Daemons)
    linux 多线程 LinuxThreads(转)
    同步与互斥的区别和联系
    Linux下使用popen()执行shell命令
    HTML学习笔记
    C++ 编译器的函数名修饰规则
    普林斯顿公开课 算法1-2:观察
    问卷星调查学生对《算法》教学的建议与反馈
    Visual Studio 2013 与 14
  • 原文地址:https://www.cnblogs.com/dengzy/p/5388394.html
Copyright © 2011-2022 走看看