angular使用bootstrap方法手动启动

原创 2016年08月29日 11:37:56

要启动一个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尾部,所以不存在问题。

相关文章推荐

使用angular.bootstrap完成模块的手动加载

之前我们看到使用ng-app指令,可以实现模块的自动加载。现在我们看下,angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 [html] view ...

使用angular.bootstrap完成模块的手动加载(一个页面多个ng-app时使用)

// 创建moudle1 var rootMoudle = angular.module('moudle1', []); rootMoudle.cont...

AngularJs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,angularjs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包...
  • JThink_
  • JThink_
  • 2013年08月07日 21:51
  • 86792

angular-cli下使用bootstrap

1.只使用bootstrap.css在angular-cli.json中配置: "styles": [ "styles.scss", "../node_mod...

前端开发利器: Bootstrap + AngularJS

概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 适用范围、licence、发展前景等因素,本人对比总结出其中的两个佼佼者,分别是侧重页面美化展现的 Bootst...

在angular 下使用bootstrap 的datepicker

如果想要在angular 下使用bootstrap 的datepicker,首先需要引入必要的js和css包。然后将bootstrap 的datepicker 用directive 封装起来,代码如下...

angular4 引入bootstrap

1、创建项目npm install -g @angular/cli ng new my-app cd my-app ng serve --open npm install ngx-bootstra...

一个基于Angular4+Bootstrap4+Scss的后台管理系统界面

一个基于Angular4+Bootstrap4+Scss的后台管理系统界面,正在不断的开发中,有兴趣的朋友可以到我的github下载,github地址:https://github.com/33255...

AngularJs+bootstrap搭载前台框架——基础页面

1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstra...
  • JThink_
  • JThink_
  • 2013年08月19日 20:17
  • 101384

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular使用bootstrap方法手动启动
举报原因:
原因补充:

(最多只允许输入30个字)