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

jingtianyiyi 2014-10-13

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模版来自定义样式。