I have posted some code which i write while i am learning angularjs. I`ve made a resource file to get rest calls from the back-end and a controller where i am calling this function but i do not know how to call the controller in the index.html file.
controller
(function () {
'use strict';
angular.module('carApp').controller('HomeController',
HomeController);
HomeController.$inject = ['$rootScope', '$scope', 'HomeResourceService'];
function HomeController($rootScope, $scope, HomeResourceService) {
var vm = this;
function loadTestData(key, value) {
vm.test = undefined;
return HomeResourceService.getTestData(key,
value).then(function (response) {
vm.test = response.data;
}).catch(function () {
console.log('Error when try to get test data!');
});
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>SCARS HOME</title>
</head>
<body ng-app="carApp">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
</script>
<script src="app/app.js"></script>
<script src="app/home/home-resource.js"></script>
<script src="app/home/home-controller.js"></script>
</body>
</html>
resource
(function() {
'use strict';
angular.module('carApp').factory('HomeResourceService',
HomeResourceService);
HomeResourceService.$inject = [ '$http' ];
function HomeResourceService($http) {
var service = {};
var getTestDataUrl = '/api/data';
service.getTestData = function(key, value) {
return $http({
method : "GET",
url : getTestDataUrl,
params : {
operator : key,
market : value
}
});
};
return service;
}
})();
you can all controller using ng-controller provided with controller name.In your case it is HomeController.
For example: if you have some login page and you want to call loginController in your login page, you can call it like below code snippet.
<div ng-controller="LoginController as login" class="col-xs-12 loginForm">
<div class="center-deck">
</div>
</div>
and your controller will be like that:-
(function() {
"use strict";
angular.module("login").controller("LoginController", LoginController);
LoginController.$inject = ["$location",'$rootScope', '$window', '$scope'];
function LoginController($location, $rootScope, $window, $scope) {
var _this = this;
$rootScope.showHeader = false;
$scope.loginError = false;
_this.authenticate = authenticate;
function authenticate() {
if($scope.login.username === "mail id" && $scope.login.password === "your password") {
$location.path('/dashboard');
$scope.loginError = false;
} else {
$scope.loginError = true;
$location.path("/login");
}
}
}
})();
It show how you can implement login call functionality in your project.
Related
when i debug my controller, it stuck at the initialization of the controller and doesn't get past it
here is the app
var app = angular.module('app', []);
and here is the controller and it's service
app.controller('UsersController', function ($scope, UsersService) {
$scope.User = [];
$scope.Image = [];
$scope.CV = [];
alert("Controller");
$scope.GetUserProfile = function (ID) {
alert("in");
UsersService.GetUserData(ID, function (Result) {
if (Result.success == true) {
$scope.User = Result.Content;
}
});
}
});
app.service('UsersService', function ($http) {
this.GetUserData = function (UserID,callback) {
var req = {
method: 'GET',
url: 'http://localhost:7598/tb/Profile/GetProfileByID',
headers: {
'Authorization': 'No Authentication'
},
params: {
'ID': UserID
}
}
$http(req).success(callback);
}
});
and in html i reference the Angular js file and the App file and the Controller file
here is the HTML
<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptControllers/MainApp.js"></script>
<script src="~/ScriptControllers/UsersController.js"></script>
<div class="card hovercard" ng-controller="UsersController">
<div class="card-background" ng-init="GetUserProfile(5)">
It seems that you're missing an ng-app directive in the html, according to the html and js code you've posted. The browser just parses the js code but does not execute it.
<body ng-app="app"> ... </body>
Working example of your code: here
Just new to angularjs and have been finding a way to get an app running. Very simple and straight forward:
Angular controller:
(function () {
'use strict';
angular
.module('myQuotesApp')
.controller('QuotesController', QuotesController);
QuotesController.$inject = ['$scope', 'Quotes'];
function QuotesController($scope, Quotes) {
$scope.quotes = Quotes.query();
}
})();
This is the service class of angularjs
(function () {
'use strict';
var QuotesService = angular.module('QuotesService', '[ngResource]');
QuotesService.factory('Quotes', ['$resource', function ($resource) {
return $resource('/api/quotes/', {}, {
query: { method: 'GET', params: {}, isArray:true }
});
}]);
})();
THis is the html file:
<!DOCTYPE html>
<html ng-app="myQuotesApp">
<head>
<meta charset="utf-8" />
<title>My Quotes App</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="/app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="QuotesController">
<H2>List of Quotes</H2>
<ul>
<li ng-repeat="quote in quotes">
<p> "{{quote.Content}}" - {{quote.Author}}</p>
</li>
</ul>
</div>
</body>
</html>
The server side model:
public class Quote
{
public int Id { get; set; }
public string Author { get; set; }
public string Comment { get; set; }
}
The server side controller:
public IEnumerable<Quote> Get()
{
return new List<Quote> {
new Quote { Id=1, Author="James John", Comment="This guy is good to work with."},
new Quote { Id=2, Author="Larry Page", Comment="This is one of the best guys in the IT world"},
new Quote { Id=3, Author="Goodwill Adebayo", Comment="It is always good to work with God." }
};
}
Whenever I run the app it displays a blank page. I checked the browser console and I got this error:
angular.js:4640Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myQuotesApp&p1=Erro…http%3A%2F%2Flocalhost%3A60261%2Flib%2Fangular%2Fangular.min.js%3A20%3A390)
jquery-1.9.0.js:1 '//# sourceURL' and '//# sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.
You are missing few pieces. You'll need to create myQuotesApp module first before using it.
Working Example at Plunker - http://plnkr.co/edit/l3UmoDjjGhaQq0JNjtsF.
(function () {
'use strict';
angular
.module('myQuotesApp', ['ngResource']) // <----
.controller('QuotesController', QuotesController);
QuotesController.$inject = ['$scope', 'QuotesService'];
function QuotesController($scope, QuotesService) {
$scope.quotes = QuotesService.query();
}
angular
.module('myQuotesApp')
.factory('QuotesService', ['$resource', function ($resource) {
var query = function() {
return [{Content: "One", Author: "John"},
{Content: "Two", Author: "Eric"}]
}
return {
query: query
}
}]);
})();
How to pull data from Web API
You just need to update QuotesService to use $resource.
(function () {
'use strict';
angular
.module('myQuotesApp', ['ngResource'])
.controller('QuotesController', QuotesController);
QuotesController.$inject = ['$scope', 'QuotesService'];
function QuotesController($scope, QuotesService) {
$scope.quotes = QuotesService.query();
console.log($scope.quotes);
}
angular
.module('myQuotesApp')
.factory('QuotesService', ['$resource', function ($resource) {
return $resource('/api/quotes/', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
I have a angular module in a separate file
userModule.js
'use strict';
angular.module('users', ['ngRoute','angular-growl','textAngular','ngMaterial','ngMessages','ngImgCrop','ngFileUpload'])
.run(function ($rootScope, $location, $http) {
$http.get('/token')
.success(function (user, status) {
if (user) {
$rootScope.user = user;
}
});
})
I've a controller in a separate another file which uses this module:
userController.js
'use strict';
var usersApp = angular.module('users');
usersApp.controller('usersControllerMain', ['$scope', '$http', '$routeParams','$location', 'growl','$rootScope','$mdDialog','API',
function($scope, $http, $routeParams, $location,growl,$rootScope,$mdDialog,API) {
$scope.action = "none";
$scope.password = '',
$scope.grade = function() {
var size = $scope.password.length;
if (size > 8) {
$scope.strength = 'strong';
} else if (size > 3) {
$scope.strength = 'medium';
} else {
$scope.strength = 'weak';
}
};
i've some dependencies defined in my controller for other uses.
Now i need to test this controller. SO i've written a spec file which i'll run directly in browser. I dont want to use test runners like karma:
jasmine.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.8/angular-mocks.js"></script>
<script type="text/javascript">
describe('userControllerMain testing', function(){
beforeEach(angular.mock.module('users'));
var $controller;
beforeEach(angular.mock.inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
var $scope = {};
var controller = $controller('usersControllerMain', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
</script>
</head>
<body>
</body>
</html>
i took this example from angular docs.
but when i run my jasmine.html in browser it throwing an injector module error as shown below:
. am i doing anything wrong here..??
There's something seriously wrong with the approach that you're following here. You should be mocking the controller inside a beforeEach block rather than an it block.
So this is how your test file should be:
describe('userControllerMain testing', function(){
beforeEach(module('users'));
beforeEach(inject(function($controller, $rootScope) {
$scope = $rootScope.$new();
usersControllerMain = $controller('usersControllerMain', {
$scope: $scope
});
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
Hope this helps.
How after click on button Add open View located at /Home/CreateItem. What i need to write in
$scope.Add = function() {
console.log('working');
}
Index.cshtml:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/MyScript/Custom.js"></script>
<script src="~/Scripts/angular-animate/angular-animate.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<div ng-controller="Second">
<button ng-click="Add()">Add</button>
</div>
HomeController:
namespace MvcApplication6.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
string data = "From controller";
return Json(data, JsonRequestBehavior.AllowGet);
}
public ActionResult CreateItem()
{
return View();
}
}
}
Controller.js
var app = angular.module('MyApp', ['ngAnimate', 'ui.bootstrap']);
app.controller('Second', function ($scope, sharedProperties) {
$scope.Add = function() {
// How to redirect to Home/CreateItem ?
}
});
OK
app.controller('Second', function ($scope, sharedProperties,$location) {
$scope.Add = function() {
$location.path("/Home/CreateItem");
}
});
BETTER
app.controller('Second',["$http","sharedProperties","$location", function ($scope, sharedProperties,$location) {
$scope.Add = function() {
$location.path("/Home/CreateItem");
}
}]);
The Better way is better, because it enables you to minify your angular code. By expliciting telling the angular engine that you are expecting $http as param 1 and sharedProperties as param2, a minifier can change those variable names to x and y thus making your javascript smaller.
Using Angular Grid, I get the ajax get data in console.log. But an empty grid.
The console log reads:
[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.412] now!!
[13:56:11.556] <there is data returned from console.log(getData); >
This is the js file.
// main.js
var app = angular.module('myApp', ['ngGrid']);
var getData = [];
function fetchData() {
var mydata = [];
$.ajax({
url:'/url/to/hell',
type:'GET',
success: function(data) {
for(i = 0, j = data.length; i < j; i++) {
mydata[i] = data[i];
}
getData = mydata;
console.log(getData);
}
});
}
fetchData();
app.controller('MyCtrl', function($scope) {
console.log('now!!')
console.log(getData)
console.log('now!!')
$scope.myData = getData
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
New Js file:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
function fetchData() {
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
}
fetchData();
});
HTML file.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Blank Title 3</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="../static/js/main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
This would be much easier (and more Angular) if you defined a service for your request. Something along these lines:
angular.module('hellServices', ['ngResource'])
.factory('Hell', function ($resource) {
return $resource('URL/TO/HELL', {}, {
query: { method: 'GET' }
});
});
Make sure to include it in your app:
var app = angular.module('myApp', ['ngGrid', 'hellServices']);
Then you can get a promise for it in your controller:
app.controller('MyCtrl', function($scope, $http, Hell) {
$scope.myData = Hell.query();
And then set the grid options to look at the promise for its data (as you already did):
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
If you do this, you don't have to worry about $scope.$apply because it will be handled for you. This is much cleaner and easier to follow. If you still need a callback to modify the data once it's returned from the server, pass a function to the query() function of your service:
...
$scope.myData = Hell.query(function(hell) {
// code that modifies 'hell'
});
Check out the official docs on Angular Services. The basics are also covered in Step #11 of the official Angular JS tutorial.
Your controller is probably accessing the getData array before the .success is finished. You're accessing the variable right away, outside of a promise function, which is initialized to an empty array.
Why don't you try putting the fetchData function into the controller (for now) and storing the getData directly into $scope.myData in the .success? Maybe even initialize the grid right there too? Not sure if you can do that but if you could it would look like this:
app.controller('MyCtrl', function($scope, $http) {
$scope.myData = '';
$scope.gridOptions = { showGroupPanel: true, data: 'myData' };
function fetchData() {
setTimeout(function(){
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
if (!$scope.$$phase) {
$scope.$apply();
}
});
}, 3000);
}
fetchData();
});
(source for some of the $scope apply stuff: https://github.com/angular-ui/ng-grid/issues/39)
Also not sure why you're mixing in jQuery .ajax with angular code ($http will do that), and why none of your javascript has a semicolon.