Can I have some constant part of the page in AngularJS, like logo, side menu, breadcrumb?
The question is how to have any part constant and navigate only content part?
Is the only way is to include html fragments?
<html>
<head>
</head>
<body ng-app="">
<div>
<p>CONSTANT PART</p>
</div>
<div ui-view>
content use ui router for changing content configure routes in app.js
</div>
</body>
</html
use ui-router the content in ui-view changes according to the state
https://github.com/angular-ui/ui-router
Angular Route Segment
bower install angular-route-segment
The library provides two pieces of code: $routeSegment service and app-view-segment directive. Both are placed in their own modules which you must include as dependencies in your app module:
var app = angular.module('app', ['ngRoute', 'route-segment', 'view-segment']);
$routeSegmentProvider.segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl});
$routeSegmentProvider.within('s1').segment('home', {
templateUrl: 'templates/section1/home.html'});
$routeSegmentProvider.within('s1').segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']});
$routeSegmentProvider.within('s1').within('itemInfo').segment('overview', {
templateUrl: 'templates/section1/item/overview.html'});
Then, any app-view-segment tags (which are similar to built-in ng-view) in the DOM will be populated with the corresponding route segment item. You must provide a segment index as an argument to this directive to make it aware about which segment level in the tree it should be linked to.
index.html:
<ul>
<li ng-class="{active: $routeSegment.startsWith('s1')}">
Section 1
</li>
<li ng-class="{active: $routeSegment.startsWith('s2')}">
Section 2
</li>
</ul>
<div id="contents" app-view-segment="0"></div>
Where ul code is static and will be displayed on every page
Related
I got 2 divs, first has links pointing to individual pages and another one to display the content of pages the links are pointing to. Here is how it looks:
<div id="navigation">
<a href="http://mydomain/page1">
<a href="http://mydomain/page2">
<a href="http://mydomain/and-so-on">
</div>
<div id="content">
<!-- display content here -->
</div>
Is there a way to prevent redirecting the page on link click and display the content of the URL they point to? I'm doing it this way for SEO purposes so each individual pages can also be crawlable on their own.
I've heard of ng-include but I want to be sure I'm heading the right direction so I reckon I should ask first before going with it.
Thank you in advance.
Use AngularJS Routing for this purpose.
<a href="#page1">
<a href="#page2">
<a href="#and-so-on">
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("page1", {
templateUrl : "http://yourDomain/page1.html"
})
.when("/page2", {
templateUrl : "http://yourDomain/page2.html"
})
.when("/and-so-on", {
templateUrl : "http://yourDomain/and-so-on.html"
});
});
</script>
Note: Must include angular-route.js
If I have two list items
<li></li>
<li></li>
and based on which is clicked, to use ng-include to render in a div on the current page?
<div ng-controller="main-panel" class="main-panel">
<ng-include src="'clickedElement'"></ng-include>
</div>
I am confused as to how to use routes to render an html inside a div, which is decided by which element you click?
main.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
controller: 'side-menu'
})
.when('/signup', {
templateUrl : 'signup.html',
controller: 'main-panel'
});
$locationProvider.html5Mode(true);
});
HTML
<li ng-repeat="oucampus in secondaryLinks.oucampus">
<a ng-href='{{oucampus.href}}'> {{oucampus.title}} </a>
</li>
<div class="main-panel" ng-view></div>
CONTROLLER FUNCTION
oucampus: [
{title: "Requests", href:"signup.html"},
],
Plunker
If you are trying to render HTML content based on routes, you would want to use a routing service such as ngRoute or ui-router. ng-include isn't the best option for implementing routing within your angular application.
With ngRoute, you use a directive ng-view to have angular load html/controllers/etc based on route specified/configured in your applications config() method into some DOM element. This is triggered when you click on an <a> that has an ng-href with a corresponding path or programatically in something like a controller using the $location service path() method.
Route Configuration:
app.config(function($routeProvider) {
$routeProvider
.when('/foo', {
templateUrl: 'foo.html',
controller: 'FooController'
})
.when('/bar', {
templateUrl: 'bar.html',
controller: 'BarController'
});
});
HTML:
<ul>
<li><a ng-href="#/foo">foo</a></li>
<li><a ng-href="#/bar">bar</a></li>
</ul>
<div ng-view></div>
Here is a plunker demonstrating the functionality of basic routing including loading specific controllers and HTML templates based on a specific route.
ng-include
If you absolutely need to use ng-include, you can using a function executed via ng-click attached to $scope or controllerAs to update the src property of ng-include to load a template based on a click element. I've updated the plunker.
Hopefully this helps!
I have a MVC6/Angular site that will have multiple applications, but for now it just has one. When it is complete an example will be App1 and App2 being.cshtml pages with only a div with a data-ng-app and data-ng-view attribute:
mysite.come/virtualdir/App/App1:
<div class="row" data-ng-app="app-app1">
<div data-ng-view></div>
</div>
mysite.come/virtualdir/App/App2
<div class="row" data-ng-app="app-app2">
<div data-ng-view></div>
</div>
For angular, I understand if I have a virtual directory in IIS i need to include in my the header section of the _Layout.cshtml (Actually putting this in the _Layout will break development):
<base href="#Url.Content("~/")" />
My original templateUrl and angular links for app1 in development are:
$routeProvider.when("/", {
templateUrl: "/views/app1/index.html"
});
$routeProvider.when("/items", {
controller: "receiveController",
controllerAs: "vm",
templateUrl: "/views/app1/receiveView.html"
});
// typical link in html page for app1
<a data-ng-href="#/items"></a>
When I deploy to IIS i need to have the routing below to get to my index page to load when the the user navigates to mysite.come/virtualdir/App/App1
$routeProvider.when("/", {
templateUrl: "../views/app1/index.html"
});
After that none of my other links work:
<a data-ng-href="#/items"></a> navigates me to mysite.com/virtualDir/#/items
How do I structure my hrefs in the html page? i tried playing around with the ../#/items/ and ..#/items and adding the .. to the other templateUrl but nothing seemed to work. Thanks
so it seems like the simplest solution is to define the routes and hrefs as below. My problem was not having all three of these combinations at once. I thought angular defined the root of the angular routes based on my ~/App/App1 where I defined:
<div class="row" data-ng-app="app-app1">
<div data-ng-view></div>
</div>
so I needed in the app.js:
$routeProvider.when("/", {
templateUrl: "views/app1/index.html"
})
# the top of my _Layout.cshtml
<base href="/app/">
my href:
data-ng-href="App/App1#/items"
<html>
<head>
[...]
</head>
<body>
<div ui-view="body">
<header></header>
<div ui-view="main">
Something you see while angular/templates load.
</div>
<footer></footer>
</div>
</body>
</html>
stuff.js
var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: '/',
views: {
"main": {
controller: 'HomeController',
templateUrl: 'home.tpl.html'
}
}
});
$stateProvider.state('signin', {
url: '/signin',
views: {
"body": {
controller: 'SigninController',
templateUrl: 'signin.tpl.html'
}
}
});
}]);
I disabled javascript while making the state transition and this is what I see in the browsers inspector...
<html>
[...]
<body>
<div ui-view="body">
<header>[...]</header>
<div ui-view="main">[... home.tpl.html ...]</div>
</div>
<div ui-view="body">
[... signup.tpl.html ...]
</div>
</body>
</html>
I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.
Obviously this causes the problem that a combination of BOTH views are showing for at least two seconds while navigating from signin to home. This behavior is the same on all tested browsers. Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?
this is similar to: Preventing duplicate ui-view in AngularJS and the answer may apply to my situation as well.
EDIT
the first div had class="ng-enter ng-enter-active" and the next one had class="ng-leave ng-leave-active" answer follows from that.
I have noticed this as well. This answer: Angularjs - ng-cloak/ng-show elements blink states that ng-cloak is the ticket, but I haven't been able to get it to work in this scenario.
I'm not sure how you are moving between your routes, but you could set a property on the model used by the first view to true and use ng-show on the entire view with that variable. Then when you're ready to move to the second view, set that variable to false. I'm trying to resolve this myself and will report back if I find a more elegant solution.
I am brand new to AngularJs and after following some tutorials I decided to try to implement a one page app into one of my projects. I have it working but I had one question about this code. Could I change what is shown on the first page before they navigate to anything? I don't want it shown on every page just when they first land on it before clicking any links.
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('cfgController',function($scope){
/*
Here you can handle controller for specific route as well.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
</div>
<br/>
<div ng-view>
<!--
This DIV loads templates depending upon route.
-->
</div>
</div>
</body>
The pages load fine and if I try to add something to the index.html under ng-view it doesn't show up on the page.
You want to put the content to show up when a user first hits your site under in your "home.html" page which is linked to your "/" route for "ng-view". When a user clicks a link, they will be taken to a new route, and the code/ will be replaced by the route they selected.