AngularJs学习笔记--bootstrap

时间 2019-11-09

标签 angularjs 学习笔记 bootstrap 栏目 AngularJS 繁體版

原文原文链接

1、总括javascript

本文用于解释Angular初始化的过程，以及如何在你有须要的时候对Angular进行手工初始化。css

2、Angular <script> 标签html

本例用于展现如何经过推荐的路径整合Angular，实现自动初始化。java

<!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。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但若是仅仅是研究学习使用的话，直接链接也无妨。angularjs

选择：angular-[version].js 是方便阅读的一个版本，适合平常开发、调试使用。bootstrap
选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。安全

放置”ng-app”到应用的根节点中，若是你想让angular自动启动你的应用，一般能够放置于<html>标签中。app

<html ng-app>

若是咱们须要使用老派风格的directive语法”ng:”，那么咱们须要加入一个xml-namespace到html标签中以“取悦”IE。（这个是一个历史缘由，咱们也不推荐使用ng:）学习

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

3、自动初始化优化

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或属性会被删除。）隐藏模版，避免在页面显示原模版。

4、手工初始化

若是咱们想进一步控制初始化进程(例如你须要经过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]貌似不用写，这个问题随后会更新