返回顶部
首页 > 资讯 > 前端开发 > html >angular如何使用bootstrap方法手动启动
  • 950
分享到

angular如何使用bootstrap方法手动启动

2024-04-02 19:04:59 950人浏览 薄情痞子
摘要

小编给大家分享一下angular如何使用bootstrap方法手动启动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要启动一个a

小编给大家分享一下angular如何使用bootstrap方法手动启动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动。先看一下angular的bootstrap方法。

angular.bootstrap(element, [modules], [config]);

element(必需)。要启动angular的根节点,一般为document,也可以是其他的的html的dom。

modules(数组,可选)。依赖的模块。

conifg(object,可选)。配置项,目前只有strictDi一个可配置项,默认为false,是否开启辅助debug。

看例子。

<!DOCTYPE html> 
<html> 
<head> 
 <title></title> 
 <script src="//cdn.bootCSS.com/angular.js/1.5.8/angular.min.js"></script> 
</head> 
<body> 
 <div ng-controller="ctrl1"> 
 {{myString}} 
 </div> 
 <script> 
 var app = angular.module('app',[]); 
 app.controller('ctrl1',['$scope',function($scope){ 
  $scope.myString='hello world'; 
 }]) 
 angular.bootstrap(document,['app'],{strictDi: true}); 
 
 </script> 
</body> 
</html>

需要注意的是angular.bootstrap必须是在element参数所指向的dom树加载完毕后才能调用,所以通常我们会在$(document).ready()后执行。此处因为我们的script是放在body尾部,所以不存在问题。

实例2

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">

 <div ng-controller="myctrl">
 {{name}}
  <button ng-click="start()">点击引导启动</button>
 </div>

</div>
<div id="fir">
 <div ng-controller="myctrl">
  {{name}}
 </div>

</div>
</body>
<script>
 var app=angular.module("myapp",[]);
 app.controller("myctrl",function($scope) {
  $scope.name="tom";
  $scope.start=function (){
   var _f=document.getElementById("fir");
   angular.bootstrap(_f,["myapp2"])
  }

 })
 var app2=angular.module("myapp2",[]);
 app2.controller("myctrl",function($scope) {
  $scope.name="jquer";

 })
</script>
</html>

初始状态:

angular如何使用bootstrap方法手动启动

点击按钮之后:

angular如何使用bootstrap方法手动启动

以上是“angular如何使用bootstrap方法手动启动”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: angular如何使用bootstrap方法手动启动

