I'm new with AngularJS and I would like to use some javascript library, in this case masonry library. It works fine except that I can't use it in partial html files where it does not work anymore. Where is problem or what should I do? I found that I have to add jQuery before AngularJS file but I have it and still nothing. Here is what I have:
index.html
<body ng-app="clientApp">
<!-- Add your site or application content here -->
<div class="header">
</div>
<div class="container">
<div ng-view=""></div>
</div>
<script src="scripts/masonry.pkgd.min.js"></script> <-- this does not work in ng-view
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/restangular/dist/restangular.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
main.html
<h1>Masonry - columnWidth</h1>
<div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 60 }'>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
app.js
angular
.module('clientApp', [
'ngRoute',
'restangular'
])
.config(function ($routeProvider, RestangularProvider) {
RestangularProvider.setBaseUrl('http://localhost:3000');
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.factory('MovieRestangular', function (Restangular) {
return Restangular.withConfig(function (RestangularConfigurer) {
RestangularConfigurer.setRestangularFields({
id: '_id'
});
});
})
.factory('Movie', function(MovieRestangular) {
return MovieRestangular.service('movie');
});
and main.js
angular.module('clientApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
