zoukankan      html  css  js  c++  java
  • AngularJs学习笔记(1)——ng-app

    众所周知:

    ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。

    只有被具有ng-app属性的DOM元素包含的元素才会受angularJS影响

    使用ng-app声明Angular的边界,你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块,可以是整个HTML,也可以是某个div

    HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用,一个页面会自动加载第一个ng-app。

    AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。 

    一个ng-app可以有多个controller,$scope的范围局限于每一个controller中。

    $rootScope是所有$scope对象的最上层 

     ng-app 声 明 所 有 被 它 包 含 的 元 素 都 属 于 AngularJS 应 用 ,

    DOM 元 素 上 的ng-controller声明所有被它包含的元素都属于某个控制器

     

    问题来了:

    我就是想要多个ng-app,虽然这样做不知道有什么用???

    有例子如下:

    <!DOCTYPE html>
    <html>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    <body>
    
    <div id="app1" ng-app="App1">
    <span  ng-controller="myCtrl" ng-init="firstName='John' ; lastName='DoeDoe'">{{ firstName + " " + lastName }}</span>
    <br>
    <span  ng-controller="yourCtrl">{{ secondName + " " + thirdName}}</span>
    </div>
    <br>
    
    
    <div id="app2" ng-app="App2" ng-controller="yourCtrl">
    {{ secondName + " " + thirdName }}
    </div>
    
    <script>
    var app = angular.module("App1", []);
    app.controller("myCtrl", function($scope) {  
    //    $scope.lastName = "Doe";
    });
    app.controller("yourCtrl", function($scope) {
        $scope.secondName = "小米1";
        $scope.thirdName = "大米1";
    });
    
    var app1 = angular.module('App2', []);
    app1.controller("yourCtrl", function($scope) {
    $scope.secondName = "小米4";
    $scope.thirdName = "小米5";
    });
    
    //默认加载app1,通过下面的代码显示启动app2,但是必须写在app2申明之后
    angular.bootstrap(document.getElementById("app2"), ['App2']);
    </script>
    
    </body>
    </html>
  • 相关阅读:
    [TC_SRM_466]DrawingBlackCrosses
    [POJ3254]Corn Fields
    [openjudge6043]哆啦A梦的时光机
    网络流 24 题汇总(LOJ 上只有 22 题???)
    Xadmin组件的url设计
    《今日简史》一、旧故事已然崩坏,新故事尚未构建
    《人类简史》二、认知革命——上帝之手的秘密
    ORM复习
    无拘无束的爱情
    使用代理导致IE host被修改问题的解决方案
  • 原文地址:https://www.cnblogs.com/lyd2016/p/7156315.html
Copyright © 2011-2022 走看看