I'm new to angularjs and working on project where is need to use ngView with jade for rendering views. I have also searched through the previous questions asked about ngView here but couldn't find anything helpful. The issue I'm facing is whenever I use ngView as an attribute of div in jade it compiles the jade template and shows the compiled HTML like:-
<div ng-controller='ArticleListCtrl'>
<!-- ngView: -->
</div>
The jade template is:-
div(ng-controller='ArticleListCtrl')
div(ng-view)
The route using config function in my app.js is:-
var nodeApp = angular.module("nodeApp",["ngRoute"]);
nodeApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
$routeProvider
.when('/',{
templateUrl: 'articles/art.html',
controller: 'ArticleListCtrl'
})
$locationProvider.html5Mode(true);
}]);
So, can anybody help me or point me in right direction if I'm doing something wrong?
This is the complete jade template:-
doctype html
html(ng-app='nodeApp' lang='en')
include ../includes/head
body
div(ng-controller='ArticleListCtrl')
div(ng-view)
And this is compiled html generated from the jade template above:-
<!DOCTYPE html>
<html class="ng-scope" lang="en" ng-app="nodeApp">
<head prefix="og: http://ogp.me/ns# nodejsexpressdemo: http://ogp.me/ns/apps/nodejsexpressdemo#"></head>
<body>
<div class="ng-scope" ng-controller="ArticleListCtrl">
<!-- ngView: -->
</div>
</body>
</html>
Related
I have a problem with my single Page Application. When I start my Project with the keyuser.html as first site(home page) the Table from the connected Database is shown with the Data. When I use the normal home.html as entry Point for my Program, I can click the Hyperlink to my keyuser.html file, the controller does the necessary routing and I am on my keyuser.html site. But here is just the update Button, but not my Table with my Data.
+++++++++ keyuser.html ++++++
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="update()">Update</button>
<div id="flexGrid"></div>
</body>
</html>
<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
// Get Data
wijmo.httpRequest("/api/Colors", {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response);
}
});
</script>
++++++++++++ control.js ++++++++++++++
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/keyuser", {
templateUrl: "keyuser.html"
});
++++++++++++ home.html ++++++++++++++
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
</head>
<body>
<div ng-app="myApp">
Stammdaten
<div ng-view></div>
</div>
There are multiple things wrong here.
First of when loading HTML templates with routing the entire template gets loaded into the ng-view element. Which means that in your case the doctype tag, html tag, body tag and all the other tags are loading twice which might break your page.
Secondly when using AngularJS do not write your javascript in script tags, instead start using controllers, directives, componentens and services.
And last, make sure to include the correct AngularJS scripts like angular.js and angular-route.js
In general i highly recommend just going through the basics of AngularJS before proceeding because i feel like you are missing those.
I'm having problems with the translation service provided by Django inside AngularJS partials. It seems Django is translating the content inside a partial only the first time my website is loaded. As of now I'm providing index.html with Django and then loading each view with ng-view directive. I got django and angular routing working nicely.
Inside my Django templates folder I have
this structure. Each of these files is just a regular html template with some content being translated by Django.
My django urls.py:
urlpatterns += i18n_patterns(
url(r'^$', views.homepage, name='index'),
url(r'^views/page-home.html/$', views.homeView),
url(r'^views/(?P<page>[-\w]+.html)/$', views.angularViews),
url(r'^(?P<path>.*)/$', views.angularRedirector),
)
And inside my angular app.js:
$routeProvider
// Load home by default
.when('/', {
templateUrl: 'views/page-home.html',
controller: 'homeController'
})
// home page
.when('/home', {
templateUrl: 'views/page-home.html',
controller: 'homeController'
})
// contact page
.when('/contact', {
templateUrl: 'views/page-contact.html',
controller: 'contactController'
})
// otherwise
.otherwise({
redirectTo: '/'
});
My index.html structure looks like this:
<!-- index.html -->
{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<!-- Head stuff [...] -->
</head>
<body ng-app="app" ng-controller="controller">
<!-- some content -->
<h1>{% trans "Hello world" %}</h1>
<!-- Views are injected here -->
<div class="page {$ pageClass $}" ng-view></div>
</body>
</html>
And one of the templates, for example page-home.html looks like this:
<!-- page-home.html -->
{% load static %}
{% load i18n %}
<!-- more content -->
<h2>{% trans "Goodbye World" %}</h2>
I'm currently working with 3 languages (English, Spanish and Deutsche). If I load localhost:8000, Django will automatically redirect to localhost:8000/es/#/, since Spanish is my default browser language. All content will render nicely, so DOM looks like this:
<!-- [...] -->
<body ng-app="app" ng-controller="controller">
<!-- some content -->
<h1>Hola mundo</h1>
<!-- Views are injected here -->
<div class="page page-home" ng-view>
<!-- more content -->
<h2>Adiós mundo</h2>
</div>
</body>
<!-- [...] -->
Here is where things get tricky. If i go to localhost:8000/de/#/ or localhost:8000/en/#/, just the content directly inside index.html will be translated to the current language, while the content inside ng-view will remain the same. So if I change to Deutsche my DOM will render like this:
<!-- [...] -->
<body ng-app="app" ng-controller="controller">
<!-- some content -->
<h1>Hallo welt</h1>
<!-- Views are injected here -->
<div class="page page-home" ng-view>
<!-- more content -->
<h2>Adiós mundo</h2>
</div>
</body>
<!-- [...] -->
Guess what, if I change the browser language to Deutsche, then all the content will render to Deutsche but if I visit localhost:8000/en/#/ or localhost:8000/es/#/, only the content outside ng-view will change. I don't understand what is happening here. How do I get the language to change inside the ng-view according to the url language, not the browser language?
Ok, I got it working. It turns out Angular will set the Accept-Language header only once, so the content inside ng-view would only translate once considering the browser's language.
So in my app.js configuration I had to store the language from the url and set the Accept-Language header on every request:
app.config(["$httpProvider", function($httpProvider) {
var language = window.location.pathname.split('/')[1];
$httpProvider.defaults.headers.common["Accept-Language"] = language;
}]);
That solved my problem.
On my website i'm displaying the same header on each page and I wanted to know if there's an AngularJS / jQuery or simple JS solution to load only the content of the body and not the header on page change.
<html ng-app="headerApp" ng-controller="HeaderCtrl">
<head>
<!-- here I load my JS and css ... -->
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-include="'templates/IndexBody.tpl.html'"></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
So my HTML looks like this I have separate template for each parts. But for now I create a html file for each pages. So I think there's a way to change the ng-include in the body.
Thanks for your help !
This is kind of the idea behind single page applications. Angular provides a built-in router that does this for you, and there is also the popular ui-router plugin.
You would change your view to:
<html ng-app="headerApp">
<head ng-controller="HeaderCtrl">
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-view></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
and configure the router in app.js:
angular.module('headerApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/IndexBody.tpl.html',
controller: 'IndexBodyCtrl'
});
});
Note that you will need to include angular-route.js in your index.html. More reading here: https://docs.angularjs.org/api/ngRoute
If it's an Angular app would you not use ng-view? Everything outside the view is the template and static as such. If you aren't building a spa then Angular probably isn't the best approach.
If it's Jquery then you could just do:
$("article").load('templatefiletoload.html');
beware that loading in your content like this is poor from an SEO point of view. Use server side includes if possible
I am having a problem loading a html file into a ng-view directive and when the page is trying to load it into ng-view the page crash. Here is the code of the of the page to get the html fragment:
<html>
<head>
<title></title>
{{HTML::style('css/bootstrap-theme.css')}}
{{HTML::style('css/bootstrap.css')}}
{{HTML::script('js/angular.min.js')}}
{{HTML::script('js/angular.route.js')}}
{{HTML::script('js/courtFinderApp.js')}}
</head>
<body ng-app="courtfinderApp">
<div ng-view>
</div>
</body>
Also here is the angularjs code:
var app = angular.module('courtfinderApp',['ngRoute']);
app.config(function($interpolateProvider){
//change the default expression template for angularJS
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.config(function($routeProvider) {
$routeProvider.when('/login',{
templateUrl: 'partials/login.php',
});
});
what I am doing wrong and thanks in advance
I try to implement a single page app with angularjs
There is the route code:
angular.module('todomvc', ['ngRoute'])
.config(function ($routeProvider) {
'use strict';
$routeProvider.when('/account', {
controller: 'TodoCtrl',
templateUrl: 'account.html'
}).when('/', {
controller: 'TodoCtrl',
templateUrl: 'todomvc-index.html'
}).otherwise({
redirectTo: '/'
});
});
The html of the single page is:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<link rel="stylesheet" ... >
<script ...></script>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="account.html">
a html template segment(*) here
///////////// this is the template of the first appearance. //////////////
</script>
<script type="text/ng-template" id="todomvc-index.html">
the same html template segment(*) here
///////////// this is the template of the second appearance. //////////////
But both appearance share a common template segment. How to remove the duplication?
</script>
</body>
</html>
By default, the second page is show up. After a user click a button on the second page, it will trigger $location.path("account"); and route to jump to the first page. In my case, both templates share a div block, that is, a common part is load to both templates. Currently, the template segment is copy and paste to both areas as shown in above code. But the copy-paste is hard to maintain. How can I share the template segment between the two text/ng-template?
Thank you.
Define your common div in a seperate .html file and include it using the ngInclude directive.
<ng-include src="commonDiv.html"/>
I strongly recommend a module called ui-route which provide a simple and easy way to maintain nested views and templates.