AngularJS including partial js files without loading in HTML head

Question

I have app.js file and watchExample.js file which has a controller. I am injecting this controller into my app in app.js. So I don't want to load watchExample.js file in my index.html head. Because if I have many js files, I would have to load them in my head tag. So this seems dirty to me. Why do I have to load my every extra js files, I am already injecting them in app.js? Or is there any better way to do this?

index.html

<!DOCTYPE html>
<html ng-app="watch">
    <head>   
        <title>Angular Watch</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="watchExample.js"></script>
    </head>
    <body ng-controller="watchExample">
        <div ng-view=""></div>        
    </body>
</html>

app.js

var app = angular.module("watch", ['ngRoute', 'watch-page']);

app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'login.html' 
        })
        .when('/watch',{
            resolve: {
                "check": function($location,$rootScope){
                    if(!$rootScope.loggedIn){
                        $location.path('/');
                    }
                }
            },
            templateUrl: 'watch.html',
            controller: 'watchExample'
        })
        .otherwise({
            redirectTo: '/' 
        });    
});

watchExample.js

var app = angular.module("watch-page", []);
app.controller('watchExample', ['$scope', function ($scope) {
        $scope.counter = -1;
        $scope.$watch('myText', function (newValue, oldValue) {
            $scope.counter++;
            if($scope.counter === 50){
                alert("Yeter artık "+$scope.counter+" kere değiştirdin!");                
            }
            $scope.oldVal = oldValue;
            $scope.newVal = newValue;
        });
    }]);

Well for one Angular doesn't inject the code the way you think it does. However, there are tools you can use so you don't have to manually add each script tag in your html for example [Gulp](http://gulpjs.com/) — George, Mar 27 '17 at 10:07

Aman · Answer 1 · 2017-03-27T10:56:56.677

See in lame language just to make you understand.

Suppose there is a grocery shop, when you go there, what would you find? almost all the groceries right? and now you want some vegitables, so will you take them all? ofcourse no you will just get it what you want.

when you give src="" then the whole js file "REMEBER JS FILE AND ITS SOURCE CODE" loaded into your html app, now you want something from inside it. for example some function(), what you will call function_name() or src=""..

so src just load all the data in page and injection is just use to get the functions from the file.

for you another question "BETTER WAY TO DO" is to use gulp.

https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

what gulp do is to combile all the js file into one (it is one of the features )

AngularJS including partial js files without loading in HTML head

1 Answers1