• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS bootstrap启动详解及实例代码

AngularJS bootstrap启动详解及实例代码

作者:xingoo 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs bootstrap,angularjs 详解,angularjs 路由详解,angularjs项目实例,angularjs实例等相关知识,xingoo 希望在学习及工作中可以帮助到您

对于一般的使用者来说,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>
</div>

运行后,会显示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>
</div>

值得注意的是:

angular.bootstrap只会绑定第一次加载的对象。

后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。

以上就是对AngularJS bootstrap 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

</div>

您可能想查找下面的文章:

  • AngularJS+bootstrap实现动态选择商品功能示例
  • angularjs+bootstrap菜单的使用示例代码
  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析
  • AngularJS使用ng-app自动加载bootstrap框架问题分析
  • AngularJS 与Bootstrap实现表格分页实例代码
  • AngularJS bootstrap启动详解及实例代码
  • AngularJs bootstrap搭载前台框架——js控制部分
  • AngularJs bootstrap搭载前台框架——基础页面
  • AngularJs bootstrap搭载前台框架——准备工作
  • AngularJs bootstrap详解及示例代码

相关文章

  • 2017-05-30详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
  • 2017-05-30AngularJs Managing Service Dependencies详解
  • 2017-05-30详解Angular.js的$q.defer()服务异步处理
  • 2017-05-30详解AngularJS的通信机制
  • 2017-05-30Angular.js之作用域scope'@','=','&'实例详解
  • 2017-05-30AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
  • 2017-05-30angularjs 源码解析之injector
  • 2017-05-30Angularjs CURD 详解及实例代码
  • 2017-05-30AngularJS语法详解(续)
  • 2017-05-30AngularJS指令与指令之间的交互功能示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angularjs2不同组件间的通信实例代码
    • Angular用来控制元素的展示与否的原生指令介绍
    • Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
    • AngularJS基础 ng-model 指令详解及示例代码
    • AngularJS学习第一篇 AngularJS基础知识
    • AngularJS实现表单验证功能
    • AngularJS 输入验证详解及实例代码
    • 详解angularJs指令的3种绑定策略
    • AngularJS中$apply方法和$watch方法用法总结
    • 简述AngularJS相关的一些编程思想

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有