开发者社区> 青夜之衫> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

AngularJS API之bootstrap启动

简介:
+关注继续查看

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中,这样就显得很不方便了。

绑定初始化

通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了!

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        {{ hello }}
    </div>
    <script type="text/javascript">
        var myModule = angular.module("myApp",[]);
        myModule.controller("myCtrl",function($scope){
            $scope.hello = "hello,angular!";
        });
    </script>
</body>
</html>

运行后,会显示hello,angular!

手动初始化

Angular中也提供了手动绑定的api——bootstrap,它的使用方式如下:

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

其中第一个参数element:是绑定ng-app的dom元素;
modules:绑定的模块名字
config:附加的配置

简单的看一下代码:

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
    <div ng-controller="myCtrl">
        {{ hello }}
    </div>
    <script type="text/javascript">
        var app = angular.module("bootstrapTest",[]);
        app.controller("myCtrl",function($scope){
            $scope.hello = "hello,angular from bootstrap";
        });
        
        // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
        angular.bootstrap(document,['bootstrapTest']);
    </script>
</body>
</html>

值得注意的是:

  • angular.bootstrap只会绑定第一次加载的对象。
  • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。

本文转自博客园xingoo的博客,原文链接:AngularJS API之bootstrap启动,如需转载请自行联系原博主。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
BootStrap样式
Bootstrap简介 来自Twitter,是目前最流行的前端框架 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架,便于开发人员随时上手 目前版本V3 Bootstrap受欢迎的原因 快速制作响应式的网页来适配各种终端 开发简...
1641 0
bootstrap的样式
一、字体图标 进入bootstrap官方文档的组件页面https://v3.bootcss.com/components/,最上面的组件就是字体图标“Glyphicons 字体图标”部分。
1588 0
bootstrap杂记
http://v3.bootcss.com/ 这个国内的中文站点资料很全   如下看个页面的大体框架 http://www.cnblogs.com/sunhaoyu/p/4275190.html 首页 导航一...
1056 0
又爱又恨的BOOTSTRAP
搞本书,看了一天,确实,,UIKIT比它好用。。。 但,艺多不压身吧。 今天自己抄了个大概的,不用其它插件,,但那手风琴,真的找了很多,没有中意的。。。   DOCTYPE html> Bootstrap 101 Te...
911 0
Bootstrap<基础四> 代码
原文:Bootstrap 代码 Bootstrap 允许您以两种方式显示代码: 第一种是 标签。如果您想要内联显示代码,那么您应该使用 标签。 第二种是 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 标签。
937 0
Bootstrap <基础五>表格
原文:Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 为表格添加基础样式。 表格标题行的容器元素(),用来标识表格列。
858 0
yii bootstrap
http://www.cniska.net/yii-bootstrap/index.html#tbActiveForm ...
545 0
+关注
1040
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载