We Keep Coding

ui-router nested state won't load

This is a pretty standard question, however I can't seem to find a solution in anything online. Below is the router/index.html page I'm using. I'm not getting any errors in the console, however when the url resolves, correctly, to the login page the entire page is blank. Any ideas, looking at the code below, as to what I'm missing?
router
(function(){
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
function AppRouter($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('main', {
url: '/main',
abstract: true,
resolve:{
Config: 'Config',
config: function(Config){
console.log(Config);
return Config;
}
}
})
.state('main.login', {
url: '/login',
templateUrl: 'app/components/login/login.html',
controller: 'LoginController',
controllerAs: 'vm',
reloadOnSearch: false
})
}
})();
index.html
<div class="slide-animation-container">
<div ui-view id="ng-view" class="slide-animation"></div>
{{scrollTo}}
</div>
login.html
<div class="container" ui-view>
<div class="row vertical-center-row">
<form id="loginForm" class="form-signin" style="max-width:300px;" autocomplete="off" ng-if="attemptLogin">
<h2 class="form-signin-heading" style="font-size:22px">Please Sign In</h2>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span></span>
<input type="text" class="form-control" id="username" placeholder="User Name" ng-model="user.username" required>
</div>
</form>
</div>
</div>
EDIT
The router above resides in my config.js file for my core module:
core.module.js
(function(){
'use strict'
angular.module('app.core', ['angulartics', 'angulartics.google.analytics', 'angulartics.scroll', 'ngRoute', 'ngAnimate', 'ng.deviceDetector', 'ui.router',
'ui.bootstrap', 'ngTable', 'ngSanitize', 'ngCsv', 'toastr', 'angular.chosen', 'rzModule', 'publicServices']);
})();

Your otherwise logic changes the url to /login when no states match.
$urlRouterProvider.otherwise('/login');
However, your state definitions do not have a url that matches /login.
Because main.login is a child of main, it inherits the URL from main.
Therefore, you should use the full URL for main.login in your otherwise() call.
$urlRouterProvider.otherwise('/main/login');

Your module should have injected ui.router as a dependency ,
var app = angular.module('app',['ui.router']);
DEMO

$location.path change url but no redirecting

I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.

I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.

HTML highlighting PRISM with Angular.js

I have the problem with HTML highlighting by using Prism.js
The problem was exactly the same with Prism HTML highlighter . But the solution there do not work in my case.
As you can see there, the code was not hightlighted
[Source Code]
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css" rel="stylesheet" />
<div class="container" >
<div class="jumbotron" style="text-align: center">
<h1>Lanyang Chat</h1>
<h1><small>Presentation</small></h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Testing</h3>
</div>
<div class="panel-body">
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script></code></pre>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
[Update]
There was nothing wrong the code, the problem was on implementation with AngularJS
[Temporary Solution] - by #Angelo
Link : http://webtoutsaint.com/prismjs_eng
I use page controller method and slightly change the code since the code provided in the link gave me some syntax error.
app.controller('PrismCtrl', function () {
console.log("Page Controller reporting for duty.");
Prism.highlightAll();
//Here is the problem, Prism is undefined if I include the js file on partial page, But work perfectly if I include it on index.html
});
The problem was solved when including the prism.js on index.html. But failed with undefined error while including the prism.js on the partial/template page.
*Note: I'm not familiar with Angular.js, anyone can solve me this problem?
main.js
var app = angular.module('LanyangChat', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {templateUrl: "pages/login.html", controller: "PageCtrl"})
.when("/login", {templateUrl: "pages/login.html", controller: "PageCtrl"})
.when("/chat", {templateUrl: "pages/chat.html", controller: "PageCtrl"})
.when("/online", {templateUrl: "pages/online.html", controller: "PageCtrl"})
.when("/presentation", {templateUrl: "pages/presentation.html", controller: "PrismCtrl"})
.when("/timeline", {templateUrl: "pages/timeline.html", controller: "PageCtrl"})
.when("/changelog", {templateUrl: "pages/changelog.html", controller: "PageCtrl"})
.when("/privacy-tos", {templateUrl: "pages/privacy-tos.html", controller: "PageCtrl"})
.when("/about", {templateUrl: "pages/about.html", controller: "PageCtrl"})
.when("/404", {templateUrl: "pages/404.html", controller: "PageCtrl"})
.otherwise({redirectTo: '/404'});
}]);
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
//console.log("Page Controller reporting for duty.");
});
app.controller('PrismCtrl', function () {
console.log("Page Controller reporting for duty.");
Prism.highlightAll();
});

