AngularJs with prettyprint ngView Routing issue - javascript

I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?

Related

How create routes in AngularJS + JavaScript?

I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>

AngularJS, controller is not a function, got undefined

Making a very simple application in angular, and everytime I try to do this I run into this problem and never know how to solve it.
App.js is this:
angular.module('Euclid',
['ui.bootstrap',
'ngRoute'])
.controller('mainController', function($scope){
})
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
});
}]);
Just some basic routing, nothing in the controller.
Now, that 'HomeController' is set up like this:
var HomeController = function($scope){
var self = this;
// code here
};
angular.module('Euclid').controller('HomeController', HomeController);
And my index.html is set up like so:
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The error in all it's glory is "Argument 'HomeController' is not a function, got undefined". I can not for the life of me figure out where it is getting undefined.
I created a plunker to make things more clear . https://plnkr.co/edit/dL1DPa50mdZtmaJCwcIO?p=preview
As far as I can Understand ,there is no error other than missing some script files.
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="../angular-route.js"></script> //missing
<script src="/ui-bootstrap-tpls-2.1.2.js"></script> //missing
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
As Phil said ,it is clear that the reason for the
error is the missing of angular-router and angular-bootstrap.

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>

Angularjs ng-view not showing data

I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo

AngularJS routes vs. jQuery show/hide

I have just gotten started with AngularJS (coming from jQuery) and it seems worthwhile to replace a majority of my jQuery.
I decided that the easiest place to start was all the simple show / hide tabbed content I have. Currently, I have all the applicable html within the page that loads. However, it seems like I'd be better off loading the entirety of these tabbed sections using Angular routes. Am I correct in that assumption? Or should I use some hybrid approach (the content within these sections is dynamic)?
Anyway, with the Angular solution, I cannot seem to get the script to work for routes. I am in very new territory with this and am clueless as to where I am going wrong. Any help is grea
My currently HTML (simplified):
<!DOCTYPE html>
<html data-ng-app='mainApp'>
<head>
<script src='js/jquery.min.js'></script>
<script src='js/angular.min.js'></script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div></div>
</a>
<a href='#/comment'>
<div></div>
</a>
<a href='#/feedback'>
<div></div>
</a>
</div>
<div class='container'>
<div data-ng-view=''></div>
</div>
<script src='app/main.app.js'></script>
</body>
</html>
Angular:
/// <reference path="../js/angular.min.js" />
var mainApp = angular.module('mainApp', []);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'mainInfoController',
templateUrl: '/app/partials/info.html'
})
.when('/comment',
{
controller: 'mainCommentController',
templateUrl: '/app/partials/comment.html'
})
.when('/feedback',
{
controller: 'mainFeedbackController',
templateUrl: '/app/partials/feedback.html'
})
.otherwise({ redirectTo: '/app/partials/info.html' });
});
Just to note: the controllers above are just placeholders really. I have not created them yet. However, I don't care if they work or not now. I am just concerned with getting the partial view routes to show up. They aren't though. Clicking the links does properly show page.html#/info (or comment or feedback... etc.). But nothing happens.
Also file path is as follows:
main folder = html
js = scripts
app = angular files (app.js / module files here)
views
partials
controllers
services
What am I doing wrong?
<!DOCTYPE html>
<html ng-app='mainApp'>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/info', {
controller: 'mainInfoController',
templateUrl: 'app/partials/info.html'
})
.when('/comment', {
controller: 'mainCommentController',
templateUrl: 'app/partials/comment.html'
})
.when('/feedback', {
controller: 'mainFeedbackController',
templateUrl: 'app/partials/feedback.html'
})
.otherwise({
redirectTo: '/info'
});
function mainInfoController($scope) {}
function mainCommentController($scope) {}
function mainFeedbackController($scope) {}
});
</script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div>Info</div>
</a>
<a href='#/comment'>
<div>Comment</div>
</a>
<a href='#/feedback'>
<div>Feedback</div>
</a>
</div>
<div ng-view></div>
</body>
</html>

Categories