I'm developing my first AngularJS app.
master.html is the shell/main page which will load child pages and has it's own logic (i.e. users, search, etc).
The following image shows conceptual structure of my project-
My app.js -
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/',
{
templateUrl: '/app/views/blogslist.html'
controller: 'BlogListController'
})
});
I want a controller for master.html also. I know I can use ng-controller anywhere. But How and where I'll configure the controller for this page?
Thanks.
May be you are looking for something like this:
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.controller('masterCtrl', ['$scope', function($scope){
// all your logic here
}]);
myApp.config(function ($routeProvider, $locationProvider) {
.........
});
and you can use ng-controller attribute to the wrapper div or body.
Use Angular UI Router instead of ngRoute. It allows nested views and states - exactly what you need here.
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,
Below is my code ,written for ngRoute navigation
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a1', {
templateUrl: 'basic.html',
controller: 'c1'
});
}]);
app.controller('c1', function($scope) {
$scope.hello = "BOOOO!";
});
Navigation is not happening to basic.html with this code.
I have tried solution in few links but thats not working.
My whole intention behind this is performing a parameterized navigation,like from first page I will be passing id and on the second page I will be displaying the data corresponding to that.
For some reason, when I load my page with an ng-view on it, said ng-view is commented out when I inspect it in my console, and I have no idea why.
Reading other threads with a similar problem has proven fruitless. See code snippets below. Currently just console logging routeParams as I am a newbie to AngularJS and I want to make sure I get all the values I need and know what to work with. This is in a Rails project, for reference:
Show Page
<div class ="row" ng-view>
</div>
App.js
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
myApp.config(['$routeProvider', "$locationProvider", function($routeProvider, $locationProvider){
$routeProvider.when("games/:id", {
templateUrl: "timer.html",
controller: 'CountdownController'
})
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}])
controllers.js
'use strict';
myApp.controller('CountdownController', ["$scope", "$http", "$routeParams", function($scope, $http, $routeParams){
console.log($routeParams)
}])
Ah, simple syntax error. I didn't have a leading backslash for that games/:id route! It should look like /games/:id.
This is my first attempt to create a sample angular application.
In app.js I defined the following -
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
I have created corresponding sample.js for controller, sample.html for template and sampleModel.js for model.
In grunt console, it throws app is not defined in controller and model file
Here is the controller file -
'use strict';
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
All the files are included in index.html and the resources are loading correctly which I checked by chrome developer tool but I can't find the reason why it says app not defined. Is there anything I am missing?
As they are separate files and grunt/jshint will not know that the variable is available in other files. Instead of that it would be a best practice to use it in this way:
Instead use this:
angular.module('myTestApp')
.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
Another general pattern you might have noticed in most the other's code, wrapping the code inside an IIFE.
(function() {
"use strict";
var app = angular.module('myTestApp')
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
})();
In this app will not pollute the global namespace and it's local to that function.
Here if you've noticed, I've not used [] while using angular.module(), it means that we're just getting that module.
So in your app.'s alone, it will be with [] and in other files without []
(function() {
"use strict";
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
$routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
})();
If everything else is fine, this line is causing the issue in your code -
app.config(function ($routeProvider) {
routeProvider
you should instead use -
app.config(function ($routeProvider) {
$routeProvider
And yes, if var app is not working, try using
angular.module('myTestApp')
.controller('SampleCtrl',...
I want to use angular's routing function only to bind views and controllers without indicating template and ng-view.
This is what I have so far, and is working well.
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:"myCtrl", template:"whatever"
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){
angular.bootstrap(document, ['myModue'])
HTML
hello!
<div ng-view></div>
This is what I want, and is not working
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:'myCtrl'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){})
angular.bootstrap(document, ['myModule'])
HTML
hello!
How can I do this?
The way you are trying to do it seems conflicting with the concept of Single Page Application
However what you want to do is possible in a different way, the Deep Linking cookbook example may help shed some light for you:
http://docs.angularjs.org/cookbook/deeplinking