I have two controllers
user.controller.js:
const fetchApi = () => {
console.log('fetching');
};
fetchApi();
I want to call this function in my dashboard.controller.js without writing this same hard code in dashboard controller again.
var app = angular.module('myapp', []);
var fetchApi = function($scope){
console.log("fetching");
};
fetchApi.$inject = ['$scope'];
app.controller('homeCtrl', fetchApi);
app.controller('dashboardCtrl', fetchApi);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="dashboardCtrl"></div>
<div ng-controller="homeCtrl"></div>
</div>
EDIT : inject service
var app = angular.module('myapp', []);
var fetchApi = function($scope, RestService){
console.log("fetching");
RestService.getUser();
};
fetchApi.$inject = ['$scope', 'RestService'];
app.controller('homeCtrl', fetchApi);
app.controller('dashboardCtrl', fetchApi);
app.service('RestService', ['$http',
function($http){
this.getUser = function() {
//$http api call
console.log("get user");
}
}
])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="dashboardCtrl"></div>
<div ng-controller="homeCtrl"></div>
</div>
Related
For example I have 3 links on my page:
A
B
C,
When I click A it should function something like this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("some.url/A")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
"A" should dynamically reach the url when I click A. How to do it angularJs
try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.myFunc = function(url) {
console.log(url);
$http.get("some.url/"+url)
.then(function(response) {
$scope.myWelcome = response.data;
});
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="myFunc('A')">A</button>
<button ng-click="myFunc('B')">B</button>
<button ng-click="myFunc('C')">C</button>
</div>
</body>
controller code:
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http) {
$http.get('data.json').then(function(data) {
$scope.artist = data;
});
});
html code:
<div class="main" ng-controller="myController">
<ul class="artistlist">
<li class="artist cf" ng-repeat="x in artist">
<img ng-src="images/{{x.shortname}}_tn.jpg" alt="Photo of {{x.name}}">
<div class="info">
<h2>{{x.name}}</h2>
<h3>{{x.reknown}}</h3>
</div>
</li>
</ul>
</div>
Try this: Your Controller
var myApp = angular.module('myApp', [])
myApp.controller("myController", ["$scope", "$http", function ($scope, $http) {
$http.get("data.json").then(
function (response) { $scope.artist = response.data },
function (error) { console.log(error) }
)
}])
Make sure you check the browser's console
The $http service has data property that is used to fetch the details.
data – {string|Object} – The response body transformed with the transform functions
Change your controller code like this
var myApp=angular.module('myApp',[]);
myApp.controller('myController', function($scope,$http){
$http.get('data.json').then( function(response){
$scope.artist = response.data;
});
});
And initialise your html with ng-app="myApp"
app.js
(function(){
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.html',
controllerAs: 'vm'
})
}
})();
home.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
$rootScope.bodylayout ='main_page_que';
var vm = this;
}
})();
home.js
var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
home.html
<div ng-controller="RedCtrl">
Show Red
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
Show Blue
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
Index.html
<html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
<div ng-view style="margin:auto"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
</body>
</html>
Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.
You are overwriting app module in home.js thus getting the error
Use
var app = angular.module('app'); //Get previously defined module
instead of
var app = angular.module('app', []); //It declares new module
You also need to change the sequence of JavaScript files
<script src="app.js"></script>
<script src="home.js"></script>
I am confused with $logProvider...
I have disabled the logs messages, but I am still getting the log.
Can any one help me what wrong in this code?
angular
.module("myModule", []).config(function ($logProvider) {
$logProvider.debugEnabled(false);
})
.controller("myController", ['$scope','$log', function ($scope, $log) {
$log.debug("This is sample text");
$log.warn("This is sample text");
$log.error("This is sample text");
$log.info("This is sample text");
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myModule" >
<div ng-controller="myController">
</div>
</body>
$logProvider.debugEnabled(false); only disable the debug level of $log, that is why you can still use $log.warn, $log.error and $log.info.
More about that here.
If you want to completely turn off $log, check this link and especially this part of the code:
$logProvider.debugEnabled(true);
$provide.decorator('$log', ['$delegate', function ($delegate) {
$delegate.table = angular.noop;
return $delegate;
}]);
$provide.decorator('$log', ['$delegate', function ($delegate) {
$delegate.info = angular.noop;
return $delegate;
}]);
$provide.decorator('$log', ['$delegate', function ($delegate) {
$delegate.warn = angular.noop;
return $delegate;
}]);
$provide.decorator('$log', ['$delegate', function ($delegate) {
$delegate.error = angular.noop;
return $delegate;
}]);
Hope this helps you...
angular.module("myModule", [])
.config(['$provide',
function($provide) {
$provide.decorator('$log', ['$delegate',
function($delegate) {
var origDebug = $delegate.debug;
$delegate.debug = function() {
var args = [].slice.call(arguments);
args[0] = [new Date().toString(), ': ', args[0]].join('');
origDebug.apply(null, args)
};
return $delegate;
}
]);
}
])
.controller("myController", ['$scope', '$log',
function($scope, $log) {
$log.debug("This is sample text");
$log.warn("This is sample text");
$log.error("This is sample text");
$log.info("This is sample text");
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
</div>
</div>
Can someone please have a look at my js fiddle, I'm trying to get angular JS to display the list in the JSON file but I cannot get it working.
Very new to angular JS and trying to figure it out as I go
https://jsfiddle.net/2zumpvy9/
<body ng-app="DraftApp">
<div class="main" ng-controller="HomeController">
<div class="container">
<div class="each" ng-repeat="player in players">
{{ player.Player }}
</div>
</div>
</div>
</body>
var app = angular.module('DraftApp', []);
app.factory('players', ['$http', function($http) {
return $http.get('http://redraft.comxa.com/test.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
app.controller('HomeController', ['$scope', 'players', function($scope, players) {
players.success(function(data) {
$scope.players = data;
});
}]);
However, you can use the https://crossorigin.me/ service.
Then, you should request: «https://crossorigin.me/http://redraft.comxa.com/test.json». Finally, this can be easily used in your AngularJS code.
I've made a demo, using an AngularJS Service and Controller.
var app = angular.module("DraftApp", []);
app.factory("players", ["$http",
function($http) {
return $http.get("https://crossorigin.me/http://redraft.comxa.com/test.json")
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}
]);
app.controller("HomeController", ["$scope", "players",
function($scope, players) {
players.success(function(data) {
$scope.players = data;
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="DraftApp">
<div class="main" ng-controller="HomeController">
<div class="container">
<div class="each" ng-repeat="player in players">
{{ player.Player }}
</div>
</div>
</div>
</body>