Tuesday, 18 November 2014

adding libraries to you angular project




For adding libraries to you angular project, for example Agular-UI.

1, this is a fornt-end component, and we will not use it as node plugin so we will only do bower install:

bower install angular-bootstrap --save

Please make sure you should use --save instead of --save-dev because bower will mange it for you and put the link of your libraries into your main html. If you just want to test and manually put it into your html file do --save-html. be aware in html file a comment area is designed bower injection. you should not put anything in side.



2,  add css? this is a bootstrap library. However, yoman template already have bootstrap css linked. so you don't need link bootstrap.

3, add dependency onto your angular app like this:

angular
  .module('xxxApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'

  ])

4, code and you application should run properly.

5, if you have unit tests you will have issue for running them, because unit test framework--PhantomJS cannot inject the dependency. And the mocked app is not able to be launched.

To fix that you need put this dependency into you karma.conf.js file manually, like this:

    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'node_modules/sinon/pkg/sinon.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'

    ],



No comments:

Post a comment