I am new in AngularJS. I am trying to learn AngularJS from this site (https://docs.angularjs.org/tutorial/step_07). My code is as below
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Angular Project</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
controllers.js
var phonecatControllers = angular.module('phonecatApp', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
My code is inside angu folder of htdocs of my computer . I am trying to browse below URL
http://localhost/angu/#/phones
But I am getting white blank page. Could anyone say where is the problem ??
You controller.js should have phonecatControllers module name instead of phonecatApp, So currently what happening is you are flushing the phonecatApp module by declaring it in controller.js again.
Technically you should be using phonecatControllers name there & you console must have showing an error $injector moduler error as you haven't declared the phonecatControllers module which has already injected in phonecatApp module.
Controller.js
var phonecatControllers = angular.module('phonecatControllers', []); //<=-change here
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
Related
I am trying to use a Service (rates service) in my Controller (rates controller) and get an "Error: Unknown Provider". Does anyone have any suggestions on how to fix this? Cheers!
rates.contoller.js
(function () {
'use strict';
angular.module('print.module').controller('ratesCtrl', ['$http', '$scope', '$rootScope', 'ratesService', function ($http, $scope, $rootScope, ratesService) {
ratesService.getRatesDataService();
}]
)})();
rates.service.js
(function () {
'use strict';
angular.module('print.module').service('ratesService', ['$scope', '$http', function ($scope, $http) {
vm = this;
function getRatesDataService() {
console.log("test");
return this.$http.get("api/Rates/GetRates");
}
//}
}]
)
})();
print.module.js
(function () {
"use strict";
var module = angular.module('print.module', [
'ui.router',
]);
module.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/print');
$stateProvider
.state('print', {
url: '/print',
templateUrl: "Public/scripts/sharedViews/printNavbar.html"
})
.state('print.rates', {
url: "/rates",
controller: 'ratesCtrl',
templateUrl: "Public/scripts/rates/rates.view.html",
controllerAs: 'vm'
})
$locationProvider.html5Mode(true);
});
}());
view (scripts tags only for reference)
<body ng-app="print.module">
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="~/public/scripts/print.module.js"></script>
<script type="text/javascript" src="~/public/scripts/books/books.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/terms/terms.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.service.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/services/modals.service.js"></script>
</body>
You can't use $scope inside Service
My HTML looks this:
<html ng-app="myApp" ng-controller="myController">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
******{{randomValue}}*******
</body>
</html>
My Javascript looks like this:
var myApp = angular.module('myApp', [
'ui.bootstrap',
'ngSanitize'
]);
myApp.config(['$stateProvide', '$httpProvider', function config($stateProvider, $httpProvider) {
}]);
myApp.run(['$location', '$timeout', '$rootScope', function($location, $timeout, $rootScope) {
}]);
myApp.controller('myController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.randomValue = "Hello World!";
}]);
I am getting an angular error in the browser console that leads me to the Angular Website
I am new in angularjs.
I try to download the csv file. So i tried to use angular sanitize and ng-csv files.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vendor/theme_files/js/jquery.min.js"></script>
</head>
<body ng-app="myApp" class="nav-md">
<div class="container body" ui-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/services/lb-services.js"></script>
<script src="vendor/angular-sanitize/angular-sanitize.js"></script>
<script src="vendor/ng-csv/ng-csv.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/offerLetterCtl.js"></script>
<script src="js/services/offerLetter.js"></script>
</body>
</html>
app.js
angular.module('myApp', ['lbServices', 'ui.router']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('login', {
url : '/login',
templateUrl : 'views/login.html',
controller : 'loginController'
}).state('addOfferletter', {
url : '/create_offerletter',
templateUrl : 'views/create_offer_letter.html',
controller : 'offerLetterController'
});
$urlRouterProvider.otherwise('login');
}]);
offerLetterCtl.js (controller folder)
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',
,function($scope, $location, offerLetterService) {
//mycode
}]);
offerLetter.js(Service folder)
angular.module('myApp').factory('offerLetterService', ['$q', '$timeout', '$http',
function($q, $timeout, $http,OfferLetter) {
//mycode
}]);
create_offer_letter.html
<button type="button" ng-csv="getArray()" csv-header="['Field A', 'Field B', 'Field C']" filename="test.csv">
Export
</button>
I followed this link for csv download. enter link description here
If i include this lines in controller
['ngSanitize', 'ngCsv']
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv"
,function($scope, $location, offerLetterService, ngSanitize, ngCsv) {
$scope.filename = "test";
}]);
Error Details:
Error: [$injector:unpr] Unknown provider: ngSanitizeProvider <- ngSanitize <- offerLetterController
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=ngSanitizeProvider%20%3C-%20ngSanitize%20%3C-"<div class="container body ng-scope" ui-view="">"fferLetterController
You are not adding the ngSanatize module to your app in app.js I think. Try like this:
angular.module('myApp', ['lbServices', 'ui.router', 'ngSanitize']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
This is wrong at least:
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv" ,function($scope, $location, offerLetterService) {
Your mistake is that you have 5 services in the first part, and you only really inject 3. If you align those it would help:
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService',"ngSanitize", "ngCsv" ,function($scope, $location, offerLetterService, ngSanitize, ngCsv) {
Next to that, this is not right either:
angular.module('myApp').factory('offerLetterService', ['$q', '$timeout', '$http',
function($q, $timeout, $http,OfferLetter) {
You are defining the factory, called offerLetterService, you don't want to insert it in there I think?
Removed the injection from controller. This should work!
angular.module('myApp').controller('offerLetterController', ['$scope', '$location', 'offerLetterService'
,function($scope, $location, offerLetterService) {
$scope.filename = "test";
}]);
HI i m try to show routing and multiple view in my anguar js code but there is not show can u please help me what is the problum and how to solve it.
Please Help me .
My Code it this
HTML File Index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
App.js Code
var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}
]);
Contrller .js code
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
To complete code is here Plunker
You missed
in your index.html and you've got few spelling errors phones instead of phone ...
please see fixed version here http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview
var phonecatApp = angular.module('phonecatApp', ['ngRoute']);
phonecatApp.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
I am using the Angular seed (download from angular webpage) and am trying to display data from scope's controller inside the partial .
this is the code :
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'mainPage'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('mainPage', ['$scope',function() {
$scope.data= "this is my data";
}])
.controller('MyCtrl2', [function() {
}]);
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
... some more angular includes etc
partial1.html
<p>This is the partial for view 1. {{data}}</p>
I was expecting to see the data defined in the controller , however I simply see :
"This is the partial for view 1. {{data}}"
I think the main problem is you're not passing $scope into the controller function. You should have gotten an error on your browser console. See the working Plunker here:
http://plnkr.co/edit/ItziGeIVI5a9L56P1UCx
var myApp = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partial1.html', controller: 'mainPage'});
$routeProvider.when('/view2', {templateUrl: 'partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
myApp.controller('mainPage', ['$scope',function($scope) {
$scope.data = "this is my data";
}])
.controller('MyCtrl2', ['$scope', function($scope) {
$scope.data = "this is my data 2";
}]);
This:
controller('mainPage', ['$scope', function() {
$scope.data= "this is my data";
}])
Should be:
controller('mainPage', ['$scope', function($scope /* ADD THIS */) {
$scope.data= "this is my data";
}])