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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
JS实现网站楼层导航效果代码实例
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
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python 同时读取多个文件的例子
2019/07/16 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
python 通过exifread读取照片信息
2020/12/24 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
社区母亲节活动记录
2014/03/06 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
《分一分》教学反思
2014/04/13 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
交通事故和解协议书
2014/09/25 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
JavaScript文档对象模型DOM
2021/11/20 Javascript