如何将第三方js和css添加到AngularJS中

时间:2016-09-20 14:55:24

标签: angularjs

我是AngularJS的新手,好吧,这是前端技术的新手。我想用我的js代码将第三方js和css资源添加到AngularJS中。 以下是我的名为remoteconfig.tpl.html的旧html代码,可以正常工作,可以绘制一些模式:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/dist/css/next.css">
        <script src="/dist/js/next.js"></script>
        <script src="Data.js"></script>
        <script src="Shell.js"></script>
    </head>
    <body>
hello world!
    </body>
</html>

但是我需要将这个js和css移动到angularjs中,这是我的angularjs模块文件:

define(['angularAMD', 'app/routingConfig', 'app/core/core.services', 'common/config/env.module'], function(ng) {
  var remoteconfigApp = angular.module('app.remoteconfig', ['app.core', 'ui.router.state','config']);

  remoteconfigApp.config(function($stateProvider, $compileProvider, $controllerProvider, $provide, NavHelperProvider, $translateProvider) {
    remoteconfigApp.register = {
      controller : $controllerProvider.register,
      directive : $compileProvider.directive,
      factory : $provide.factory,
      service : $provide.service

    };


    NavHelperProvider.addControllerUrl('app/remoteconfig/remoteconfig.controller');
    NavHelperProvider.addToMenu('remoteconfig', {
     "link" : "#/remoteconfig",
     "active" : "main.remoteconfig",
     "title" : "remoteconfig",
     "icon" : "icon-link",  // Add navigation icon css class here
     "page" : {
        "title" : "remoteconfig",
        "description" : "remoteconfig"
     }
    });

    var access = routingConfig.accessLevels;

    $stateProvider.state('main.remoteconfig', {
        url: 'remoteconfig',
        access: access.admin,
        views : {
            'content' : {
                templateUrl: 'remoteconfig.tpl.html',
                controller: 'remoteconfigCtrl',
                css: 'dist/css/next.css', //include thrid-party css: next.css
                controllerUrl: ['dist/js/next.js', 'Data.js', 'Shell.js'] //include thrid-party js next.css and my js: Data.js and Shell.js
            }
        }
    });

  });

  return remoteconfigApp;
});

我将它们添加到$ stateProvider中的controllerUrl和css选项中。并使用oneline更改我的新HTML:

hello world!

新代码只能显示没有模式的hello世界。有关我的问题的任何建议吗?

0 个答案:

没有答案