Let's say I have two states:
.state('page1', {
url: '/page1',
templateUrl: 'pages/templates/page1.html',
controller: 'page1'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/templates/page2.html',
controller: 'page2'
})
They both have the element <div id="clickme'>DO IT</div>.
In one controller I have:
$("body").on('click', '#clickme', function(e) { alert("clicked"); });
But not on the other controller.
What is the most effective way to restart my bindings if I have a lot of these separately going on within my different controllers?
I don't want them to be active when I switch state's because some things may overlap or just want to make sure nothing overlaps.
The most efficient way is not to do it at all. As the comments have pointed out, you probably shouldn't be using jQuery in your Angular code. Its just not the Angular way.
What you probably want is some directives:
.state('page1', {
url: '/page1',
template: '<page1>',
controller: 'page1'
})
.state('page2', {
url: '/page2',
template: '<page2>',
controller: 'page2'
})
And then in your directive code you will have something like
.directive('page1', function() {
return {
template: '<div ng-click="doIt()">DO IT</div>',
link: function($scope){
$scope.doIt = function(){...}
}
};
});
Related
I have a route definition as follows:
$stateProvider
.state('vehicles', {
url: '/vehicles',
templateUrl: 'foo/bar1.html'
}).state('vehicles.id', {
url: '/{id}',
templateUrl: 'foo/bar3.html'
}).state('vehicles.create', {
url: '/create',
templateUrl: 'foo/bar2.html',
controller: 'VehicleCreateController'
});
I have a button that does
$state.go("vehicles.create");
The problem is, that while the URL changes correctly, the page remains the same. Only after the second click, the correct template appears.
After a hint from my colleague I realized, that it was the state definitions that caused the problem. Reordering the states from "more specific" (URL-wise - i.e. /create) to less specific (/{id}) did the trick. So the thing that was wrong was having the more generic URL /vehicles/{id} before the very similar, but less generic /vehicles/create.
So here's the improved version:
$stateProvider
.state('vehicles', {
url: '/vehicles',
templateUrl: 'foo/bar1.html'
}).state('vehicles.create', {
url: '/create',
templateUrl: 'foo/bar2.html',
controller: 'VehicleCreateController'
}).state('vehicles.id', {
url: '/{id}',
templateUrl: 'foo/bar3.html'
});
use : for your params and ? to make those params optional if you need.
check the below code snippet, for routing with params.
$stateProvider
.state('contacts.detail', {
url: "/contacts/:contactId",
templateUrl: 'contacts.detail.html',
controller: function ($stateParams) {
// If we got here from a url of /contacts/42
expect($stateParams).toBe({contactId: "42"});
}
})
check this for more clear view on routing.
I want to keep a menu html showing all the time.
and mapaBase with their respective html and controller, too.
I want to extend the functionality of controladorMapa to the inicial and movilpedido state.
I got a blank screen
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "templates/menu.html"
})
.state('menu.mapaBase', {
url: "/mapaBase",
abstract: true,
templateUrl: "templates/mapaBase.html",
controller: 'controladorMapa'
})
.state('menu.mapaBase.inicial', {
url: "/inicial",
templateUrl: "templates/mapaInicial.html"
controller: 'controladorInicial'
})
.state('menu.mapaBase.movilPedido', {
url: "/movilPedido",
templateUrl: "templates/movilPedido.html"
controller: 'controladorMovil'
})
You can create a directive to extend html and some functionality.
https://docs.angularjs.org/guide/directive
But if you just want a fixed menu maybe the best choice is create a template for your app/website instead of a component to add everywhere.
I need to handle dynamic params in angular ui-router and load templates according also if someone use link to come on my site, he should be able to reach at desired page. I need to use it for multiple parameters and get the value form server to related values.
.state('home', {
url: '/:shop',
views: {
"mainbox": {
templateUrl: "app/shop/main.html",
controller: "shopMainCtrl",
controllerAs: "shop"
}
// xyz.com/wallmart should be landed here
}
})
.state('course', {
url: '/:shop/:area',
views: {
"mainbox": {
templateUrl: "app/area/nav.html",
controller: "areaNavCtrl",
controllerAs: "areaNav"
}
//xyz.com/wallmart/california should be landed here
}
})
.state('area.food', {
url: '/food',
views: {
"mainboxcontent": {
templateUrl: "app/area/food.html",
controller: "foodMainCtrl",
controllerAs: "food"
}//xyz.com/wallmart/california/food should be landed here
}
}).state('area.cloths', {
url: '/cloths',
views: {
"mainboxcontent": {
templateUrl: "app/area/cloths.html",
controller: "clothsCtrl",
controllerAs: "cloths"
}
//xyz.com/wallmart/california/cloths should be landed here
}
})
.state('buy', {
url: '/:shop/:area/:buy',
views: {
"mainbox": {
templateUrl: "app/buy/buynow.html",
controller: "buyMainCtrl",
controllerAs: "buyNow"
}
//xyz.com/wallmart/california/iphone should be landed here
}
})
https://github.com/angular-ui/ui-router/wiki
templateProvider is something you may try.
stackoverflow: Angular UI Router: decide child state template on the basis of parent resolved object
I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.
I have not used UI-Router at all and any assistance would be greatly appreciated.
index.html
<div ui-view></div>
state-exam>exam.html
<div class="state-exam">
<nav ui-view="exam-pagination"></nav>
<section ui-view="exam-detail"></section>
</div>
route.js
(function() {
'use strict';
angular
.module('studentPortal')
.config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('exam', {
url: '/exam/:step',
abstract: true,
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
})
.state('exam.instructions', {
url: '/instructions',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
There is a working plunker
There is a similar Q & A in fact, with working plunker:
Angular UI Router - Nested States with multiple layouts
Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)
So this is the code adjustment
.state('exam', {
url: '/exam/:step',
abstract: true,
// the root view and the static pagination view
// will be defined here, so we need views : {}
views: {
'':{
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
},
// absolute naming targets the view defined above
'exam-pagination#exam':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
}
})
.state('exam.instructions', {
url: '/instructions',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
Also check this to get more details about absolute view naming
Angular UI router nested views
Angular-UI Router: Nested Views Not Working
The working example is here
I have this code:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member",
abstract: true
})
.state("member.list", {
url: "/list",
views: {
"" : {
templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
controller: 'MemberController'
}
}
});
});
If I change it to:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member/list",
views: {
"" : {
templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
controller: 'MemberController'
}
}
});
});
And I do
$state.go("member");
It works ok. Loads the html and parse it to the main view, but with the first version and doing
$state.go("member.list");
It does not parse the html to the main view. It does load the html (I can see it at the debugger) but the html is not placed at the view. What am I doing wrong?
EDIT 1
I found this but this is not really helpful, because I'm doing it programmatically, not with html :(
EDIT 2
Fiddle not working:
http://jsfiddle.net/8ET4L/
Fiddle working:
http://jsfiddle.net/FFx95/
EDIT 3
Fix:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member",
abstract: true,
template: "<div ui-view />"
})
.state("member.list", {
url: "/list",
views: {
"" : {
templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
controller: 'MemberController'
}
}
});
});
As documentation says:
Remember: Abstract states still need their own <ui-view/> for their
children to plug into. So if you are using an abstract state just to
prepend a url, set resolves/data, or run an onEnter/Exit function,
then you'll additionally need to set template: "<ui-view/>".
Which means you have to have:
<div ng-app="App" ng-controller="AppCtrl">
<div ui-view>
<div ui-view>
this is the main view
</div>
</div>
</div>
in your fiddle. See my updated example.
Alternatively you can declare it on the state definition:
.state("member", {
url: "/member",
abstract: true,
template: "<div ui-view/>"
})
See another fiddle.