yeoman构建的angular项目中正确引入angular-ui-bootstrap

阅读更多

yeoman 构建的angular项目中需要引入ui-bootstrap

使用命令 bower search ui-bootstrap得到以下结果：

Search results:

 

    angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower

    angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git

    jquery-ui-bootstrap git://github.com/gustavohenke/jquery-ui-bootstrap

    jqueryuibootstrap git://github.com/addyosmani/jquery-ui-bootstrap.git

    ui-bootstrap git://github.com/angular-ui/bootstrap.git

    angular-ui-bootstrap3 git://github.com/kkruit/angular-ui-bootstrap3-bower.git

    angular-ui-bootstrap-complete git://github.com/datapad/bower-angular-ui-bootstrap-complete.git

    angular-ui-bootstrap3-patched git://github.com/digiwise/angular-ui-bootstrap3-patched.git

    dt-angular-ui-bootstrap git://github.com/keesey/dt-angular-ui-bootstrap

    addyosmani-jquery-ui-bootstrap git://github.com/addyosmani/jquery-ui-bootstrap.git

    ui-bootstrap-alerts git://github.com/tandibar/ui-bootstrap-alerts.git

    jquery-ui-boostrap git://github.com/addyosmani/jquery-ui-bootstrap.git

    angular-ui-bootstrap-tmonsen86 git://github.com/tmonsen86/bootstrap.git

    ui-bootstrap-accordion git://github.com/pheuter/ui-bootstrap-accordion-bower

    angular-ui-bootstrap-datetimepicker git://github.com/zhaber/datetimepicker.git

    xui-bootstrap git://github.com/spxis/xui-bootstrap.git

    angular-ui-bootstrap-affix git://github.com/mohebifar/angular-ui-bootstrap-affix.git

 

可以看到ui-bootstrap有多个源，测试过ui-bootstrap和angular-ui-bootstrap（两个的路径是一个），发现grunt build的时候wiredep不能自动把ui-bootstrap的js注入到index.html中，后来引入angular-ui-bootstrap-bower（命令：bower install anguar-ui-bootstrap-bower --save），发现成功注入。

 

分析原因：

angular-ui-bootstrap-bower 安装后的， bower_components\angular-ui-bootstrap-bower\bower.json里面有一条配置："main": ["./ui-bootstrap-tpls.js"]，”，另外两个引入后都没有这条配置，估计wiredep是通过这条配置来决定从这个库引入哪个js文件的。

 

另外，ui-bootstrap包含两个js，一个是ui-bootstrap.js，一个是ui-bootstrap-tpls.js，两个文件的区别是前者使用了默认的bootstrap样式，后者可以通过更改template文件夹下的html模版来自定义样式。