zoukankan      html  css  js  c++  java
  • angularjs 模块与控制器 (多个模块module?? 多个控制器controller??)

    angularjs 中只能有一个模块module(ng-app=""),一个模块可以有多个控制器(ng-controller="")

    自己试验的时候,js跟页面可以写在一块,但是大型项目开发中,最好做到html与js分离,便于以后维护。

    下图所示:ng-app只能有一个,一个ng-app 中可以有多个controller ;定义多个ng-app时无意义。

    运行效果图如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>angularjs模块 控制器</title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
        <script>
            myapp1 = angular.module('myapp1', []);
            myapp1.controller('mycon1', function ($scope) {
                $scope.num1 = 0;
                $scope.click1 = function() {
                    $scope.num1 += 1;
                };
            });
            myapp1.controller('mycon2', function($scope) {
                $scope.num2 = 0;
                $scope.click2 = function() {
                    $scope.num2 += 1;
                };
            });
    
    
    
            myapp3 = angular.module('myapp3', []);
            myapp3.controller('mycon3', function ($scope) {
                $scope.num3 = 0;
                $scope.click3 = function () {
                    $scope.num3 += 1;
                };
            });
        </script>
    </head>
    <body>
        <div ng-app="myapp1">
            <div ng-controller="mycon1">
                <input type="button" value="+1" ng-click="click1()"/>
                <p>{{num1}}</p>
            </div>
            
            
            <div ng-controller="mycon2">
                <input type="button" value="+1" ng-click="click2()"/>
                <p>{{num2}}</p>
            </div>
            
    
        </div>
        
        
        <div ng-app="myapp3">
            <div ng-controller="mycon3">
                <input type="button" value="+1" ng-click="click3()"/>
                <p>{{num3}}</p>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    Best Time to Buy and Sell Stock
    Remove Nth Node From End of List
    Unique Paths
    Swap Nodes in Pairs
    Convert Sorted Array to Binary Search Tree
    Populating Next Right Pointers in Each Node
    Maximum Subarray
    Climbing Stairs
    Unique Binary Search Trees
    Remove Duplicates from Sorted Array
  • 原文地址:https://www.cnblogs.com/housh/p/4244290.html
Copyright © 2011-2022 走看看