AngularJs bootstrap详解及示例代码


Posted in Javascript onSeptember 01, 2016

AngularJs学习笔记系列第一篇,希望我可以坚持写下去。本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果。

一、总括

本文用于解释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-namespace到html标签中以“取悦”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 lang="zh-cn">
<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 class="ng-cloak">这里是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 lang="zh-cn">
<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" class="ng-cloak">这里是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去将模版编译为一个可执行的,双向绑定的应用!

 后续继续补充相关文章,谢谢大家对本站的支持!

              相关文章:

                                 AngularJs bootstrap搭载前台框架——js控制部分
                                
AngularJs bootstrap搭载前台框架——基础页面
                                 
AngularJs bootstrap搭载前台框架——准备工作
                                
AngularJs bootstrap详解及示例代码

Javascript 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
You might like
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
详解Python如何生成词云的方法
2018/06/01 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
班级入场式解说词
2014/02/01 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
三峡导游词
2015/01/31 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers