angularjs单页面多app示例_angularjs

上一篇: 你的第一个AngularJS应用--教程二... 下一篇:Angular 2 DI - IoC & DI - 1

angularjs单页面多app示例

发布时间：2019-06-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了angularjs单页面多app示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page


      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

    <a href="http://www.js-code.com/tag/Angular/" target="_blank" class="keywords">Angular</a> Multiple app demo
    


    
        Your order
        
            {{ITem.PRoduct_name}}
            {{item.price | currency}}
            
        
    

    
        List of names
        
            {{_name.username}}
        
    
    


" title="" data-original-title="复制">
      
      
<!DOCTYPE htML>
<html >"http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>angular Multiple app demo</title>
    <script src="http://cdn.bootcss.COM/Angular.js/1.3.0-beta.8/angular.min.js"></script>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div id="App2" ng-app="namesList" ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="_name in names">
            <p>{{_name.username}}</p>
        </div>
    </div>
    <script>
        var shoppingCartModule = angular.module("shoppingCart", [])
        shoppingCartModule.controller("ShoppingCartController",
            function ($scope) {
                $scope.items = [
                    { product_name: "Product 1", price: 50 },
                    { product_name: "Product 2", price: 20 },
                    { product_name: "Product 3", price: 180 }
                ];
                $scope.remove = function (index) {
                    $scope.items.splice(index, 1);
                }
            }
        );
        var namesModule = angular.module("namesList", [])
        namesModule.controller("NamesController",
            function ($scope) {
                $scope.names = [
                    { username: "Nitin" },
                    { username: "Mukesh" }
                ];
            }
        );
        angular.bootstrap(document.getElementById("App2"), ['namesList']);
    </script>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的angularjs单页面多app示例全部内容，希望文章能够帮你解决angularjs单页面多app示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Angular Angular div post-format-gallery

上一篇: 你的第一个AngularJS应用--教程二... 下一篇:Angular 2 DI - IoC & DI - 1

猜你在找的angularjs相关文章