In angular I have defined my routes like this:
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'pages/main.html', controller: 'MainController'});
$routeProvider.when('/login', {templateUrl: 'pages/login.html', controller: 'AccountController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
So my web site loads the pages/main.html page inside my index.html. When I goto #/login then my pages/login.html inside index.html.
But I actually don't want to load page/login.html inside index.html. I want my login page to have its own layout.
So is there a way to load login.html in such a way so that it's not included inside index.html as a partial, but so that it can have it's own base layout?
Yes you could create new html page for login page so it could use bage template
for eg:
base-template.html
<html>
<head>Your scripts</head>
<body ng-app="yourmodule">
<ng-view></ng-view>
</body>
</html>
create login.html
<div>
First Name:<input type="text"/>
Last Name:<input type="password"/>
</div>
var app = angular.module("Your module",[ngroute]);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'login.html',
controller:'your controller'
});
app.controller("Your controller",function($scope){
//your logic
});
Hope it helps you
Related
I'm starting with a basic app with c# web api + AngularJS. I'm using AngularJS ngRoute for routing. The page is perfectly loaded, and the code in the secondary files is displayed correctly. The problem is with the file (or code) templated with ngRoute... here is my code...
my app.js:
var App = angular.module('App', ['ngRoute']);
// configure our routes
App.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/home.html'
})
.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
my Index.html:
<body class="hold-transition skin-blue sidebar-mini" ng-app>
<div class="wrapper">
<!-- Header -->
<header class="main-header" ng-include src="'views/common/header.html'"></header>
<!-- Menú Principal -->
<aside class="main-sidebar" ng-include src="'views/common/sidebar.html'"></aside>
<!-- Contenido de la página -->
<div class="content-wrapper" ng-view>
</div>
<!-- Footer -->
<footer class="main-footer" ng-include src="'views/common/footer.html'"></footer>
</div>
i wasn't passing the dependency injection for $routeProvider. I change it and then i change ng-app for ng-app="App" and start working fine. Thanks all!
Home page I am using AngularJS with my ASP.Net MVC application and I am using angular routing but it is not working.
The angular routes are defined as:
var app = angular.module("webApp",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when(
"/",{
templateUrl: "home/dashboard",
controller: "webCtrl"
})
.when(
"/page1",{
templateUrl: "home/contact",
controller: "page1Ctrl"
})
.otherwise({
templateUrl: "home/contact",
controller: "page1Ctrl"
});
});
The navigation links are displayed on index.cshtml as given below:
<body ng-app="webApp">
Home
Page1
<div ng-view></div>
</body>
It displays dashboard when launched but doesn't display contact page when second link is clicked. Also, it displays strange URLs. On the homepage it dislays http://localhost:58193/#!/ and when I click on page1 link URL gets changed to http://localhost:58193/#!/#%2Fpage1.Please let me know if I am mistaking anything.
have you tried to do like this?
var app = angular.module("webApp",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when(
"/",{
templateUrl: "/home/dashboard",
controller: "webCtrl"
})
.when(
"/page1",{
templateUrl: "/home/contact",
controller: "page1Ctrl"
});
$routeProvider.otherwise({ redirectTo: "/page1" });
$locationProvider.hashPrefix("!");
});
then:
<body ng-app="webApp">
<a ng-href="#!page1">Page1</a>
<div ng-view></div>
</body>
and maybe put in your index-html in your section this:
<meta name="fragment" content="!">
<base href="/">
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html
i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.
Main.html:
<body ng-app="MyApp" ng-controller="mainController">
<div data-role="page" data-theme="b">
<a ng-href="detail.html"></a>
</div>
</body>
detail.html:
<div data-role="page" data-theme="b" ng-controller="DetailContoller">
<button>{{a}}</button></div>
Contoller:
MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});
MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});
When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.
Do you have any suggestion?
Thanks!
Looks like you're mixing jQuery Mobile and Angular notation.
To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.
Here's an example of how to config this on your module:
angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/page1'
});
}]);
Now in your html, use the directive ng-view to specify the tag that should contain the template.
<body ng-app="app">
<div ng-view>
</div>
</body>
I have been searching the web for solutions but cant't find any that will solve my problem.
I am trying to do client side routing with AngularJS and MVC.
This is the Plunker that I am using for guide lines but it does not help me. My MVS2 Project folder structure is as follows:
$root/Views/Home/Home.html
The error I get that the page could not be found. What am I missing here?
AngularJS
// create the module and name it myApp
var myApp= angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'Home.html',controller: 'mainController'})
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function ($scope) {
// create a message to display in our view
$scope.message = 'Home Page should appear here';
});
HTML
<html data-ng-app="myApp">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head
<body data-ng-controller="mainController">
<div id="Div1">
<div data-ng-view></div>
</div>
</body>
</html>
MVC blocks the Views folder from being accessed! It will always return HTTP status 404!
Why? This is done for security. It prevents visitor from looking at your view files (ascx, cshtml, vbhtml, etc) which is source code.
How it's done? You will notice that Viewsfolder has a web.config. Web.config is configured to return 404.
Here is a snippet of the web.config
<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
Notice that for any path and any HTTP method, the handler is HttpNotFoundHandler
Solution: don't use the View folder for your AngularJS templates or modify web.config at your own risk
The answer that LostInComputers gave me I have found a solution to inject html pages to my MVC project.
.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/templates/Home.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: '/templates/About.html',
controller: 'mainController'
})
$routeProvider.otherwise({ redirectTo: '/' });
});
What I did was to create a template folder in my root directory and added my .html pages in there.
This works perfectly for me.