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"
Related
I need this Master Page and Child Page functionality in my application that uses HTML and calls Web Apis using AngularJS.
I'm having a problem in routing in this scenario.
Code used for Routing in Route.js:
var MainApp = angular.module('MainApp', ['ngRoute']);
MainApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../partials/DashboardMenu.html',
controller: 'DashboardMain'
})
.when('/Holidays', {
templateUrl: '../partials/Holidays.html',
controller: 'Holidays'
})
.when('/Projects', {
templateUrl: '../partials/Projects.html',
controller: 'Projects'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
Dashboard.html
<body ng-app="MainApp" ng-controller="DashboardMainController">
<div class="view-animate-container">
<div ng-view class="view-animate"></div>
</div>
DashboardMenu.html
<div class="container-fluid btn-group">
<div class="row">
<a href="../partials/MyProfile.html" class="thumbnail">
<img src="" alt="My Profile" />
</a>
<a href="../partials/Projects.html" class="thumbnail">
<img src="" alt="Projects List" />
</a>
<a href="../partials/Holidays.html" class="thumbnail">
<img src="" alt="Holidays List" />
</a>
</div>
Below is the folder structure in my application:
After the User logs in from the Login Page, the user should be redirected to Dashboard.html with the default child view as DashboardMenu.html
In login Service.cs, when I authenticate the User and try to redirect him to the Dashboard.html with the below code snippet, it's just appending the URL with the Dashboard.html.
$location.path('DashboardMenu.html')
For this, I've added <base href="/" /> in Dashboard.html and locationProvider.html5mode and hasprefix but nothing worked for me. Please let me know where I'm missing..
It sounds like you are trying to implement some kind of version of nested views with ngRoute, which does not support that. I would suggest using ui-router which has support for nested states.
$location.path() should be set to url value that matches in your routing config.....not to the template path
Try changing
$location.path('DashboardMenu.html')
to
$location.path('/')
Same with your href values.... should be url not template
Chnge
<a href="../partials/Projects.html" class="thumbnail">
to
<a href="/Projects" class="thumbnail">
NOTE: Make sure server is configured for using html5Mode
You also need to remove ng-controller from templates that are used by routing that have controller declared already in the routing config. Otherwise you will end up with 2 instances of the controller running
Might suggest you study some more tutorials
I have been following the AngularJS tutorials on CodeSchool.
So I have views/index.html which contains all of my boilerplate code that is identical for each page. Then my templates for each page are in views/templates/ which I want included in the index.html page. So when the home page loads, it loads the views/index.html and includes the views/templates/index.html.
views/
index.html
templates/
index.html
contact.html
about.html
Currently I have
<div id="menu">
<a id="menu_home" href="/#/index" ng-click="menu.set(0)" ng-class="{current:menu.isSet(0)}">Home</a>
<a id="menu_hire" href="/#/hire" ng-click="menu.set(1)" ng-class="{current:menu.isSet(1)}">For Hire</a>
<a id="menu_info" href="/#/info" ng-click="menu.set(2)" ng-class="{current:menu.isSet(2)}">Info</a>
</div>
<div id="main">
<ng-view></ng-view>
</div>
which works great. So only the required html is requested and inserted into the page.
But my problem is that the URL doesn't change in the browser. So if a user went directly to mysite.com/contact it wouldn't work. How can I load the page correctly if the mysite.com/contact or mysite.com/about pages are accessed directly?
I have also got it working using the ngRoute module, but the same issue remains when a user goes directly to a page.
Thanks.
You should use ngRoute and $routeProvider similar to the following.
var navigationRoutes = angular.module('navigationRoutes', ['ngRoute']);
/**
* Load routes for navigation using ngRoute
*/
navigationRoutes.config(function ($routeProvider) {
$routeProvider
.when('/index', {
templateUrl: 'app/components/index/index.view.html',
controller: 'IndexCtrl'
})
.when('/contact', {
templateUrl: 'app/components/contact/contact.view.html',
controller: 'ContactCtrl'
})
.otherwise({
redirectTo: '/dashboard'
});
});
This way you can also specify a different controller based on the URL.
UPDATE
In your index page if you add -
<div class="view">
<div ng-view></div>
</div>
To your main index.html page the the contents of the $routeProvider selected file will be shown within this div. You just need to make sure that you add the tag for the controller.js files in the index.html page.
You will need to make these settings in the web server to redirect all urls to your index page where you load your angular app which in turn will handles the routes
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
<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.