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实现按Enter键触发事件示例
Sep 10 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
javascript实现下拉菜单效果
Feb 09 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向js函数传参的几种方法
2014/08/10 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
《神奇的克隆》教学反思
2014/04/10 职场文书
员工安全生产承诺书
2014/05/22 职场文书
企业负责人任命书
2014/06/05 职场文书
调研汇报材料范文
2014/08/17 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书