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
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 have just started working with AngularJs and i am stuck at this place:
i have index.html and inside that am including script tags like angular oclazyload and my application.js file
<html ng-app="mymodule">
<head>
<script src="angular.min.js"></script>
<script src="ocLazyLoad.min.js"></script>
<script src="angular-css-injector.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<div ng-controller="mycontroller">
<h1>Sample Page</h1>
<div ng-include="login"></div>
</div>
</body>
inside my application.js i am using oclazyload cssInjector and nginclude to load another js,css and html file(login.js,style.css and login.html).
My application.js file
var mymodule=angular.module("mymodule",["oc.lazyLoad","angular.css.injector"]);
mymodule.controller("mycontroller",function($scope,$ocLazyLoad,cssInjector){
$ocLazyLoad.load("/task1/login.js");
cssInjector.add("style.css");
$scope.login="login.html";
});
In my login.js file i am defining one controller as logincontroller
login.js file:
var mymodule=angular.module("mymodule",[]);
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
and in my login.html i am calling that controller i.e(logincontroller)
<div ng-controller="logincontroller">
{{title}}
</div>
all the files are loading but i am getting error that controller with this name is not registered.
You could have timing problem. Can be login.html loading before login.js ? Try to change $scope.login in $ocLazyLoad.load("/task1/login.js")promises. Like
$ocLazyLoad.load("/task1/login.js").then(function(){ $scope.login = 'login.html '});
And you must change this
var mymodule=angular.module("mymodule",[]);
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
to this
var mymodule=angular.module("mymodule");
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
I have an app with angularjs + gae (Java). In my index.html, I have an UI-view. When I show source code from index.html, it's ok:
<html>
<head> //some contents </head>
<body>
<div ui-view></div>
</body>
</html>
But when I go to other page, It shows the same code.
How to show other page code?
ex: http://mysite.appspot.com/about
<html>
<head> //some contents </head>
<body>
<div> //about html code </div>
</body>
</html>
Specify the view to load from your routes.js.
ex.
angular.module('website', []).
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'about/index.html', controller: 'AboutCtrl'});
});
I am attempting to include multiple partial templates to be included in an ng-view, but the routeProvider directives are always trying to fetch the file from the server (not the embedded ng-template).
I have the following defined in my HTML:
<script type="text/ng-template" id="groupList.html">
<!-- contents -->
</script>
<script type="text/ng-template" id="participantList.html">
<!-- contents -->
</script>
<script src="js/app.js"></script> <!-- AngularJS app file -->
In my app.js file I have the following:
var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);
// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
myApp.config(function ($routeProvider)
{
$routeProvider.when('/', {
templateUrl: '../static/views/home.html'
});
$routeProvider.when('/group', {
controller: 'GroupCheckInCtrl',
templateUrl: 'groupList.html'
});
$routeProvider.when('/group/:groupId', {
controller: 'GroupCheckInCtrl',
templateUrl: 'participantList.html'
});
$routeProvider.otherwise({
redirectTo: '/'
});
});
When ever I load the page, I get an error in my browser console:
GET http://127.0.0.1:8000/visitorLog/group/groupList.html 404 (NOT FOUND)
The AngularJS app section of my page looks like this:
<div ng-app="myApp" ng-controller="GroupCheckInCtrl">
<!-- other content -->
<ng-view>Loading...</ng-view>
</div>
What am I missing that is not allowing AngularJS to load my ng-template script directive?
make sure that the inline script tags are children of the element that has the ng-app="myApp" attribute. If the script tags are outside this element, it will not work. The easiest way to fix this is to add the "ng-app='myApp'" to the tag. Here is an example of what I mean:
<body ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="groupList.html">
Group list html
</script>
<script type="text/ng-template" id="participantList.html">
Participants list html
</script>
<ul>
<li>group</li>
<li>participant</li>
</ul>
<div ng-view>
Loading...
</div>
</body>
Here is the relevant plunker: http://plnkr.co/edit/K1gMiLenRk0oPkzlGNjv