I want to change some HTML in the navbar upon a route change, using the routing information. I can almost get it to work with the code below, but the data is not parsed as HTML when arriving in the DOM. I tried using the $sce service, but that didn't really get me anywhere.
If there are any other (better) ways of editing the HTML on route change, then please let me know.
HTML:
<nav>
<div ng-controller="BrandCtrl">
<div class="nav-brand">
{{brand}}
</div>
</div>
</nav>
<div ng-view></div>
JS:
var app = angular.module("app", ['ngRoute']);
app.controller("BrandCtrl", function($scope, $route) {
$scope.$on('$routeChangeSuccess', function() {
var html = $route.current.html;
$scope.brand = html;
});
});
app.config(function ($routeProvider) {
$routeProvider
.when('/next-page', {
templateUrl: 'partials/next-page.html',
controller: 'BrandCtrl',
html: '<h3>New brand</h3>'
});
You should be changing the HTML via the 'views' in the routes.
$stateProvider.state('app',{url: 'someurl',
views: {
'topnav': { templateUrl: 'path/to/some/html',
controller: 'navcontroller'},
'mainContent': {templateUrl: 'path/to/some/other/html',
controller: 'contentcontroller'} }
});
In your HTML you would have multiple views:
<div ui-view="topnav"></div>
<div ui-view="mainContent"></div>
Related
Actually i was new to angular js i am trying to call my factory operation into controller i dont know where i am going wrong
and my js goes here
app.factory("myFactory",function(){
var something = {};
something.getsum = function() {
$scope.service = " heloo people"
}
return something;
});
app.controller("helloController", function($scope,myFactory) {
$scope.clickme = function() {
$scope.service=myFactory.getsum();
}
});
and my html goes here
<div ng-controller="hello controller">
<button ng-click="clickme"></button>
<h2>{{service}}</h2>
</div>
and my config goes here:
$urlRouterProvider.otherwise("/index/utilise");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "display.html",
controller:'mainController',
controllerAs: "parentCtrl",
})
.state('index.sample', {
url: "/home",
templateUrl: "content/sample.html",
})
.state('index.utilise', {
url: "/utilise",
templateUrl: "content/utilise.html",
})
})
First issue is that to use the myFactory factory in your controller you would need to inject it into the controller via dependency injection:
app.controller("helloController", function($scope, myFactory) {
$scope.clickme = function() {
$scope.service = myFactory.getsum();
}
});
Second issue you would not use $scope in the myFactory factory method getsum(), you would simply return the value you need:
app.factory("myFactory",function(){
var something = {};
something.getsum = function() {
return " heloo people";
}
return something;
});
Third issue is ng-click was not actually execute controller function clickme as there was parenthesis () as you would with any JavaScript function. It should be ng-click="clickme()" to actually call the function on the controller:
<div ng-controller="helloController">
<button ng-click="clickme()"></button>
<h2>{{service}}</h2>
</div>
Finally, it's unclear what the structure of your application based on the ui-router configuration your provided. With ui-router you wouldn't really have the need to use ng-controller as you can specify what controller any given view should be using. I've created multiple Plunkers, one and two, demonstrating the factory functionality with and without controllers specified for child routes. This should be more than enough to demonstrating calling a controller function in different situations.
Hopefully that helps!
I am trying to make some kind of a mix between an Angular anchor and routing...
I do have it working in the home page, since the anchor sections are there, however, if I am in another page, it does not.
Can anyone point me in the right direction on how to do it correctly, please?
Here´s what I have so far
freddoApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the productos page
.when('/productos', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the unico page
.when('/unico', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the sabores page
.when('/sabores', {
templateUrl : 'pages/home/home.html',
controller : 'mainController'
})
// route for the locales page
.when('/locales', {
templateUrl : 'pages/locales/locales.html',
controller : 'storeController'
})
// route for the servicios page
.when('/servicios', {
templateUrl : 'pages/servicios/servicios.html',
controller : 'servicesController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact/contact.html',
controller : 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
/............................./
freddoApp.controller('mainController', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
};
/............................./
(HTML)
<div id="freedo-nav-bar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a ng-click="scrollTo('productos')">Productos</a></li>
<li><a ng-click="scrollTo('unico')"> Freddo Único</a></li>
<li><a ng-click="scrollTo('sabores')"> Sabores</a></li>
<li> Locales</li>
<li> Servicios</li>
<li> Nosotros</li>
<li> Contacto</li>
</ul>
</div>
Thanks!
If i understand you right, i think you could solve this with resolve.
First add a resolve function to your routing:
.when('productos/', {
templateUrl : 'pages/home/home.html',
controller : 'mainController',
resolve: {
anchorname: function() { {
// anchor name
return 'productos'
}
}
})
In your controller pass the resolve object and add some function for the scrolling
freddoApp.controller('mainController', function($scope, $location, $anchorScroll, anchorname) {
if(anchorname){
$location.hash(anchorname);
$anchorScroll();
}
})
This should immediately scroll to the anchor after you selecting the route.
EDIT: Its working, see here: https://jsfiddle.net/326f44xu/
Best approach for you is using routing url params like /home/:section. If you do it in that way, you are able to access from any other page. PLUNKER
ROUTE CONFIG
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home/:section?', {
templateUrl: 'home.html',
controller: 'mainController'
}) //You don't need to repeat your .when() multiple times
$routeProvider.otherwise({
redirectTo: '/home'
});
});
HOME CTRL (mainController)
app.controller('mainController', function($routeParams, $location, $anchorScroll) {
//wrap this on $onInit or activate() function if you want
$location.hash($routeParams.section);
$anchorScroll();
});
HOME.HTML
<div><!-- HOME --></div>
<div id="productos"><!-- Productos--></div>
<div id="unico"><!-- unico--></div>
<div id="sabores"><!-- sabores--></div>
INDEX.HTML
<body>
<div>
<a ng-href="#/home">Home</a>
<a ng-href="#/home/productos">productos</a>
<a ng-href="#/home/unico">Unicos</a>
<a ng-href="#/home/sabores">Sabores</a>
</div>
<div ng-view></div>
</body>
** You can use empty route with optional params like /:section?, but I added /home to make it clear. The ? at the end of url param is to make it optional.
https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview
I have created an array of items and when I click on each item details page will be displayed ,for all the items in the array I have used same details page,can anyone look at my plunker and explain why the templateURL is not working when I click on an item?
var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
$scope.items = [{
name: 'Iphone',
}, {
name: 'Oneplus'
}, {
name: 'Moto'
}];
});
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
app.controller('ItemCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.itemName = $routeParams.itemName;
}
]);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>
<p>Search:<input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="item in items|filter:test">{{ item.name }}
</li>
</ul>
<div ng-view></div>
</body>
</html>
here is my details page
<!DOCTYPE html>
{{itemName}}
is it because of a mismatch?
.when('/item/:itemName', {
a href="/items/{{item}}"
there's an extra s there
Summary of problems:
Your ItemCtrl is currently defined inside your module's config function. Move it out of there
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
}); // you were missing this
app.controller('ItemCtrl', ['$scope', '$routeParams',
Your route is /item/:itemName and since you're not using HTML5 mode, you need to create your href attributes with a # prefix. For example
ng-href="#/item/{{item.name}}"
Fixed demo here ~ https://plnkr.co/edit/rKHsBMFcXqJUGp8Blx7Q?p=preview
I am using AngularUI Router to navigate content on my website. I have some webpages that show the header/footer navigation and some that do not. I want to be able to detect what my current page is and insert the HTML for the header/footer if needed.
Here is my current router
angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'partials/about.html',
controller: 'aboutCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
})
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
})
}]);
For the html I have this
<html ng-app="app">
<body>
<!-- *********** HEADER ************* -->
<div ng-include=""></div>
<!-- ********** CONTENT *********** -->
<div ui-view></div>
<!-- **************** FOOTER ****************** -->
<div ng-include="'partials/standard_footer.html'"></div>
</body
</html>
For the webpages create and login I do not want to show the header and footer, but I am not sure how to do that.
I want to do something like this,
<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>
How can I achieve this?
You can expose $state on the $rootScope and that will make it accessible in your webpage.
You can then simply check for state.current.name != 'login'
Like below:
Exposing the current state name with ui router
Edit:
Working Plunker of what i meant: https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn
You're almost there. Just add a flag in the params of the appropriate states:
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl',
params: {
hideHeaderAndFooter: true
}
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl',
params: {
hideHeaderAndFooter: true
}
})
And then inject the $stateParams service in your controllers. Every property of the params object will be exposed as a property of the object this service returns:
loginCtrl.$inject = ['$scope', '$stateParams']
function loginCtrl($scope, $stateParams) {
$scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter
}
Then you can use ng-if just the way you meant to use it:
<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>
Actually I want to make some html blocks and load them via ngInclude and when I call a page via a controller, ngView shows the page that contain my html blocks
for example like this scaffold
root
index.html -----> contain ngView for loading pages
app.js
-------root/views
Dashboard.html ----> Contain dashboard's html blocks
--------------root/views/Dashboard
dashboard-profile.html ---->html block for dashboards
...
...
I tried the code below but it doesn't work
app.js
var demoApp = angular.module('sampleApp', ['ngRoute']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/dashboard',
{
controller: 'SimpleController1',
templateUrl: 'views/dashboard.html'
})
.when('/page',{
controller: 'SimpleController2',
templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});
demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});
index.html
<body ng-app="sampleApp" >
<div ng-view ></div>
<!-- compiled and minified Bootstrap JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript" src="Sources/app2.js"></script>
</body>
dashboard.html
<div ng-include='dashboardprofile' ng-controller="myCtrl"></div>
dashboard-profile.html
Some divs and text
Thanks for your help
Try this..
var demoApp = angular.module('sampleApp', ['ngRoute']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/dashboard',
{
controller: 'myCtrl',
templateUrl: 'views/dashboard.html'
})
.when('/page',{
controller: 'SimpleController2',
templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});
demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});