-2
コントローラを持つapp.jsファイルとwatchExample.jsファイルがあります。私はこのコントローラをapp.jsの私のアプリに注入しています。ですから、私はindex.htmlのheadにwatchExample.jsファイルをロードしたくありません。なぜなら、jsファイルがたくさんあると、headタグにロードする必要があるからです。だから、これは私には汚いようです。なぜ私はすべての余分なjsファイルを読み込む必要があります、私はすでにapp.jsにそれらを注入していますか？それとももっと良い方法がありますか？HTMLヘッダにロードされていない部分jsファイルを含むAngularJS
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;
});
}]);
（それが特徴の一つである）1にファイルcombileすることです。ただし、使用できるツールがありますので、手動で各スクリプトタグをhtmlに追加する必要はありません。[Gulp]（http://gulpjs.com/） – George