如何在AngularJS中引入外部CSS/JS

发布时间：2024-10-02 13:44:44 作者：小樊
来源：亿速云阅读：81

要在AngularJS中引入外部CSS/JS文件，请按照以下步骤操作：

引入CSS文件：

在你的HTML文件中，通过link标签引入CSS文件。确保将此标签放在head元素内。例如，如果你有一个名为"styles.css"的外部样式表，你可以这样引入它：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS App</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <!-- Your AngularJS app content here -->
</body>
</html>

引入JS文件：

同样，在你的HTML文件中，通过script标签引入JS文件。你可以将此标签放在head元素内，也可以将其放在body元素底部。例如，如果你有一个名为"app.js"的外部JavaScript文件，你可以这样引入它：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS App</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <!-- Your AngularJS app content here -->

    <script src="app.js"></script>
</body>
</html>

若要确保在AngularJS代码执行之前加载外部CSS/JS文件，可以将link和script标签放在<head>标签的底部或使用AngularJS的$script指令。例如，在app.js文件中：

angular.module('myApp', [])
   .run(['$rootScope', '$window', function($rootScope, $window) {
       $rootScope.$on('$viewContentLoaded', function() {
           $window.load();
       });
   }]);

这样，当AngularJS应用程序加载并执行视图内容时，外部CSS/JS文件将被加载和执行。

如何在AngularJS中引入外部CSS/JS

相关阅读