AngularJs学习笔记--bootstrap

news2024/11/28 0:52:14

AngularJs学习笔记系列第一篇,希望我可以坚持写下去。本文内容主要来自 AngularJS 文档的内容,但也加入些许自己的理解与尝试结果。

一、总括

本文用于解释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去将模版编译为一个可执行的,双向绑定的应用!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/607715.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【云原生-K8s】k8s可视化管理界面安装配置及比较【Kubesphere篇】

总览 安装了k8s控制面板&#xff0c;方便日常的问题处理&#xff0c;查看资源状态信息&#xff0c;也可以增加子账号进行开放给其他人员使用&#xff0c;减少命令操作&#xff0c;提升工作效率 前置条件 须有一个正常使用的k8s集群附k8s v1.23版本搭建&#xff1a;https://…

JavaScript实例(Visual Studio Code)(一)

JavaScript程序本身不能独立存在 它是依附于某个HTML页面 在浏览器端运行的 基本语法&#xff1a; <script type"text/javascript" [src"外部js文件"]>... </script> 语法说明&#xff1a; script为脚本标记&#xff0c;它必须以<scri…

【小沐学Web】Rust实现Web服务器

文章目录 1、简介2、开发环境配置2.1 下载2.2 安装2.3 编辑工具2.4 构建工具2.5 自动化工具 3、Hello World4、TCP/UDP通信5、Web服务器结语 1、简介 https://www.rust-lang.org/ Rust: 一种使每个人都能够构建可靠且高效的软件的语言。 如今&#xff0c;全球有数百家公司在生…

谈谈Memcached与Redis

1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器。其本质上就是一个内存key-value数据库&#xff0c;但是不支持数据的持久化&#xff0c;服务器关闭之后数 据全部丢失。Memcached使用C语言开发&am…

【01】水仙花数算法

水仙花数 是指一个n位数&#xff08;n ≥ 3&#xff09;&#xff0c;它的每个位上的数字的n次幂之和等于该数本身。换句话说&#xff0c;对于一个三位数而言&#xff0c;如果它满足条件&#xff1a;各个位上的数字的立方和等于该三位数本身&#xff0c;那么这个数就被称为水仙花…

chatgpt赋能python:Python操作——去除非字母元素优化SEO

Python操作——去除非字母元素优化SEO 介绍 在做SEO优化时&#xff0c;处理关键词是必不可少的环节。我们需要对关键词进行一些处理&#xff0c;使其更加规范、简洁、且易于搜索引擎的识别和分类。其中一个重要的环节&#xff0c;就是去除非字母元素&#xff0c;即去除关键词…

大模型训练和部署的关键技术

自2016年至今&#xff0c;模型大小每18个月增长40倍&#xff0c;自2019年到现在&#xff0c;更是每18个月增长340倍。 然而相比之下&#xff0c;硬件增长速度较慢&#xff0c;自2016年至今&#xff0c;GPU的性能增长每18个月1.7倍&#xff0c;模型大小和硬件增长的差距逐渐扩大…

LeetCode110. 平衡二叉树

题目 leetcode110. 平衡二叉树 思路 只有每个节点的左右子树高度差不超过1才是平衡二叉树&#xff0c;因此可以递归解决。 递归的2要素&#xff1a; ①终止条件&#xff1a;当左右子树高度差超过1时返回false&#xff1b;递归到空节点和叶子节点时&#xff0c;由于空节点和…

每日学术速递5.31

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Prompt-Free Diffusion: Taking "Text" out of Text-to-Image Diffusion Models 标题&#xff1a;无提示扩散&#xff1a;从文本到图像扩散模型中提取“文本” 作者&…

单片机GD32F303RCT6 (Macos环境)开发 (三十五)—— 数字加速度计 (ADXL345 ) 使能中断获取运动与静止状态

数字加速度计 &#xff08;ADXL345&#xff09;- 使能中断获取运动与静止状态 1、几个与运动、静止检测相关的寄存器 a、寄存器 0x24—THRESH_ACT(读/写) THRESH_ACT寄存器为8位寄存器&#xff0c;保存检测活动的阈 值。数据格式无符号&#xff0c;因此&#xff0c;活动事件…

