Angular JS: load custom javascript file in ng-view
I am using Angular Js for front-end of my sample, created a template and loaded views dynamically according to requirement. I am using angular, jquery and cusotm js for my sample application. My templates worked fine and basic structure is as follows:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
---------------- bootstap, css etc ----------- stylesheet include
<script src='assets/js/angular.min.js' type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
-------------------- jquery, bootstrap ---------- javascript include
<script src='lib/angularjs/angular-route.js' type="text/javascript"></script>
<script src='lib/angularjs/custom-function.js' type="text/javascript"></script>
When the application runs, all my script and style-sheets are loaded successfully. But in my custom-function.js, I am using, elements id and classes for performing some work. When the custom-function.js loaded there are no document structure is defined, because the document is loaded dynamically using <div ng-view></div>.
I am also trying to include <script src='lib/angularjs/custom-function.js' type="text/javascript"></script> in my document, which is dynamically loaded by angular, but custom-function.js function is not running.
I am new in angular, I searched google, but still not find any appropriate solution. how could I solve this?
Answer
With helps of ngRoute a template can be loaded which is containing a script tag which includes the js file contains javascript codes that we wanted to run.
Please take a look the below example for usage: