When I use ngView and call a controller inside another one, this makes any process twice :
$routeProvider
.when('/', {
templateUrl: '/main.html',
controller: 'main'
})
.when('/user', {
templateUrl: '/user.html',
controller: 'user'
})
});
<body ng-controller="main">
<div ng-view><!--here is another controller --></div>
</body>
When using ngInclude there is not this problem. What is wrong with using ngView?
It looks like if you are using your main controller twice:
By referencing it in the template as ng-controller
In the routing config of the "/" route
Probably you want remove the ng-controller from your index page?
Related
I'm using $state.go() other places in my app but it's not working in a simple function and I can't work out why. It's not showing an error or showing the right state called in $state.go().
I've tested it with $stateChangeStart, $stateChangeError, $viewContentLoading & $stateChangeSuccess. It reaches all the correct stages: $stateChangeStart, $viewContentLoading then $stateChangeSuccess with the right content in each however, doesn't load the page.
I originally tried it with ui-sref and that didn't work so I tried it with $state.go() and now that isn't working I'm really confused. I can't see any difference between this code and what I have in other places where $state.go() works.
HTML link:
<li ng-repeat="thing in things" class="item" ng-click="showThingDetails()">
Code in controller:
$scope.showThingDetails = function () {
$state.go('thingDetails');}
Code in state:
.state('thingDetails', {
url: '/thingDetails',
views: {
'menuContent': {
templateUrl: 'templates/thingDetails.html',
controller: 'thingDetails'
}
}
})
thingDetails.html
<ion-view view-title="Thing Details">
<ion-content>
<h1>{{title}}</h1>
</ion-content>
</ion-view>
thingDetails.js
angular.module('controllers')
.controller('thingDetails', function($scope, $stateParams) {
$scope.title = "thing";
});
I've just found the answer to my own problem. I had copied the state from another place in my app and defining the templateUrl and controller in the views object was causing it to play up. I took templateUrl and controller out of the views object and it worked.
Code in state is now as below and works:
.state('sweepstakeDetails', {
url: '/sweepstakeDetails',
templateUrl: 'templates/sweepstakeDetails.html',
controller: 'sweepstakeDetails'
})
If anyone can add a more detailed answer as to why then I'd appreciate it.
Do you have an ui-view called 'menuContent' where the view should be loaded?
Else you could try to use this state without the menuContent views
.state('thingDetails', {
url: '/thingDetails',
templateUrl: 'templates/thingDetails.html',
controller: 'thingDetails'
})
I am using ng-route in angularjs to switch beteen views , I made it to work, sample code below:
Html:
Mappings
New Products
angularjs
.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/MbfProduct/Main"
})
.when("/Mappings", {
templateUrl: "/Mappings"
})
.when("/Products", {
templateUrl: "/Products"
})
})
So everything is OK just I had to add the "#" in the ng-href attribute so the page doesn't get refreshed.
So my question how can I have the result, I mean no page refresh, without having the '#' in the href ?
you can write a function in your controller that changes the view. You have to use $location provider to switch between views. There is a method named path that does the switching.
Something like this.
app.controller("TestCtrl", function($scope, $location){
$scope.changeView = function(){
$location.path("/Mappings");
}
})
and call changeView function on ng-click of anchor tag and just remove the ng-href tag altogether. If that doesn't work you can use ng-href="javascript:void(0)" as well to give a void link to anchor tag.
Anguilar 1.5.*
I can not get angular to use my template cache. I gave it a invalid path name on purpose so I would get html file not found. But instead it is not using template cache and just requesting the html files.
templates.js
angular.module("gulpTemplates", []).run(["$templateCache", function($templateCache) { $templateCache.put("aaaa/views/examples.html"
...
app.js
var gulpNewy =
angular
.module('gulpNewy', ['ngRoute', 'gulpTemplates'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/examples', {
templateUrl: 'views/examples.html'
})
.when('/screen-shots', {
templateUrl: 'views/screen-shots.html'
})
index.html
<div class="col-xs-12" ng-view></div>
What am I doing wrong?
Ok, I found the issue.
If you are using ng-view, templateCache will not work by default for you. This is because with ng-view you do not need to use ng-include. templateCache needs to be used with ng-include or $templateCache.get.
Regardless of $templateCache.get, ng-view will not look in templateCache.
I had a working prototype of state views with hardcoded values, but when I tried to include a controller, it breaks the ui-sref links, and they don't seem to point to anything. I can remove the ng-controller attribute and they work again though, and display just fine.
I've also tried attaching ng-controller to a div in the template as well, foregoing a controller in index.html altogether, and while that doesn't break the link, I can't get any expressions in the template to work, and having a controller would be sub-optimal for the purposes of my app if I could avoid it.
What limitations of controllers and views am I misunderstanding?
index.html snippet
<div class="main" ng-controller="MainCtrl">
<a ui-sref="StateA">AAAAA</a>
<div ui-view></div>
</div>
app.js
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('StateA', {
url: "/a",
templateUrl: "views/a.html",
controller: "MainCtrl"
})
});
MainCtrl.js
app.controller("MainCtrl", [$scope, function($scope, paramGroups) {//empty controller//}]);
Apart from some of the syntax errors you have going on your fundamental problem is understanding of how ui-router works.
When you define something like:
.state('StateA', {
url: "/a",
templateUrl: "views/a.html",
controller: "MainCtrl"
})
It means, that when you go to route /a the partial a.html that will get rendered in your ui-view will get the scope for MainCtrl.
There's no point defining ng-controller='MainCtrl' on the element that is parent of ui-view because, ui-view will automatically get the scope for MainCtrl when the route resolves.
Route breaks when you declare that ng-controller because you are trying to nest same controller inside itself.
I'm trying to get ui-router to properly work with nested ui-view elements but I'm having trouble getting the nested view to actually render. Here's my code:
app.js
'use strict';
var lunchrApp = angular.module('lunchr', ['ui.router', 'lunchrControllers']);
lunchrApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.
state('mainPage', {
url: '/',
templateUrl: '/partials/main.jade',
controller: 'MainPageController'
})
.state('users', {
url: '/users',
templateUrl: '/partials/users.jade',
controller: 'UserController'
})
.state('users.matching', {
url: '/matching',
templateUrl: '/partials/users.matching.jade'
})
.state('users.matched', {
url: '/matched',
templateUrl: '/partials/users.matched.jade'
})
.state('register', {
url:'/register',
templateUrl: 'partials/register.jade',
controller: 'RegisterController'
});
$locationProvider.html5Mode(true);
}]);
Here's /partials/users.jade (which gets properly displayed in the div(ui-view) in the body tag)
div(class='container')
h1 Welcome
p(ng-repeat='user in users').
Username: {{user.email}}
Firstname: {{user.firstname}}
Lastname {{user.lastname}}
a(ui-sref='users.matching', class='btn btn-default') Start matching me!
a(ui-sref='users.matched', class='btn btn-default') Simulate a match!
div(ui-view)
Here are partials/users.matching.jade
div
h1 We're matching you!
and partials/user.matched.jade
div
h1 You've been matched!
I can successfully navigate to http://localhost:3000/users/matched but when I do, the html is identical to when I go to http://localhost:3000/users.
Why isn't the nested ui-view being correctly populated?
TL;DR
Just put
doctype html
at the top of the jade file that contains <div ui-view>.
If you want more info, there are a number of pretty easy solutions.
More details
The issue basically comes down to the fact that jade is outputting
<div ui-view="ui-view">
which angular can't understand. So you have to make some changes to the output so it's something angular can consume.
Option 1
IMHO, the simplest option would be to put
doctype html
at the top of the jade file that contains <div ui-view>. You must do this even if your jade file is contained within another file that already has doctype html.
Option 2
You can write
.div(ui-view="")
instead of
div(ui-view)
This forces jade to output <div ui-view>.
Option 3
Angular will be fine if you specify a class named ui-view on your div:
<div class="ui-view">
Option 4
Maybe the hackiest way would be to write the raw HTML like this:
<div ui-view>
That makes jade output it exactly the way you typed it.