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;
}]);
Related
I took an AngularJS lesson. But Angular is not understanding links to the details page, like template/1 if I click on a link from the browser. However, if I enter the URL in the address bar of the browser it works fine. How can I resolve this?
App.js
angular.module('templateStore.templates', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
templateUrl: 'templates/templates.html',
controller: 'TemplatesCtrl'
})
.when('/template/:templateId', {
templateUrl: 'templates/template-details.html',
controller: 'TemplateDetailsCtrl'
})
.otherwise({
redirectTo: '/templates'
});
}])
.controller('TemplatesCtrl', ['$scope', function($scope) {
console.log('This is Template ');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}]);
Templates.html(main page)
<div class="col-md-4 template">
<h3>Template 4</h3>
<img src="img/4.jpg">
<h4>$29.99</h4>
<a class="btn btn-primary btn-block" href="#/template/1">Details</a>
</div>
Attached is the image in which I highlighted the url in the address bar after clicking it
.when('/template/:templateId', {
templateUrl: 'templates/template-details.html',
controller: 'TemplateDetailsCtrl'
})
App.controller('TemplateDetailsCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {
console.log($routeParams.templateId); }]);
Demo
Yes you need #/template/2 and above its working code.
may this help you....
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";
}]);
I have added the scripts like this
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/test.js"></script>
and I did this in my test.js
var app = angular.module('MyApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
});
$routeProvider.otherwise({ redirectTo: '/login' });
});
app.controller('loginController', function () {
})
I got that the $routeProvider is unknown.
I have read many questions about this and I tried the solutions but nothing works.
help please
notethe angular library is working
I can make binding for example
Try
<div ng-app="MyApp" ng-controller="loginController">{{test}}</div>
then
var app = angular.module('MyApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
});
$routeProvider.otherwise({
redirectTo: '/login'
});
});
app.controller('loginController', function ($scope) {
$scope.test = "test me"
})
Since Angular 1.2 - ngRoute module is separated as component, you have to include angular-route.js, then you will have your providers.
https://github.com/angular/angular.js/commit/5599b55b04788c2e327d7551a4a699d75516dd21
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-12
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";
}])
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;
}]);