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代码(jquery)
Sep 12 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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网站在线人数统计
2008/04/09 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
玩转方法:call和apply
2014/05/08 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python文件路径操作方法总结
2020/12/21 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
单位法人授权委托书范本
2014/10/09 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
校长个人总结
2015/03/03 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang