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="https://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>

初始状态：

点击按钮之后：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS bootstrap启动详解及实例代码

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s

  • angular使用bootstrap方法手动启动的实例代码

    angular使用bootstrap方法手动启动的实例代码

    要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动.先看一下angular的bootstrap方法. angular.bootstrap(element, [modules], [config]); element(必需).要启动angular的根节点,一般为document,也可以是其他的的html的dom. modules(数组,可选).依赖的模块. conifg(object,可选).配置项,目前只有strictDi一个可配置项,默认为fals

  • bootstrap中的导航条实例代码详解

    一.和导航的区别 1.导航条比导航多了一个条字 2.直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色. 二.在页面中定义导航条 方法: 为父容器添加类名navbar navbar-default.navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示.bootstrap官网建议使用nav元素.但也常用div元素,建议用div元

  • 基于Angular.js实现的触摸滑动动画实例代码

    基于Angular.js实现的触摸滑动动画实例代码

    先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="

  • el表达式 写入bootstrap表格数据页面的实例代码

    el表达式 写入bootstrap表格数据页面的实例代码

    el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

  • Java方法签名的获取实例代码

    本文研究的主要是Java方法签名的获取,下面是具体实现实例. 实例代码: package com.yunshouhu; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.lang.reflect.Type; import java.util.Collection; import com.alibaba.fastjson.parser.DefaultJSONParser; import com.

  • Vue的属性、方法、生命周期实例代码详解

    实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"

  • 微信小程序methods中定义的方法互相调用的实例代码

    当调用test2时: methods = { test(age){ console.log('test', age); }, test2(){ console.log(this.methods); this.methods.test('222'); console.log('test2') } }; 结果: {test: f, test2: f} test 222 test2 总结 以上所述是小编给大家介绍的微信小程序methods中定义的方法互相调用的实例代码,希望对大家有所帮助,如果大家有任

  • Java 读取外部资源的方法详解及实例代码

    Java 读取外部资源的方法详解 在Java代码中经常有读取外部资源的要求:如配置文件等等,通常会把配置文件放在classpath下或者在web项目中放在web-inf下. 1.从当前的工作目录中读取: try { BufferedReader in = new BufferedReader(new InputStreamReader(new FileInputStream("wkdir.txt"))); String str; while ((str = in.readLine())

  • angularjs+bootstrap实现自定义分页的实例代码

    angularjs+bootstrap实现自定义分页的实例代码

    目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取. 插件 百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(https://github.com/miaoyaoyao/AngularJs-UI) 效果图 使用方法 1.在网页的头部引入angularjs.bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pag

  • Bootstrap提示框效果的实例代码

    Bootstrap提示框效果的实例代码

    本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

随机推荐