Seems that prism.js and frameworks using AJAX as Angular, do not mix up. Although, it's not impossible.
The following topic displays an example on how to use them together:
http://webtoutsaint.com/prismjs_eng
More helpful topics:
Highlights don't work in external template
http://prismjs.com/faq.html#basic-usage

angular-ui router With two html pages

My project has the file home, page1, page2.
My home page has a different header layout than the rest of my pages. So, it is a separate html file. page1 and page 2 is using ui routing to load in the content of the page, but the header and footer are the same.
My Question is: if I am on the home page and click btn 1. how do I get it to load in the content of page1? (It will load index.html, but no content of btn1.)
I'm not sure if passing an id to the index.js is a solution and I'm not sure how to even do that. Would it make more sense to just make the entire thing a SPA?
My home.html with the buttons:
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>
My idex.html:
<body>
<div class="container" ng-app="app">
<header ng-include="'html/header.html'"></header>
<div ui-view></div>
<footer ng-include="'html/footer.html'"></footer>
</div>
</body>
<script src="vendors/angular/angular.js"></script>
<script src="vendors/angular-ui-router/release/angular-ui-router.js </script>
<script src="scripts/index.js"></script>
my header.html:
<div id="headerLinks">
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
<a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
</div>
</div>
my index.js:
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Page1', {
url: 'Page1',
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.state('Page2', {
url: 'Page2',
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
}])

I"m kinda confused by what I was asking now that I look at it. I believe I was asking how to build a router with multiple pages. I got that to work. if this doesn't help, I'll see if I can find a resource or explain it better.
import angular-ui-router.
<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
This is what my index.js file now looks like. it has multiply views which allow for different header or content or footer or whatever.
var app = angular.module('app', [
'ui.router',
'ctrls'
]);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/home',
views: {
'header': {
templateUrl: 'html/headerHome.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'home.html',
//controller: 'ContentController'
}
}
})
.state('page1', {
url: '/page1',
views: {
'header': {
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'page1.html',
controller: 'page1Ctrl'
}
}
})
.state('page2', {
url: '/page1',
views:{
'header':{
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content':{
templateUrl: 'page2.html',
controller: 'page2Ctrl'
}
}
})

Routing does not work in angularjs

I am very new to angular js.
I have implemented routing in angular js but it does not redirect me to the pages I have stated in the route.js
here is the code:
Route.js
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/getplaces', {
templateUrl: 'getplaces.html',
controller: 'ListCtrl',
}).
when('/getuncategorisedplaces', {
templateUrl: 'list.html',
controller: 'uncatCtrl'
})
.otherwise ({
redirectTo: '/getplaces'
});
}]);
Controller.js
function uncatCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data) {
$scope.places = data;
console.log(data);
}
)}
// get places
function ListCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getplaces').success(function (data) {
$scope.places = data;
console.log("Successful")
console.log(data);
}
)}
HTML code includes ng view and href such as href="#getplaces"
<body ng-app="sampleApp" >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> <a class= "linha" href="#getplaces"> Get places </a></li>
<li><a class= "linha" href="post.html"> Post a movie </a></li>
<li><a class= "linha" href="#getuncategorisedplaces">List of uncategorised places </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>

Check that you have both scripts included (angular and ngroute)
<script src='angular.js'>
<script src='angular-route.js'>
Then check that you are including that module in your app:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
As of Angular 1.2.0, angular-route is a separate module
refer to the angular documentation:
https://docs.angularjs.org/api/ngRoute

Here is an example code that i have written a while ago.
var app = angular.module('test', ['ngRoute','ngGrid','ngBootstrap', 'http-auth-interceptor','ui.bootstrap','ngCookies','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/sign-in', {templateUrl: 'partials/login/signin.html', controller: LoginCtrl}).
when('/admin/sign-in', {templateUrl: 'partials/login/userManagementSignin.html', controller: LoginCtrl}).
otherwise({redirectTo: '/dashboard'});
}]);