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
Related
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,
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 am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
There are no errors thrown, and the app works in Chrome.
/* app.js */
var app = app || angular.module('app', []);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/look', {templateUrl: 'partials/look.html', controller: 'DataCtrl'});
}]);
/* Controllers */
var app = app || angular.module('app', []);
app.controller('DataCtrl', ['$scope', '$http', function($scope, $http){
$scope.orderProp = 'id';
$http.get('data/data.json').success(function(data){
$scope.data = data;
});
}]);
Any hint of what could be going wrong? Please let me know if more data is needed.
I have module with directive and application which is module with controllers.
angular.module('ValidationWidgets', [])
.directive('validationfield', function () {
....
});
angular.module('MyPage', ['ValidationWidgets'])
.controller('MyFirstController', function ($scope) {
....
});
Is there some pretty syntax to declare many controllers in app module, because .controller('MyFirstController', function ($scope) { looks bad?
I want to write something like:
var myPage = angular.module('MyPage', ['ValidationWidgets']);
myPage.controllers.MyFirstController = function($scope) {
...
}
var app = angular.module("myApp", []);
app.controller("my controller", function(){});
or
var app = angular.module("myApp", []);
var controllers = {};
controller.myController = function(){};
app.controller(controllers);
Take a look at this video http://egghead.io/video/angularjs-thinking-different-about-organization/
The whole series is amazing to be honest.
To expand on what #Jacob Dalton said, you can do this:
Setup your routes:
app.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {templateUrl: 'partials/view1', controller: 'View1Ctrl'}).
when('/view2', {templateUrl: 'partials/view1', controller: 'View2Ctrl'}).
otherwise({redirectTo: '/view1'});
}]);
Then you can declare your controllers by simply declaring a function:
function View1Ctrl($scope, $http) {
}
function View2Ctrl($scope, $http) {
}
Those functions will be auto wired as controllers. As stated before, however, this makes it less obvious that these functions are controllers.