本文链接: https://lsjlt.com/news/74634.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • angular如何使用bootstrap方法手动启动
    小编给大家分享一下angular如何使用bootstrap方法手动启动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要启动一个a...
    99+
    2024-04-02
  • Angular中如何使用动画
    这篇文章主要为大家展示了“Angular中如何使用动画”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular中如何使用动画”这篇文章吧。1.  ...
    99+
    2024-04-02
  • angular如何使用TweenMax动画库
    小编给大家分享一下angular如何使用TweenMax动画库,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近闲来无事,捣鼓捣鼓CSS发现了一个比较好动画库,就...
    99+
    2023-06-14
  • @angular/cli如何改变默认启动端口
    这篇文章将为大家详细讲解有关@angular/cli如何改变默认启动端口,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。因为本地希望开启两个项目,由于@angular/cl...
    99+
    2024-04-02
  • 无法按F8启动如何手动进入Win8系统的高级启动项
      我们都知道Win7以及更早的Windows系统中,开机按shift+F8可以进入“高级启动选项”,Windows 7在默认安装情况下“高级启动选项”中是包含&ldquo...
    99+
    2023-06-05
    Win8 高级启动项 启动项 系统 F8
  • .net 程序通过 crontab 无法启动手动执行脚本启动的方法
    目录一、问题描述二、将 .net 程序写成服务三、通过 crontab 执行脚本无法启动原因一、问题描述 .net 网关程序需要设置定时重启,按照日常操作先把正在运行的 PID ki...
    99+
    2024-04-02
  • 如何使用linux启动Nacos
    使用linux启动Nacos 前提你需要满足一下配置: 具体的配置需求参考Nacos的中文网站: https://nacos.io/zh-cn/ 64 bit OS,支持 Linux/Unix/Mac...
    99+
    2023-10-19
    linux java 运维 springcloud spring
  • 使用run()方法怎么启动SpringBoot
    本篇文章给大家分享的是有关使用run()方法怎么启动SpringBoot,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。入口通常一个简单的SpringBoot基础项目我们会有如下...
    99+
    2023-06-14
  • 使用Android如何模仿APP启动动画
    今天就跟大家聊聊有关使用Android如何模仿APP启动动画,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。效果图:animation.gif实现思路:仔细观察,可以看出动画的执行分为...
    99+
    2023-05-31
    android 动动 pp
  • redis如何后台启动的方法
    当安装好redis之后,运行redis-server命令之后,显示如图所示: 但是这样没有办法在这个tab下做任何操作了,因为这个时候使用Ctrl+c之后,就变成了这个样子 然后...
    99+
    2024-04-02
  • 如何使用Angular CDK Portal创建动态内容
    这篇文章将为大家详细讲解有关如何使用Angular CDK Portal创建动态内容,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Angular 官方提供了一套组件开发套...
    99+
    2024-04-02
  • angular使用TweenMax动画库的问题和解决方法
    最近闲来无事,捣鼓捣鼓CSS 发现了一个比较好动画库,就是TweenMax 用起来略微有点麻烦,但是效果确实可以。 首先在angular中使用TweenMax就得先通过npm 安装 ...
    99+
    2024-04-02
  • RHEL7中使用systemctl启动mysql的方法
    本篇内容介绍了“RHEL7中使用systemctl启动mysql的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够...
    99+
    2024-04-02
  • 启动 clickhouse 容器的 testcontainers 使用方法
    编程网今天将给大家带来《启动 clickhouse 容器的 testcontainers 使用方法》,感兴趣的朋友请继续看下去吧!以下内容将会涉及到等等知识点,如果你是正在学习Golang或者已经是...
    99+
    2024-04-04
  • 如何使用ASP.NET 4的自动启动特性
    本篇内容主要讲解“如何使用ASP.NET 4的自动启动特性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用ASP.NET 4的自动启动特性”吧!在ASP.NET 4中自动启动Web应用有些...
    99+
    2023-06-17
  • Win8系统如何禁用启动项?win8启动项设置禁用方法介绍
    开机时有些程序会自动加载,如果想禁用启动项,针对Windows 8一个全新的界面,操作方法有些变化。 操作步骤: 1. 在传统界面,可以在任务栏右键单击选择“任务管理器”; 2. 点开后如果您看...
    99+
    2023-06-05
    Win8 启动项 禁用启动项 系统 禁用 方法
  • win10系统如何手动设置开机启动项
    小编给大家分享一下win10系统如何手动设置开机启动项,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、右键点击开始菜单,选择“运行”,或者按“win+r”唤出“运行”。二、在弹出的运行框中,输入“msconfig”,然后...
    99+
    2023-06-28
  • Linux系统中如何使用Grub启动器启动ISO镜像
    这篇文章主要讲解了“Linux系统中如何使用Grub启动器启动ISO镜像”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Linux系统中如何使用Grub启动器启动ISO镜像”吧!如果你想要使用...
    99+
    2023-06-13
  • Angular中如何使用方法装饰器
    这篇“Angular中如何使用方法装饰器”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“An...
    99+
    2024-04-02
  • win10如何取消手机软件启动win10撤销手机软件启动方式 详细介绍
    有一些手机软件在用户启动的过程中便会跟随启动,假如那样的手机软件过多得话会拖慢你的开机速度,那麼win10如何取消手机软件启动启动呢?你先开启资源管理器,转换到启动菜单栏,那样就能看见这些启动启动的手机软件,鼠标右键选定要想撤销自启动的手机...
    99+
    2023-07-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作