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.
Related
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',
})
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>
I am a beginner on Ionic/Angularjs.
Developing a side menu app on windows 10.
I populated a page from a select statement on SQLite.
And i'm to edit individual item by navigating to an edit page using state params but not responding. Many thanks for your kind assistance:
<a href="#/edit/{{task.id}}" class="item" ng-repeat="task in Ourdata">
<h2>{{task.id}}</h2>
<p>{{task.name}}</p>
</a>
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/list',
templateUrl: 'templates/list.html'
})
.state('edit',{
url: '/edit:taskId',
templateUrl: 'templates/edit.html'
});
$urlRouterProvider.otherwise('/list');
})
You should insert the slash / before the :
I edited and add a controller to it:
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('list',{
url: '/list',
templateUrl: 'templates/list.html'
})
.state('edit',{
url: '/edit/:taskId',
templateUrl: 'templates/edit.html',
controller: 'MyCtrl'
});
$urlRouterProvider.otherwise('/list');
})
In your controller:
.controller('MyCtrl', function($stateParams){
var taskId = $stateParams.taskId;
});
I have the following code for my router:
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
.state('userEdit', {
url: '/user/edit',
templateUrl: 'templates/user/edit.html',
controller: 'UserEditCtrl'
})
.state('workouts', {
url: '/workouts',
templateUrl: 'templates/workouts/index.html',
controller: 'WorkoutsCtrl'
})
.state('workouts.show', {
url: '/:id',
templateUrl: 'show.html',
controller: 'WorkoutCtrl',
onEnter: function() {
console.log('this is stupid');
}
})
$urlRouterProvider.otherwise('/');
}])
My issue is with the workouts.show state. I have this link:
<div class="" ng-repeat="workout in workouts track by workout._id">
<hr>
<a ui-sref="workouts.show({id: workout._id})">{{ workout.shortURI }}</a>
<p>{{ workout.description }}</p>
<ul class="exercise-list">
<li ng-repeat="exercise in workout.exercises">{{ exercise }}</li>
</ul>
<hr>
</div>
When I click on the link with ui-sref"workouts.show({id: workout._id})" the url changes to the proper format, and adds the id dynamically, but the view does not load. It just stays on the same page.
I have seen several other questions that are similar, but none of the accepted solutions have worked for me, and I have spent too long on this now.
Thanks in advance for any help!
I had similar issue.
You must have a ui-view in your "workouts" state, so that your "workouts.show" will render as a child.
Hope this helps.
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