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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
利用js实现简易红绿灯
Oct 15 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
自制PHP框架之设计模式
2017/05/07 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
美术专业个人自我评价
2014/01/18 职场文书
机关党员公开承诺书
2014/08/30 职场文书
刑事案件上诉状
2015/05/23 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Python实现的扫码工具居然这么好用!
2021/06/07 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
分享几个简单MySQL优化小妙招
2022/03/31 MySQL