I am using angular routes like
$routeProvider
.when('/problems/monthly/volume',{
templateUrl: 'frivolousTerminalsPersentByMonth.htm',
controller: 'mainController'
})
and so on .When i have many templateUrl and i am usinf one controller all of them , is it necessary to define controller: 'mainController' for all of them ? if no where is this one point where i can define it.
if you gave controller name in index.html file, then no need of mentioning controller name in $rootProvider. not even for single. you can write like this.
$routeProvider
.when('/problems/monthly/volume',{
templateUrl: 'frivolousTerminalsPersentByMonth.htm'
})
.when('/problems/monthly/volume1',{
templateUrl: 'example.htm'
})
.when('/problems/monthly/volume2',{
templateUrl: 'example2.htm'
})
I think it is necessary to write multiple routes with the same controller name
$routeProvider
.when('/problems/monthly/volume',{
templateUrl: 'frivolousTerminalsPersentByMonth.htm',
controller: 'mainController'
})
.when('/problems/monthly/volume2',{
templateUrl: 'frivolousTerminalsPersentByMonth2.htm',
controller: 'mainController'
}) .when('/problems/monthly/volume3',{
templateUrl: 'frivolousTerminalsPersentByMonth3.htm',
controller: 'mainController'
})
and so On
If you use only one controller for more page you can add this controller into the HTML code.
For example
<div ng-controller="mainController">
...
</div>
And then insert the view of different template into the div.
HTML
<div ng-controller="mainController">
<ng-view></ng-view>
</div>
while configuring the route no need to mention controller name
$routeProvider
.when('/problems/monthly/volume',{
templateUrl: 'frivolousTerminalsPersentByMonth.htm',
})
Related
Here i am using state provider,for routing.I want to use two controllers for a single template,how to write the syntax?
This is what i tried.
$stateProvider.state("home", {
url: "/",
templateUrl: 'home.html',
controller: 'HomeController'
controller: 'Searchresults'
});
$stateProvider.state("home", {
url: "/",
controller: ['HomeController','Searchresults']
});
Well, this doesn't sounds good that you want to use two controllers for the same template. Why can't you just use the same controller or the services to keep the logic common?
Apart from the recommendation, you can try this. Add your first controller to state configuration:
$stateProvider.state("home", {
url: "/",
templateUrl: 'home.html',
controller: 'HomeController' // 1st controller here
});
And add the second controller as ng-controller in the parent element of the home.html:
<div ng-controller="Searchresults">
<!-- your code of home.html -->
</div>
In case of angular, in its life cycle when does the controller that we define using the .controller method get executed?
First, when you are accessing a DOM with ng-controller attached to it.
E.g.
<ul ng-controller="YourCtrl">
<li ng-repeat="name in names">
{{name.firstName}}
</li>
</ul>
Documentation: https://docs.angularjs.org/guide/controller
Second, when you are accessing a URL route using $routeProvider / $stateProvider that has the method when() / state() with the parameter controller.
E.g.
Using ngRoute:
$routeProvider
.when('/', {
templateUrl: 'app/views/home.html',
controller: 'homeCtrl'
})
.otherwise({
redirectTo: '/'
});
Using ui.router:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html',
controller: 'homeCtrl'
});
Hope it helps.
I'm trying to figure out how obtain www.namedomain.com/#namepage with angular
Javascript:
function config($routeProvider, $locationProvider){
$routeProvider.when("/",{
templateUrl: "/templates/register/testingblock.htm",
controller: "MainCTRL"
})
.when("/#name",{
templateUrl: "/testingBlock.htm",
controller: "MainCTRL"
})
.otherwise({redirectTo:"/"});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}
location.hash() will return you '#namepage' and I think it will help you.
Needs some guidance with respect to migrating my ngRoute configuration to a ui.router configuration. Currently I have one main template (index.html) and it has an ng-view where all views are injected. My current ngRoute config is as follows:
app.config(function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.when('/contact', {
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.when('/notification', {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
})
.otherwise({
redirectTo: '/login'
});
I now want to define a second place in index.html where I can inject some view content - not a nested view, but rather another ng-view (or ui-view in ui-router terminology). The original ng-view section is the default one (currently just for /login and /contact), and the new one is just for specific routes (currently just '/notification' but maybe others in the future). Lets call the new ui-view 'notification-view'.
I've gone through much of the ui-router documentation and still am unsure of how to migrate the above to the new ui.router config. Can someone get me started or point me toward some decent examples?
Update:
Ok, here is where I am. I've adding some states and a new ui-view to my index.html page. See below:
<div class="container">
<div id="header"></div>
<div data-ui-view></div>
<div data-ui-view="notification-view"></div>
</div>
My routing is now:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url: '/notification',
views: {
"notification-view": {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
});
});
This seems to work ok for the most part. When the url /notification is triggered, the app is routed to the NotificationCtrl and renders ui-view content into the notification-view. However the only problem is that the ui content in the main (unnamed) ui-view is lost. I would like whatever is already rendered in the main ui-view to be untouched, and only target the notification-view. Is this possible? Does it have to instead be a nested-view?
When using ui.router, you should think in terms of states rather than routes. So instead of the $routeProvider you instead inject $stateProvider, plan out various states and work from there . So from your example above, we convert it to:
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url:'/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url:'/notification',
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
});
}
There's alot of methods for adding a "sub-view" to uirouter, one method is by adding a child state.
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('login.error', {
url:'/login',
templateUrl: 'app/views/login-error-subview.html',
controller: 'LoginErrorCtrl'
})
Also as $stateProvider doesnt provide a default state handler, you will also need to inject in $urlRouterProvider. This is a provider that also comes with ui-router that is tasked with the responsibility of watching $location for changes.
The thing with ui-router is that you won't see a huge difference compared to the built-in route provider and ease of use it brings until you start using sub-states and stacked-states.
In your example above, ui.router wouldnt know what templte to use tor the ui-view and thus leaves it empty. You can give it a template and thus becomes:
...
.state('notification', {
url: '/notification',
views: {
'':{
templateUrl: 'app/views/notification-main.html',
controller: ''
}
'notification-view': {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
...
But from what I'm getting you want the login and contact to have the notification in it. So ideally you'd create a notification child state for each, as right now there is now way to declare wildcard or multiple parents for a child-state. Hopefully when v1.0 comes out there'll be support for this use-case already.
Below is a link from the docs that will get you upto speed:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
My /home template doesn't have an associated controller (it's blank). Anyway to skip loading the controller and just load the view? I'm using AngularAMD to lazy load so it's an additional call just to get a blank controller file.
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl 'home/home.html',
controller: 'HomeController' //is empty because page is just static text
})
.when('/login', {
templateUrl: 'login/login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/home'
});
});
Nvm, found that you can leave controller: '' blank and it works. It was just throwing an error in my case because I forgot to remove the ng-controller="HomeController" tag from the template/view. Once I removed that, the error was no longer being thrown (in console).