Angular.js初始化之ng-app的自动绑定与手动绑定详解

前言

众所周知在传统的angularJS应用中，都是通过ng-app把angular应用绑定到某个dom上，这样做会把js代码入侵到html上，angular提供了手动启动的API--angular.bootstrap() 。

本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍。

一、传统的绑定初始化

<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>

二、手动初始化

angular.bootstrap(element, [appName], [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']); // 浏览器加载的每个html都会对应一个document对象， 此对象是所有html中dom元素的根节点，也属于dom元素

 </script>

</body>

</html>

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持

赞 (0)

相关推荐

  • AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候

  • Angular.js中ng-include用法及多标签页面的实现方式详解

    Angular.js中ng-include用法及多标签页面的实现方式详解

    前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.

  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • Python实现自动清理电脑垃圾文件详解

    Python实现自动清理电脑垃圾文件详解

    经常存在在我们的电脑中的垃圾文件主要是指系统在运行过程中产生的tmp临时文件.日志文件.临时备份文件等.垃圾清理器的作用其实也是对这些文件进行清理,不会影响到我们使用产生的数据文件.如果是手动删除的话要一个一个的找出来去删除就比较麻烦了,用python写一个脚本直接启动就大功告成了. 在这个脚本的实现过程中使用到的内置库就是os库,没有通过其他的三方插件进行实现.所以也不用下载其他的python模块,直接调用内置库就OK了. import os 因为我们使用界面化的处理,这里导入一下pyqt5的

  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    1.Ionic3.x中页面(组件)之间正向传值方式? 这里所说的正向传值指的是如有两个页面,我们简称 页面A 和 页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面. 正向传值Ionic3.x主要有2种 标签上直接跳转 Js跳转 1) 标签上直接跳转 Ionic3.x对Angular2以上的的路由进一步封装,路由跳转主要是由模块 NavController 来完成的,传递参数主要是由模块 NavParams 来完成的,用法如下 A页面内容: htmll:代码 <button [na

  • Node.js基础入门之模块与npm包管理器使用详解

    Node.js基础入门之模块与npm包管理器使用详解

    目录 require函数 模块分类 第三方模块 1. 安装第三方模块 2. 引入第三方模块 3. 示例测试 系统模块 require注意事项 exports导出对象 1. exports示例 2. exports注意事项 module模块对象 package.json包描述文件 1. 什么是package.json ? 2. 如何创建package.json文件? NPM基础 1. 常用npm命令 2. npm 示例 cnpm基础 1. 什么是cnpm ? 2. 使用cnpm 控制台输出 1.

  • JS前端可扩展的低代码UI框架Sunmao使用详解

    JS前端可扩展的低代码UI框架Sunmao使用详解

    目录 引言 设计原则 1. 明确不同角色的职责 2. 发挥代码的威力,而不是限制 3. 各个层面的可扩展性 4. 专注而不是发散 Sunmao 的工作原理 响应最新的状态 组件间交互 布局与样式 类型安全 在组件间复用代码 可扩展的可视化编辑器 保持开放 引言 尽管现在越来越多的人开始对低代码开发感兴趣,但已有低代码方案的一些局限性仍然让大家有所保留.其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定. 显然这样的担忧是合理的,因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持,

  • Flutter自动路由插件auto_route使用详解

    Flutter自动路由插件auto_route使用详解

    目录 一.简介 二.基本使用 2.1 安装插件 2.2 定义路由表 2.3 生成路由 2.4 路由跳转 2.5 处理返回结果 三.路由导航 3.1 嵌套导航 3.2 Tab 导航 3.3 PageView 3.4 声明式导航 四.高级用法 4.1 路由控制器 4.2 Paths 4.2.1 Path Parameters 4.2.2 Inherited Path Parameters 4.2.3 Query Parameters 4.2.4 Redirecting Paths 4.3 路由守护

  • web3.js调用链上的方法操作NFT区块链MetaMask详解

    web3.js调用链上的方法操作NFT区块链MetaMask详解

    目录 实例化链上方法 MetaMask 首先要初始化web3 实例化链 调用链上方法授权 调用游戏链上方法质押NFT 实例化链上方法 公司的项目全是区块链项目,最近这个项目是要构建一个链上的游戏社区,目前这个功能是用户可以质押NFT到游戏的链上,然后游戏那边就可以有人去参加竞赛,然后质押人可以赎回NFT. MetaMask web3.js MetaMask 浏览器插件用的是小狐狸MetaMask 网络用的是测试网络Rinkeby,记得切换网络,把设置 > 高级 > 显示测试网络 打开 let

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

随机推荐