Angular Binding In Partials - javascript

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";
}])

Related

I am unable to get my new Angular Project up and running

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

angularjs + download csv file + Error: [$injector:unpr] Unknown provider

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";
}]);

Angular $routeParams: get query parameter as array

When I have multiple id parameters in query, $routeParams.id gives me an array.
That's great. But, if only one id is present in the query, I get a string.
/?id=12&id=34&id=56 // $routeParams.id = ["12", "34", "56"]
/?id=12 // $routeParams.id = "12"
This is bad. Because in the first case, $routeParams.id[0] gives "12",
while in the second one, it gives "1" (first char of "12").
I can work this around by inserting an empty id= to all my links, but this is ugly.
See in Plunker
Is "type-checking in controller" my only option? If so, how do I do it?
index.html:
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.15/angular.js"></script>
<script src="//code.angularjs.org/1.3.15/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html:
#/?id=12<br/>
#/?id=12&id=34&id=56<br/>
#/?id=12&id=<br/>
<pre>id: {{id | json:0}}</pre>
<pre>id[0]: {{id[0] | json}}</pre>
script.js:
angular.module('app', ['ngRoute'])
.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
])
.controller('HomeCtrl', [
'$scope', '$routeParams',
function($scope, $routeParams) {
$scope.id = $routeParams.id;
}
]);
EDIT:
For those who wonder, what I am trying to achive is: inter-controller (or inter-view) communication. User selects some items in one view, and sees details for those selected items in the next view. See in Plunker.
The best way to do it is not to use id param multiple times but separate your values with another character and always get an array and you are ready to go!
script.js
(function() {
var app = angular.module('app', ['ngRoute']);
app.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
]);
app.controller('HomeCtrl', [
'$scope', '$routeParams',
function($scope, $routeParams) {
$scope.id = $routeParams.id.split('-');
}
]);
})();
home.html
<p>
#/?id=12-34-56 Array
</p>
<p>
#/?id=12 Array
</p>
<pre>id: {{id | json:0}}</pre>
<pre>id[0]: {{id[0] | json}}</pre>
I wonder why you are passing different values to a single id. However, this should solve your problem
angular.module('app', ['ngRoute'])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
}
])
.controller('HomeCtrl', [
'$scope', '$routeParams', function($scope, $routeParams) {
$scope.id = angular.fromJson($routeParams.id);
}
]);

Routing and Multiple view dones not show in angular js?

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;
}]);

AngularJS Route

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;
}]);

Categories