I'm working on a little Angular example project, using something like this
angular.module('myApp', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1',
controller: 'Ctrl1'
})
.when('/view1', {
templateUrl: 'view2',
controller: 'Ctrl2'
})
.otherwise({ redirectTo: '/view1'});
});
Now I would like to add a button sending a simple GET "/setDatabaseFlag". No template loading, no new controller. I realized that every call to localhost (my base url for the test) runs through the routeProvider. So I tried to find something like
.when('/setDatabaseFlag', {
$http.get('/setDatabaseFlag');
})
I found an example using
.when('/setDatabaseFlag', {
action: doSomething
})
but $http is not available here. Also "action" seems undocumented.
I guess there must be another approach. Thanks for any hint!
Related
I couldn't find any documentation or article on this.
We here at the company I work for have MVC project.
And we build Angular SPA on top of it.
Also we want it to work offline.
So, I need cache. Found $templateCache module in AngularJS.
And trying to implement it.
Since the project is MVC, all the templates I want to load into ng-view are actually MVC partial views and I can load them by calling {Controller}/{Action}.
But the are no examples on internet ho to implement $templateCache in this case.
All the examples show how to use static templates, like mytemplate.html or just strings. This won't work under MVC.
So, I was trying to figure out how to accomplish that, wrote this, for app.ts:
namespace AppDomain {
"use strict";
export let app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "Home/Template?name=Main", controller: "Controller", controllerAs: "vm" })
.when("/About", { templateUrl: "Home/Template?name=About", controller: "Controller", controllerAs: "vm" })
.when("/Contact", { templateUrl: "Home/Template?name=Contact", controller: "Controller", controllerAs: "vm" })
.otherwise({ redirectTo: "/" });
});
app.run(function ($templateCache) {
$templateCache.put("Home/Template?name=Main", "Home/Template?name=Main");
$templateCache.put("Home/Template?name=About", "Home/Template?name=About");
$templateCache.put("Home/Template?name=Contact", "Home/Template?name=Contact");
});
}
Obviously this doesnt work. Any suggestions? Thanks.
I want to have on the URL of my application like this:
http://localhost:9000/#/?id=XYZ
I don't found how to configure this on angularjs app module
My implementation is like that:
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
but It doesn't work.
You do not have to specify
it will be like
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
and in your SingCtrl.
when you write $routeParam than you will have objects of params which are passed as a query parameter.
so you will get $routePara.id if you pass like ?id=anything
Do not have to worry if you want to catch the query param like ?id=abs&name=test
You can add a "url" attribute to your $routeProvider object.
Something like:
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
url: 'the Url you want to use',
controller: "SignCtrl"
});
PS.: I suggest you to use ui-router instead of ngRoute. Check it out later.
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
Sorry if this seems like a stupid or simple question but I am a little confused, I have been looking up many different kinds of tutorials for Angular to understand the concept and how to create an application.
The issue is how to you attach a Controller to the Page, I have seen two methods:
Add the controller script to the page
Display Controller inside the app.js where the Website Routing is.
Here is what I have at the moment please let me know if there is any issues in this code:
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
app.controller('homeController', ['$scope', function($scope) {
$scope.message = "This is the Home Page";
}]);
Again I am really new to Angular.
Updated to single Controller file:
app.js:
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'controllers/homeController.js'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
controller file:
app.controller('homeController', ['$scope', function($scope) {
$scope.message = "This is the Home Page";
}]);
Nope, your code is fine. I generally use two different files app.js for all the routing options and a controller.js file for the different controllers. A single file seems a bit too cluttered to me.
A single file per controller works but I see for most usercases it turns out just a few lines of code per page for me, but you can if you have extensive codes in each controller
I create a Controller for every model in my database: e.g: ProjectController.js, PeopleController.js, etc. And I use app.js just for routing and general controllers like header, footer, etc.
There isn't a strict way to do it, you have to decide it based on your architecture design. But i can give you a tip: Never define your controllers in your .html file because it makes it awful and less readable.
That's a purely organizational choice. As long as the browser has the code of the controller available, it doesn't matter.
But unless you're creating a tiny demo, having all the controllers defined in a single JavaScript file will quickly become unmanageable: the file will be too large, you'll search for the controllers constantly, and everyone in the team will modify the same file, leading to conflicts, etc.
The simple rule is: one JS file per AngularJS component.
If you're concerned about two many JS files having to be loaded by the HTML page in production, then make sure to learn using gulp or grunt, and to generate a single minified JS file from all the small JS files used during development.
EDIT:
the controller attribute of the route is not supposed to be the path of a JS file. It's supposed to be the name of a controller. It should thus stay exactly as it was in the first, working example.
You need to understand how the browser works: if the HTML contains two <script> elements, it works the same way as if it had a single one with the code of the two scripts concatenated. So splitting the code in two files doesn't change the way the code is written.
Change your route specification to the following code:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController' //change here
//controller should be the name of the controller,
//not the file containing the controller function
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: ''
}).
when('/signup', {
templateUrl: 'partials/signup.html',
controller: ''
}).
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: ''
}).
otherwise({
redirectTo: '/404',
templateUrl: 'partials/404.html'
});
}]);
I am an amateur with angular. I am using route provider to load separate html pages and controllers. This works fine when I know what pages the site has and I can define them.
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
templateUrl: "../page2.html",
controller: "Page2Ctrl"
})
.when("/page3", {
templateUrl: "../page3.html",
controller: "Page3Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
However, in future, more pages may be added and I want to code a way for angular to take this into accout. Something like;
app.config(function($routeProvider) {
(..figure out n...)
$routeProvider
.when("/page"+n, {
templateUrl: "../page"+n+".html",
controller: "Page"+n+"Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
I cannot figure out how to return a var listing the current page so I can remove '/page' to manipulate the int as n.
I tried console logging $routeProvider but .when simply returns a function. I don't think injecting $scope is wise because obviously a var is passed somewhere using $routeProvider alone.
If you use colon (:) in the route, Angular will parse that and populate the $routeParams with it, then, in your templateUrl, instead of a string, you can use a function which returns the template url. Just inject the $routeParams in the templateUrl's function and build the url you need.
$routeProvider
.when( '/page/:pageNumber', {
templateUrl: function ($routeParams) {
return 'page_' + $routeParams.pageNumber + '.html'
}
})
.otherwise( { redirectTo: '/page/1' } );
Here is a working fiddle.