从零开始 Spring Boot 35:Lombok

从零开始 Spring Boot 35&#xff1a;Lombok 图源&#xff1a;简书 (jianshu.com) Lombok是一个java项目&#xff0c;旨在帮助开发者减少一些“模板代码”。其具体方式是在Java代码生成字节码&#xff08;class文件&#xff09;时&#xff0c;根据你添加的相关Lombok注解或类来…

冈萨雷斯DIP第9章知识点

文章目录 9.1 预备知识9.2 腐蚀和膨胀9.3 开运算与闭运算9.5 一些基本的形态学算法9.8 灰度级形态学 9.1 预备知识 形态学运算是用 集合 来定义的 。 在图像处理中 使用两类像素集合的形态学&#xff1a;目标元素 和 结构元 SE 。 通常目标定义为前景像素集合&#xff0c;结构…

计算机基础--->操作系统(2)【线程和进程、死锁】

文章目录 线程和进程线程和进程的区别&#xff1f;有了进程为什么还需要线程&#xff1f;为什么使用多线程&#xff1f;线程间的同步方式进程控制块&#xff08;PCB&#xff09;进程有哪几种状态&#xff1f;进程间的通讯方式有哪些&#xff1f;进程常见的调度算法有哪些&#…

冈萨雷斯DIP第2章知识点

文章目录 2.1 视觉感知要素2.2 光和电磁波谱2.3 图像感知与获取2.4 图像取样和量化2.4.1 取样和量化的基本概念2.4.2 数字图像表示2.4.4 空间分辨率和灰度分辨率2.4.5 图像内插 (image interpolation)2.5 像素间的一些基本关系 2.6 数字图像处理所用的基本数学工具介绍2.6.3 算…

基础查询 — 投影、选择

准备 数据查询操作均采用的是MySQL。示例数据库采用的是northwind 示例数据库。数据库导入手册 关于northwind 示例数据库 查询数据库中的表 show tables;查询表的表属性 desc xxx(表名);投影操作 1.语法 投影运算&#xff1a;选择表中的全部或者部分列。 语法 select 字段…

Jeston Orin Nano 离线烧写系统到NVME存储

大家好&#xff0c;我是虎哥&#xff0c;Jeston Orin nano 8G模块&#xff0c;我自己也玩了一段时间&#xff0c;在Orin 系列&#xff0c;官方提供了一种新的烧写方式&#xff0c;也就是离线烧写&#xff0c;就是你在主机&#xff0c;挂载存储后&#xff0c;直接烧写系统到这个…

Maven高级——继承与聚合——聚合实现

为什么要聚合 分模块开发之后一个项目会被拆分成多个模块。多个模块之间还会有依赖关系。 在一些大型项目中模块比较多&#xff0c;模块之间的依赖关系也会变得错综复杂。 并且在打包的时候还会有一个新的问题&#xff0c;在打包的时候我们要打包的是Springboot项目&#xf…

黑马Redis视频教程高级篇(一)

目录 分布式缓存 一、Redis持久化 1.1、RDB持久化 1.1.1、执行时机 1.1.2、RDB原理 1.1.3、小结 1.2、OF持久化 1.2.1、AOF原理 1.2.2、OF配置 1.2.3、AOF文件重写 1.3、RDB与AOF对比 二、Redis主从 2.1、搭建主从架构 2.1.1、集群结构 2.1.2、准备实例和配置 …

CBCGPRibbonBar 设置整个界面字体大小

在CMainFrame.h中添加成员变量&#xff1a;CFont m_fontCustom; 在onCreat()方法结束之前的任一个位置写下下测方法即可 方法1&#xff1a; { // Create custom font: LOGFONT lf; globalData.fontRegular.GetLogFont(&lf); lf.lfItalic TRUE; …

详解Spring Cloud版本问题

目录 1.让人头疼的多版本号体系 2.目录关系 3.为什么会有多个版本号体系 1.让人头疼的多版本号体系 由于历史原因&#xff0c;spring cloud分为了Alibaba和Netflix两个体系。 想要了解原因以及整个spring cloud体系的来龙去脉的同学可以去看我的另一篇文章&#xff1a; S…