I am playing around with adding in an Angular-UI router which is working perfectly when I click on links within my application. For example, if I go from / to /feed/9 it will load in the /partials/post.html file into the ui-view div and I can then use the '9' held in $stateParams to populate the template with the data from post 9. However if I refresh the page, the site breaks and Angular tries to load index.html as the ng-app.js file? I have no idea what is happening here. I've uploaded some screenshots to demonstrate this and I've included my node server, angular routing and the relevant html partials. I have no idea where this is going wrong so I can provide any additional data and any help would be greatly appreciated!
Working fine when coming from another link on '/'
On refresh!!
Node - server.js
var = /* Dependencies and vars */;
mongoose.connect(dbConfig.url, dbConfig.options);
app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());
require('./routes/api.js')(app); //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app); //For getting data from GCal, fb, Twitter and Instagram
/* The following code is a url rewrite to pass all
further get requests that aren't defined in the
above routing files through the index page and
hence through the Angular 'frontend' routes */
app.use(function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port);
Angular ng-app.js
var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);
//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
templateUrl : 'partials/home.html'
})
/* ... */
.state('feed', {
url : '/feed',
templateUrl : 'partials/feed.html'
})
.state('post', {
url : '/feed/{id:.*}',
templateUrl : 'partials/post.html',
controller: 'postController'
})
$locationProvider.html5Mode(true);
});
app.factory("Feed", function($resource) {
return $resource("/api/feed/:id", {}, {
query: {
isArray: true
}
});
});
app.controller("postController", function($scope, Feed, $stateParams) {
var feed = Feed.query();
feed.$promise.then(function(promiseData) {
postArray = promiseData.slice(0,promiseData.length);
$scope.feed = promiseData;
$scope.id = $stateParams.id;
});
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- CDN -->
<!-- Angular, Bootstrap, Angular modules, etc. -->
<!-- Styles -->
<!-- Angular Script import -->
<script type="text/javascript" src="ng-app.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav><!--Bootstrap nav--></nav>
<div ui-view></div>
<footer></footer>
<script>
//For Bootstrap tooltips which are in some of the partials.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[rel=tooltip]').tooltip();
});
</script>
</body>
</html>
/partials/post.html
<div class="container-fluid main-content">
<header class="banner" class="row">
<h1 class="page-title">{{id}}</h1>
</header>
<!-- Main page info -->
</div>
I think you have relative paths pointing to your css files.
When you load page from /feed/9 then links are invalid.
Maybe it happens also for templates referenced from angular.
Related
In my application i have declared ng-app in Master.html and added all script, stylesheet references in it
this is my master page
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<script src="../Angular/angular.min.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Scripts/AngularServices/App.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<li><i class="fa fa-circle-o"></i>Group</li>
<li><i class="fa fa-circle-o"></i>Member</li>
<section class="content">
<div ng-view></div>
</section>
</body>
</html>
App.js
var mainApp = angular.module("mainApp", ['ngRoute'])
mainApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/main/Group', { templateUrl: '/Portal/Group.html', controller: 'GroupController' }),
$routeProvider.when('/main/Member', { templateUrl: '/Portal/Member.html', controller: 'MemberController' });
$locationProvider.html5Mode(true);
});
// group
mainApp.controller('GroupController', function ($scope, $http) {
$http.get('/api/APIGroup/GetGroupDetails').then(function (result) {
$scope.group = result.data;
});
});
Group.html
<div ng-controller="GroupController">
<div class="row">
<h1>Welcome to group</h1>
my content here
</div>
</div>
when i execute master page and if click group link group.html form opening inside master page my url like this
http://localhost:50810/main/chitGroup
but if reload page here am getting error as
Server Error in '/' Application.
The resource cannot be found.
Master page not applying to how to fix this
In your angular.app you have ngRoute to handle your states for create Single Page Application.
ngRoute need to pass the state names correctly as ng-href="#!/main/Group", that because when you use ngRoute the url changed automaticly to http://localhost:50810/#!/
Server Error in '/' Application.
The resource cannot be found.
This error because you redirect to http://localhost:50810 to find /main/Group which not exist.
I am trying to make a webpage.In that when a user login , a new html page("dashboard.html")opens in the view. This "dashboard.html" contains some links(links to other html pages).When user clicks on them a new html(say "page_3.html") page should open with data that is present in controller.this "page_3.html" is not fetching data from controller.Below is my code.
<!-- controller.js -->
var app = angular.module('myApp',[ 'ngRoute' ]);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'login.html'
})
.when('/dashboard',{
templateUrl: 'dashboard.html'
})
.when('/page_3',{
templateUrl: 'page_3.html'
})
.otherwise({
redirectTo : '/'
});
});
app.controller('app', function($scope, $location){
$scope.item = "test";
$scope.submit = function(){
$location.path('/dashboard');
}
};
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app= "myApp" ng-controller="app">
<div ng-view></div>
</body>
</html>
<!-- below is login.html page -->
<div ng-controller="app">
<form action="/">
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
<!-- below is my dashboard.html page -->
<div ng-controller="app">
<h1>Page_3</h1>
<div><a href='page_3.html'>page_3</a></div>
</div>
<!-- below is page_3.html page -->
<div ng-controller="app">
<p>{{item}}</p>
</div>
result : {{item}}
May I suggest avoiding the ng-controller directive and rather use the controller config object on your router?
.when('/page_3',{
templateUrl: 'page_3.html',
controller: "app"
})
There are two main problems with your code:
Enable HTML 5 mode for pushState via $locationProvider for URLs like /dashboard and /page_3
Fix the problem where route is configured for /page_3 but having a a tag pointed to /page_3.html
To get a working example:
Add a base tag
<base href="/">
Enable html5 mode via locationProvider in a config block
$locationProvider.html5Mode(true);
Fix route in dashboard.html
<!-- below is dashboard.html page -->
<div ng-controller="app">
<h1>Page_3</h1>
<div><a href='page_3.html'>page_3</a></div>
</div>
Click here for the demo / jsbin.
Other/suggestions: as Zack Briggs have suggested; using controller syntax in routes would help you come up with better code structure / design in router config, directives, or components. Also putting everything in one place is often a bad idea for a growing project.
First of all, I'm quite a noob so please excuse me if I ask stupid questions, or if the same question has already been answered elsewhere: I might not know the rights terms to effectively search for a topic.
So here's my problem. I'm trying to create a dashboard using Polymer. Therefore, I'll have a nav bar / menu with many option (contracts, calendars, admin page...). While looking at the polymer starter kit and its demo, we are told to put all the pages related to the navigation drawer within the index.html file, between <section> markups.
However, these pages may contain a lot of code, and there will be many pages (12 at the moment). I fear the index.html will soon become humongous, which will probably mean "hard to maintain" and "long loading time".
So my question is the following: is there a way to easily split the page app into multiple html files? Like creating a new custom element and importing it in the header, then using it between the <section> markups?
Okay so, following the advices I've been given here, I've read about HTMLimport, and the tutorial about "Lazy loading" on Chrome developpers' youtube and here's what I did (it is based on polymer starter kit). Problem: it does not work :(
Clicking on "Contracts" in the navbar does nothing. I don't get it :/
Help me please!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My awesome page</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html">
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="contracts" href="{{baseUrl}}contracts">
<iron-icon icon="description"></iron-icon>
<span>Contracts</span>
</a>
</paper-menu>
<div class="content">
<iron-pages id="iron" attr-for-selected="data-route" selected="{{route}}">
<section data-route="contracts" tabindex="-1">
<page-contracts id="contracts"></page-contracts>
</section>
<!-- lots of other <section> here -->
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
and here's the routing element:
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
/* other routing here */
page('/contrats', function() {
if (Polymer.isInstance(this.$.contrats)) {
app.route = "contrats";
return;
}
Polymer.base.importHref(
"/page-contrats/page-contrats.html", function() {
app.route = "contrats";
return;
}
)
});
/* other routing here */
// 404
page('*', function() {
app.$.toast.text = 'Impossible to find: ' + window.location.href + '. Redirecting to dashboard';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>
Your routing page needds to look like this:
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
/* other routing here */
page('/contrats', function() {
app.route = 'contrats';
setFocus(app.route);
});
/* other routing here */
// 404
page('*', function() {
app.$.toast.text = 'Impossible to find: ' + window.location.href + '. Redirecting to dashboard';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>
In your elements.html you need to import the page:
<link rel="import" href="/page-contrats/page-contrats.html">
And your enement needs to look like this:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../elements.html">
<dom-module id="contrats">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
</style>
<your-code-here>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'contrats',
});
})();
</script>
</dom-module>
Hope I helped.
Im using AngularJS 1.4.1, ngRoute 1.4.1 and https://angular-ui.github.io/bootstrap/
The base structure is
<html ng-app="myApp">
<base href="/">
<body>
<div ng-view></div>
</body>
</html>
and I use ngRoute to load each page of my website such as about, contact us, etc... into the div with ng view.
When the page is loaded into ng view using
var myApp = angular.module('myApp', ['ngRoute', 'ngProgress', 'ui.bootstrap']);
myApp.config(function($routeProvider,$locationProvider){$routeProvider
.when('/about',{templateUrl:'about.php',controller:'mainController'})
.otherwise({redirectTo:'/'});
staffPanelApp.controller('mainController', function($scope, $route, $routeParams, $location, $templateCache, ngProgress) {
$templateCache.removeAll();
ngProgress.start();
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
ngProgress.complete();
});
the ui bootstrap feature such as alert should work but it doesn't appear to work in the ngview, it only seems to work when i add it to the main base page. Is there a way to get it to work in the ngView loaded page?
Example Bootstrap UI Feature:
<alert type="success">This should work</alert>
Update:
Plunker but couldn't get ngroute to work but the basis is there:
http://plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview
Could it be because you create controller on 'staffPanelApp' but your ngApp is called myApp?
I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive.
Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears.
Am I doing something wrong?
Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior.
HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ViewCtrl">
<div ng-repeat="page in form.form_pages">
<div ng-repeat="field in page.page_fields" class="form-group">
<field-directive field="field" ng-form="subForm"></field-directive>
</div>
</div>
</body>
js code:
'use strict';
angular.module('myApp',[])
.controller('ViewCtrl', ['$scope', function($scope) {
var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';
$scope.form = JSON.parse(jsonStr);
}])
.directive('fieldDirective',function($http, $compile) {
var linker = function(scope, element) {
// GET template content from path
var templateUrl = "textfield.html";
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
template: '<div>{{field}}</div>',
restrict: 'E',
scope: {
field: '='
},
link: linker
};
})
textfield.html - the html template:
<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
<div class="col-sm-5">{{field.field_title}}:</div>
<div class="col-sm-7">
<input type="text"
placeholder="{{field.field_title}}"
ng-model="field.field_value"
value="{{field.field_value}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
class="form-control"
id = "{{field.field_id}}"
name = "{{field.field_id}}" >
<div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
<span ng-show="subForm[field.field_id].$error.required"> is required.</span>
</div>
</div>
</div>
Thank you.
http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview
Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly
element.append($compile(data)(scope));
Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on.
Edit
Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.