文档章节

AngularJs学习笔记--bootstrap

武文海
 武文海
发布于 2015/02/05 10:49
字数 973
阅读 3522
收藏 1

一、总括

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

二、Angular <script> 标签

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

<!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>标签中。

<html ng-app>

如果我们需要使用老派风格的directive语法”ng:”,那么我们需要加入一个xml-namespacehtml标签中以“取悦”IE。(这个是一个历史原因,我们也不推荐使用ng:

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

三、自动初始化

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对未编译的模版进行处理。而由于那万恶的ie67不支持属性选择器,所以最好使用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]貌似不用写,这个问题随后会更新


本文转载自:http://www.cnblogs.com/lcllao/archive/2012/09/03/2668130.html

武文海
粉丝 13
博文 97
码字总数 49318
作品 0
成都
高级程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
179
0
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
235
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
54
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
24.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

CSS3

一.复杂选择器 1.兄弟选择器 具备相同父级元素的平级元素之间称为兄弟元素 注意:兄弟选择器,只能往后,不能往前找 (1).相邻兄弟选择器,获取紧紧挨着某元素后面的兄弟元素 选择器1+选择器2...

wytao1995
16分钟前
3
0
Jmeter录制

1. 加HTTP(s) Test Script Recorder 2. 在 recorder下面加reocrding controller 3. 在HTTP(s) Test Script Recorder中设置下面几项 4. browser设置proxy, 注意端口要和step3中jmeter中的一致......

Rebecca_Hu
20分钟前
3
0
DIV+CSS忽悠前端小白

在大约两年前,DIV+CSS是一对很诱人的组合,会用DIV+CSS制作网页的人,常常会被人赞以大拇指的,记得06年初的时候,我用 div+css布局的一个纯静态网站还拿了学校网页设计比赛的一个奖。 今天...

前端老手
24分钟前
3
0
Win10子系统 linux(Ubuntu18.04) 安装Docker

1)原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2)编辑源列表文件 sudo vim /etc/apt/sources.list 3)将原来的列表删除,添加如下内容(中科大镜像源) deb http...

jxldjsn
26分钟前
3
0
Ubuntu16.04安装Qt5.12.2

Ubuntu16.04安装Qt5.12.2 第一步:下载文件 https://download.qt.io/official_releases/qt/5.12/5.12.2/ 第二步:安装依赖库 sudo apt-get install build-essential sudo apt-get install li......

shzwork
31分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部