Is it possible to have routing as follows in angular?
I'm using ui-router for routing, Angular version is 1.4 FYI
.state('home', {
url: '/:city',
controller: 'HomeCtrl',
templateUrl: 'templates/home.html'
})
.state('about', {
url: '/about',
controller: 'AboutCtrl',
templateUrl: 'templates/about.html'
})
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
When I tried this way angular is considering both /about and /login as home state and giving me "about" and "login" in state params is there anyway to override this to have urls as specified?
Just define your static routes before home state, here's a demo
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
// what's the initial route? for the sake of example, it's `/almaty`
$urlRouterProvider.otherwise("/almaty");
$stateProvider
.state('about', {
url: '/about',
template: '<h1>about</h1>'
})
.state('login', {
url: '/login',
template: '<h1>login</h1>'
})
.state('home', {
url: '/:city',
controller: function($scope, $stateParams) {
$scope.stateCity = $stateParams.city
},
template: '<h1>city - {{stateCity}}</h1>'
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/angular-ui-router#0.4.2/release/angular-ui-router.min.js"></script>
<div ng-app="app">
<ul>
<li>
city Almaty
</li>
<li>
about
</li>
<li>
login
</li>
</ul>
<div ui-view></div>
</div>
Related
Body of my index page looks in the following way:
<body >
<div ng-view></div>
</body>
I config my app in this way:
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/',
templateUrl: 'main.html'
})
$locationProvider.html5Mode(true);
});
The content of my main.html file is:
<div>
Example content
</div>
I would like my page to dispaly the content of main file when entering the main address. However, it is blank. What am I missing (I am new to angular)?
I want to create such a schema:
DOM schema
Navbar state must be always inserted, it have our template and controller.
Content state must insert templates and controllers depending on URL path. Example:
mysite.com/ inserts main.html and mainCtrl.js into Content state.
mysite.com/articles inserts articles.html and articlesCtrl.js into Content state.
My actual try:
//app.js
var app = angular.module('myApp', [
'ui.router',
'ngCookies',
'myApp.content',
'myApp.main',
'myApp.navbar',
'myApp.articles',
]);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
views: {
'navbar': {
templateUrl: 'templates/navbar.html',
controller: 'navbarCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
}
}
})
//contentCtrl.js
angular.module('myApp.content', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('content.main', {
url: '/',
views: 'templates/content/main.html',
controller: 'mainCtrl'
})
.state('content.articles', {
url: '/articles',
views: 'templates/content/articles.html',
controller: 'articlesCtrl'
}
}])
.controller('contentCtrl', ['$scope', function ($scope) {
}
]);
//index.html
<body ng-app='myApp'>
<div ui-view="navbar"></div>
<div ui-view="content"></div>
</body>
//content.html
<h1>Content template</h1>
<ui-view></ui-view>
I see Navbar and Content states, but main and articles don't load into Content state.
How to create this kind of schema?
If the navigation must always be present in the page then you can do something like:
<body ng-app='myApp'>
<div ng-include="templates/navbar.html"></div>
<div ng-include="templates/content.html"></div>
</body>
Next, in your navbar.html template, include the controller directly from the view, so you won't need a special state for it:
<div ng-controller="navbarCtrl">
<!-- THE ACTUAL NAVIGATION HTML -->
</div>
Now you should be able to manage only the "real" states of the application and you don't need the content. prefix before the inner states, and in content.html you already have the <ui-view></ui-view> container for loading the actual states.
I have started learning Ionic. I am tying to set a default route to my home.html but it is not working.
index.html
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button icon ion-navicon"></button>
</div>
<h1 class="title" style="text-align: center;">Title!</h1>
<div class="buttons">
<button class="button icon ion-home"></button>
</div>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
home.html
<h1>Hello world!</h1>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
});
help me where I am doing wrong.
I think you should change the url of home
.state('home', {
url: '/home',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
I am currently converting an AngularJS HTML app to ASP.NET MVC and I have laid out pretty much everything and but when the page loads I see the controller(dashboard.js) but its not firing any function from the dashboard controller here is what I'm doing:
in my _layout.cshtml I have the following:
<html ng-app="app_angular" >
<head>
<script src="~/script/angular/angular.js"></script>
<script src="~/script/angular/angular-route.js"></script>
<script src="~/script/angular/angular-resource.js"></script>
<script src="~/script/angular/angular-animate.js"></script>
<script src="~/script/angular/angular-cookies.js"></script>
<script src="~/script/js/jquery.min.js"></script>
<script src="~/script/js/bootstrap.min.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/controllers/dashboard.js"></script>
<script src="~/Scripts/routes.js"></script>
</head>
<body>
<ng-view class="fx fx-slide page"></ng-view>
<div class="container">
<h3 class="row title">
<div class="col-xs-6">Dashboard</div>
<div class="col-xs-6 text-right text-gray">{{ today | date:'MMMM d, y' }}</div>
</h3>
</div>
<section ng-repeat="template in templates">
<ng-include src="template"></ng-include>
</section>
<div class="container" ng-init="init()">
<!-- Buttons -->
</body>
</html>
myapp.js
var app_angular = angular.module('app_angular', ['ngCookies', 'ngRoute', 'ngResource', 'ngAnimate']);
dashboard.js
'use strict';
app_angular
.controller('dashboard', function ($rootScope, $scope) {
debugger
$scope.today = new Date();
/* set template subviews */
$scope.templates = {
stream: "../../views/templates/firstqtr.html",
modal: "../../views/templates/secondqtr.html",
loan: "../../views/templates/thirdqtr.html"
};
});
routes.js(first approach: does not work)
app_angular
.config(function($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/home/index'
})
.when('/home/about', {
controller: 'dashboard',
templateUrl: '../../views/home/about'
})
.otherwise({
redirectTo: '/'
});
});
routes.js(second approach: does not work)
app_angular
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider
.when('/', { templateUrl: '/home/index', controller: 'dashboard' })
.when('/', { templateUrl: '/home/about', controller: 'dashboard' })
.otherwise({ redirectTo: '/home' });
}])
What else I should be doing any help?
Assuming that /home is the path of your MVC page
you should change your angular routing to use path's that are
relative to your page.
add a view templates that are loaded into your
page
the angular routing below would:
load your mvc page /home/index and inject the template dashboard.html into ng-view element
(MVC controller Home with Action Index is required)
load your mvc page /home/index and inject the template about.html into ng-view element
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/templates/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '../../views/templates/about.html'
})
.otherwise({
redirectTo: '/'
});
});
Remark:
You should rethink your approach of mixing MVC and anjularjs that not a good approach.
Try renaming your _layout.cshtml into index.html and start with a plain (ASP.NET MVC free) SPA.
Files:
index.html
views\dashboard.html
views\about.html
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: 'views/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '/views/about.html'
})
.otherwise({
redirectTo: '/'
});
});
I'm sure the answer is somewhere, but how do i link the same component (Navbar logo) to different pages depending on the URL. I would like to link /about when Url= /home and then /home when Url= /about.
app.js:
angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'AboutCtrl'
})
.state('work', {
url: '/work',
templateUrl: 'app/work/work.html',
controller: 'WorkCtrl'
});
$urlRouterProvider.otherwise('/');
});
home.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
navbar.html
<nav class="navbar" ng-controller="NavbarCtrl">
<h1>title</h1>
</nav>
about.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
NavbarCtrl
* not sure what to do here, add a directive use ui.router use $location ??*
Hope someone can help, I've been thinking about it all week.
Not sure if I understood you correctly, but wouldn't ng-show fit your needs? ng-show
You could check in it what is the location at the moment and show proper url depending on it.
You answered your own question I think. I would use ngRoute and $location and I would probably create a directive for it.