0

I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>

</head>

<body>
<div  ui-view>

</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>

As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.

Improve this question
3
  • Please explain in more detail exactly what it is you are wanting to do Commented Oct 26, 2015 at 13:07
  • @charlietfl : Let me to explain again.I have so many js/css files which has included in this index.html file.But instead of doing this ,i will have one other file where i will add only the js/css file path .In the index file those js/css files will be called and add using loop inside <script src="path"></script> like this. Commented Oct 26, 2015 at 13:12
  • Depends on your environment. Can use task runners like gulp in your development environment or use server language to render the page. Commented Oct 26, 2015 at 13:15

1 Answer 1

Reset to default
1

You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.

For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.