zoukankan      html  css  js  c++  java
  • AngularJS中bootstrap启动

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中,这样就显得很不方便了

    绑定初始化

    通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了!

     1 <html>
     2 <head>
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
     5 </head>
     6 <body ng-app="myApp">
     7     <div ng-controller="myCtrl">
     8         {{ hello }}
     9     </div>
    10     <script type="text/javascript">
    11         var myModule = angular.module("myApp",[]);
    12         myModule.controller("myCtrl",function($scope){
    13             $scope.hello = "hello,angular!";
    14         });
    15     </script>
    16 </body>
    17 </html>

    运行后,会显示:

    hello,angular!

    手动初始化

    Angular中也提供了手动绑定的api——bootstrap,它的使用方式如下:

    angular.bootstrap(element, [modules], [config]);

    其中第一个参数element:是绑定ng-app的dom元素;
    modules:绑定的模块名字
    config:附加的配置

    简单的看一下代码:

     1 <html>
     2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     3     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
     4 <body id="body">
     5     <div ng-controller="myCtrl">
     6         {{ hello }}
     7     </div>
     8     <script type="text/javascript">
     9         var app = angular.module("bootstrapTest",[]);
    10         app.controller("myCtrl",function($scope){
    11             $scope.hello = "hello,angular from bootstrap";
    12         });
    13         
    14         // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
    15         angular.bootstrap(document,['bootstrapTest']);
    16     </script>
    17 </body>
    18 </html>

    值得注意的是:

    • angular.bootstrap只会绑定第一次加载的对象。
    • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。
  • 相关阅读:
    Leetcode 191.位1的个数 By Python
    反向传播的推导
    Leetcode 268.缺失数字 By Python
    Leetcode 326.3的幂 By Python
    Leetcode 28.实现strStr() By Python
    Leetcode 7.反转整数 By Python
    Leetcode 125.验证回文串 By Python
    Leetcode 1.两数之和 By Python
    Hdoj 1008.Elevator 题解
    TZOJ 车辆拥挤相互往里走
  • 原文地址:https://www.cnblogs.com/joyco773/p/6136728.html
Copyright © 2011-2022 走看看