angular22-ng-app指令

简介: angular22-ng-app指令

image.png

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>ng-app指令</title>
     </head>
     <!-- 需要angular的代码必须包裹在ng-app的代码中 -->
     <body ng-app="myApp">
         <div ng-controller="App1Controller">
             <input type="button" value="按钮1" ng-click="do1()">
         </div>
         <div ng-controller="App2Controller">
             <input type="button" value="按钮2" ng-click="do2()">
         </div>
         <script src="./js/Angular.js"></script>
         <script>
             //零件1
             /* 找到第一个ng-app就不会再找了 */
             var myApp1 = angular.module('myApp1', []);
             myApp1.controller('App1Controller', ['$scope', function($scope) {
                     $scope.do1 = function() {
                         console.log(111111);
                     }
                 }])
                 //零件2
             var myApp2 = angular.module('myApp2', []);
             myApp2.controller('App2Controller', ['$scope', function($scope) {
                 $scope.do2 = function() {
                     console.log(22222);
                 }
             }])
             angular.module('myApp', ['myApp1', 'myApp2'])
                 /*   angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ["myApp2"]) */
         </script>
     </body>
     </html>

image.png

相关文章
|
4月前
|
JSON 数据格式
【Azure 应用服务】Azure Function App 执行PowerShell指令[Get-Azsubscription -TenantId cxt]错误
【Azure 应用服务】Azure Function App 执行PowerShell指令[Get-Azsubscription -TenantId cxt]错误
【Azure 应用服务】Azure Function App 执行PowerShell指令[Get-Azsubscription -TenantId  cxt]错误
|
4月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
54 0
|
4月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
52 0
|
4月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
50 0
|
7月前
|
XML Java API
Android App开发之创建JNI接口获取CPU指令集讲解及实战(附源码 简单易懂)
Android App开发之创建JNI接口获取CPU指令集讲解及实战(附源码 简单易懂)
224 0
|
存储 数据安全/隐私保护
App逆向百例|16|某交友App花指令分析
App逆向百例|16|某交友App花指令分析
395 0
|
JavaScript
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
161 0
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
angular32-其他指令ng-checked
angular32-其他指令ng-checked
80 0
angular32-其他指令ng-checked

热门文章

最新文章