想在angularjs中引入其他js文件,這裡想引入妹子ui中的圖片輪播插件,類似的需求。通常這種需要在頁面中內嵌js比方說,類似這樣的,如果直接html裡引入js插件,然後頁面中這樣寫的話,沒有作用,而且這種是需要jQuery的,雖然我在angular中並沒有使用jQuery... 請問該怎麼配置angular呢?
$(function() { $('.am-slider').flexslider({ // options }); });
1、一次性全在html載入2、用oclazyload外掛3、自己用angular的$q 寫一個載入檔的服務
使用 https://github.com/revolunet/angular-carousel 能滿足你的要求
算是自問自答吧,目前使用requirejs解決專案中的依賴問題。 首先main.js是整個ng應用的入口,這裡來新增要載入的插件
main.js
'use strict'; require.config({ baseUrl: 'js', waitSeconds: 0, paths: { text: '../lib/require/text', jquery: '../lib/jquery/dist/jquery', angular: '../lib/angular/angular', bootstrap: '../lib/bootstrap/dist/js/bootstrap', bindonce: '../lib/angular-bindonce/bindonce.min', ngtable: '../lib/ng-table/dist/ng-table', ngBootstrap: '../lib/angular-bootstrap/ui-bootstrap', ngBootstrapTpls: '../lib/angular-bootstrap/ui-bootstrap-tpls', uiRoute: '../lib/angular-ui-router/release/angular-ui-router', oclazyload: '../lib/oclazyload/dist/ocLazyLoad', datePicker: '../lib/angularjs-datetime-picker/angularjs-datetime-picker', app: 'app', common: 'common', host:'../host', }, shim: { 'angular': { exports: 'angular' }, 'bootstrap':{ deps:['jquery'] }, 'bindonce': { deps: ['angular'] }, 'ngtable': { deps: ['angular'] }, 'ngBootstrap': { deps: ['angular'] }, 'ngBootstrapTpls': { deps: ['ngBootstrap', 'angular'] }, 'uiRoute': { deps: ['angular'] }, 'oclazyload': { deps: ['angular'] }, 'datePicker': { deps: ['angular'] }, 'myDatePicker': { deps: ['jquery'] } }, priority: [ 'angular' ] }); require([ 'angular', 'jquery', 'app', 'routes', 'bootstrap', ], function(angular) { $(document).ready(function() { var appName = $('body').attr('data-ngApp'); angular.bootstrap(document, [appName]); //手动启动ng应用 }); });
使用的時候 app.js ,index.html頁面有一個controller來啟動應用程式
define(['angular', 'bindonce', 'ngBootstrap', 'ngBootstrapTpls', 'ngtable', 'uiRoute', 'oclazyload', 'datePicker', ], function(angular) { var myApp = angular.module('myApp', ['pasvaz.bindonce', 'ngTable', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad','angularjs-datetime-picker']); myApp.controller('admin', ['$scope','$timeout', function($scope, $timeout) {
1、一次性全在html載入
2、用oclazyload外掛
3、自己用angular的$q 寫一個載入檔的服務
使用 https://github.com/revolunet/angular-carousel 能滿足你的要求
算是自問自答吧,目前使用requirejs解決專案中的依賴問題。
首先
main.js
是整個ng應用的入口,這裡來新增要載入的插件使用的時候 app.js ,index.html頁面有一個controller來啟動應用程式