Angular.js基础学习之初始化的示例分析-创新互联

这篇文章将为大家详细讲解有关Angular.js基础学习之初始化的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司从2013年成立,先为龙里等服务建站,龙里等地企业,进行企业商务咨询服务。为龙里企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、绑定初始化,自动加载

通过绑定来进行angular的初始化,会把js代码侵入到html中。

ng-app是angular的一个指令,代表一个angular应用(也叫模块)。使用ng-appng-app=""来标记一个DOM结点,让框架会自动加载。也就是说,ng-app是可以带属性值的。


 
  {{ hello }}
 
    var myModule = angular.module("myApp",[]);   myModule.controller("myCtrl",function($scope){    $scope.hello = "hello,angular!";   });  

二、手动初始化

如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。

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

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

其中第一个参数element:是绑定ng-app的dom元素;

  • modules:绑定的模块名字

  • config:附加的配置

值得注意的是:

  • angular.bootstrap只会绑定第一次加载的对象。

  • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。


 
 

 
  {{ hello }}
 
    var app = angular.module("bootstrapTest",[]);   app.controller("myCtrl",function($scope){    $scope.hello = "hello,angular from bootstrap";   });      // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);   angular.bootstrap(document,['bootstrapTest']);  

 
 
 
 
 
 
 
 div1:{{name}}
 div2:{{name}}
   

关于“Angular.js基础学习之初始化的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:Angular.js基础学习之初始化的示例分析-创新互联
文章出自:http://hbruida.cn/article/hicjs.html

其他资讯