初始化angularJS之ng-app的自动绑定和手动绑定
在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap()。
传统的绑定初始化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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: 附加的配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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只会绑定第一次加载的对象,后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用