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 相关文章推荐
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
package.json配置文件构成详解
Aug 27 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
小结Python的反射机制
2020/09/28 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
计算机专业自我鉴定
2013/10/15 职场文书
初中生物教学反思
2014/01/10 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
文秘人员工作职责
2014/01/31 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
教师考核评语大全
2014/12/31 职场文书
2015年教师节活动总结
2015/03/20 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技