how to call the external controller using resolve in angularjs
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp .config(function ($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'Samples/accordion.html',
controller: "AddStudentController",
})
});
accordion.html
<h1>AddStudent</h1>
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
how to call the controller using resolve.
Please share your suggestions,
Related
This is my ngRoute (AngularApp.js)
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/register', {templateUrl: 'partials/AdminPage/register.html', controller: 'registerCtrl'}).
when('/updateEmployee', {templateUrl: 'partials/AdminPage/updateEmployee.html', controller: 'updateEmployeeCtrl'}).
when('/designers',{templateUrl: 'partials/CreateSurvey/design.html',controller: 'DesignCtrl'});
});
This is Another js file where my other controllers are (AngularApp2.js)`
var app = angular.module("myApp", []);
app.controller('myController',function($scope,$http){
$http.get('data.json').success(function(response){
$scope.myData = response;
});
$scope.removeName = function(row) {
$scope.myData.splice($scope.myData.indexOf(row),1);
}
});
But when I include both angular code in one file as below, the 'myController' is not working.
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/register', {templateUrl: 'partials/AdminPage/register.html', controller: 'registerCtrl'}).
when('/updateEmployee', {templateUrl: 'partials/AdminPage/updateEmployee.html', controller: 'updateEmployeeCtrl'}).
when('/designers',{templateUrl: 'partials/CreateSurvey/design.html',controller: 'DesignCtrl'});
});
app.controller('myController',function($scope,$http){
$http.get('data.json').success(function(response){
$scope.myData = response;
});
$scope.removeName = function(row) {
$scope.myData.splice($scope.myData.indexOf(row),1);
}
});
What is the error I am making?
You have 2 different modules app and myApp but never inject one as dependency of the other
Assuming your ng-app uses app as main module you need to inject the myApp module into app one, or make both names the same so you only have one module
Problem is you have
var app = angular.module('app', ['ngRoute']);
it shoud be
var app = angular.module('myApp', ['ngRoute']);
Also make sure you use the ng-app="app" in the HTML if you are declaring as first way.
DEMO
I am working on an app about routing, my code:
//HTML, I passed a 'test' into routing
Test
<div data-ng-view=""></div>
//Template
<h1>{{res}}</h1>
//Angularjs
var app = angular.module("dictApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/details/:test', {
templateUrl: 'template.html',
controller: 'testCtrl'
});
}]);
app.controller('testCtrl', function ($scope, $routeProvider) {
$scope.res = $routeProvider.test;
});
//The template is displayed as
{{res}}
The template page should display 'test', but I don't know why it didn't work.
Thansk in advance.
'test' parameter should be available in $routeParams.
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
The service that exposes the route parameters is $routeParams. $routeProvider is the provider used to configure the routes in the app like the one you have done in your code using .when method as well
You need to inject $routeParams and use it instead of $routeProvider
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
I downloaded Angular-Express-Bootstrap seed from https://github.com/jimakker/angular-express-bootstrap-seed. I would like to perform routing through angular js which is performed perfectly. But now I am facing some problem on calling 'controller' in controllers.js.
I can call my MyCtrl1 by this way and working perfectly:
function MyCtrl1() {
alert('calling Myctrl1..')
}
MyCtrl1.$inject = [];
But whether I call like this:
var app = angular.module('myApp.controllers', []);
app.controller('MyCtrl1', ['$scope', function($scope) {
$scope.greeting = 'MyCtrl1';
alert('calling'+ $scope.greeting+"..")
}]);
The above controller call back function not working and shows this error: Uncaught Error: [$injector:modulerr] MyCtrl1 is not defined
Routing Config in app.js:
var app = angular.module('myApp', ['myApp.filters','myApp.controllers','myApp.services', 'myApp.directives','ngRoute'])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
{
$routeProvider
.when('/view1', {
templateUrl: 'partial/1',
controller: MyCtrl1
})
$locationProvider.html5Mode(true);
}]);
I don't know why it is not working. Any help would be greatly appreciated.
Finally I got the solution, I missed the quotes to the controller name in $routeProvider
Soln : controller: 'MyCtrl1'
var app = angular.module('TaskApp', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/Home', {
templateUrl: '/Home/Index',
controller: 'IndexController'
});
$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('');
}]);
This code is not working properly ,When I remove $routeProvider all reference it work properly but I need $routeProvider how I solve it ?
app.config(['$routeProvider', '$locationProvider',
function ($locationProvider, $routeProvider) {
Oops
EDIT
var app = angular.module('TaskApp', ['ngRoute']);
You also need to add the route service to the app.
I am new to AngularJS and I am having some issues routing. I have my main app.js:
'use strict';
var app = angular.module('app', ['budget']);
angular
.module('app')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
}]);
and my controller file looks like:
angular
.module('budget', ['budget.services'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/content/app/budget/views/budget.html',
controller: 'budget.homeController'
})
.when('/budget/:year/:month',
{
templateUrl: '/content/app/budget/views/budget.html',
controller: 'budget.homeSelectController'
});
}])
.controller('budget.homeController', function ($scope, budgetStore) {
budgetStore.getCurrentBudget(function (data) {
$scope.budget = data;
});
})
.controller('budget.homeSelectController', function ($scope, $routeParams, budgetStore) {
budgetStore.getBudget($routeParams.month, $routeParams.year, function (data) {
$scope.budget = data;
});
});
Angular only ever routes to the homeController route, it never routes to the second route? Can anyone tell me what I'm doing wrong?
I think you have wrong query string assigning
Did you check this?
pass query string in angular js
<a href="/main.html#/budget/12/12" >Next Page</a>
or
<a href="/main.html#/budget/{{Yourvale1}}/{{Yourvale2}}" >Next Page</a>
Get Query String Value
$routeParams.Yourvale1;