初始化angularJS之ng-app的自动绑定和手动绑定

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

 

 传统的绑定初始化

<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只会绑定第一次加载的对象,后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示

时间: 2024-09-30 06:45:12

初始化angularJS之ng-app的自动绑定和手动绑定的相关文章

cocos2dx lua 绑定之二:手动绑定自定义类中的函数

cococs2dx 3.13.1 + vs2013 + win10 1.首先按照<cocos2dx lua 绑定之一:自动绑定自定义类>绑定Student类 2.在Student类中增加一个用于测试手动绑定的函数manual_call ①Student.h中增加函数 //手动绑定调用函数 void manual_call(); ②Student.cpp中增加函数实现 //和自动绑定相比,只增加了这个函数 void Student::manual_call() { std::cout <&

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

Python 2019/7/24 面向对象概念 类和对象 对象初始化__init__ 绑定与非绑定

面向对象 (Object Oriented Programming,简称OOP) 1.什么是面向对象:面向对象编程是一种思想,它指导程序员如何编写出更好的程序.它的核心是对象,此时程序员从操作者变成了指挥者. 2.为什么使用面向对象编程:当今时代背景下,通常应用程序对扩展性和维护性要求都是非常高的,为什么?想想qq,微信,是不是不断的在添加新功能?,也就是说一款应用程序诞生后,都需要不断的更新维护. 3.面向对象优缺点: 优点:拓展性  灵活性 重用性     缺点: 程序的复杂度提高了   无

DHCP服务(自动分配IP、绑定固定IP)

DHCP协议 DHCP(Dynamips Host configuration Protocal)动态主机配置协议是一种基于UDP协议且仅限于在局域网内部使用的网络协议,主要用于大型的局域网环境或者存在较多移动办公设备的局域网环境中,其主要用途是用于自动管理局域网内主机的IP地址.子网掩码.网关地址及DNS地址等参数,可以有效地提升IP地址的利用率,提高配置效率,并降低管理与维护成本. 在DHCP的工作原理中,DHCP服务器提供了三种IP分配方式:自动分配.手动分配和动态分配. 自动分配是当DH

自动挡换手动挡:在 ASP.NET Core 3.0 Middleware 中手动执行 Controller Action

由于遭遇 System.Data.SqlClient 的性能问题(详见之前的博文),向 .NET Core 3.0 的升级工作被迫提前了.在升级过程中遇到了一个问题,我们在 Razor Class Library 中实现的自定义错误页面无法在 ASP.NET Core 3.0 Preview 5 中正常工作,问题原因详见博问 Razor Class Library 中的属性路由在 ASP.NET Core 3.0 中不起作用 . 由于属性路由不起作用的问题没找到解决方法,于是被迫采用了另外一种解

什么样的局域网需要IP-MAC绑定?IP-MAC绑定的好处。

1. 为什么要进行IP-mac绑定? IP-MAC绑定是网络管理的一个重要手段,在局域网内启用IP-MAC绑定,可以给您带来如下好处: 只有通过绑定的设备才可以接入网络,从而有效的防止了私接设备. 大部分上网和流控策略都是基于IP地址的,需要绑定IP和MAC才可以更好的应用上网策略. 实现有效的上网记录和上网统计.如果不绑定,那么记录统计不能有效的定位到具体用户. 节省IP资源,防止IP盗用. 减少ARP攻击,杜绝IP地址冲突,从而提高网络的稳定性. 所以,对于企业的办公局域网来说,IP-MAC

ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?

ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app=""> <p ng-cloak>{{ 5 + 5 }}</p> </div> 尝试一下 » 定义和用法 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题. AngularJS 应用在加载时,文档可能

Atitit.线程 死锁 跑飞 的检测与自动解除 与手动解除死锁 java c# .net php javascript.

Atitit.线程 死锁 跑飞 的检测与自动解除 与手动解除死锁 java c# .net php javascript. 1. 现象::主程序卡住无反应,多行任务不往下执行 1 2. 原因::使用jv jprofile查看线程,原来俩个线程死锁了.. 1 3. Java的缺点,默认不能自动解除死锁 1 4. 自动检测与解除死锁::使用看门狗watchdog 2 4.1. 死锁检测算法(太麻烦,不推荐) 2 4.2. 硬件看门狗 2 4.3. 软件看门狗的实现--TIMER 2 4.4. LIN

IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统)

IOS6屏幕旋转详解(自动旋转.手动旋转.兼容IOS6之前系统) 转自:http://blog.csdn.net/cococoolwhj/article/details/8208991 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInterfaceOrientation 来单独控制某个UIViewController的方向,需要哪个viewController支持旋转,只需要重写shouldAutorotateToInterfaceOrientation方法.