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.
Related
I've just started learning AngularJS and built a small yet simple application, which consists of multiple controllers as shown here:
I have a SiteMaster.html page, inside this page I use ng-view as shown here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/app.js"></script> <!-- Consists of Routing -->
<script src="Templates/Params/paramsController.js"></script>
<title>Angular Routing Tutorial</title>
</head>
<body ng-app="mainApp">
<h1>sitemaster Template</h1>
<div ng-view></div>
</body>
</html>
As you can see the last script tag is the controller for the params page, Ideally I don't want this script tag reference on the SiteMaster instead I would like to place it inside the params.HTML page that way it's only loaded when it's required, now I've moved this script tag from the SiteMaster.Html to the params.Html page as shown here:
<script src="paramsController.js"></script>
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
Yet when I run the project I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=paramsCtrl&p1=not%20a%20function%2C%20got%20undefined
So my question is, how do I get this paramsController.js reference to work within the params.html page? instead of having it on the SiteMaster.html page?
Please note, when the paramsController.js is placed inside the SiteMaster.Html page it works as expected.
Any help would be appreciated.
Update
After adding ocLazyLoad I have done the following:
Added the script reference to sitemaster.html
Inside my app.js I have done the following:
var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);
Inside my paramsController.js I have the following:
angular.module("mainApp").controller('paramsCtrl', function ($scope, $routeParams, $ocLazyLoad) {
console.log($routeParams);
var param1 = $routeParams.page_number;
alert(param1);
});
And now I've hit a road block I'm unsure where or how I go about loading this controller via ocLazyLoad ? I following this documentation : https://oclazyload.readme.io/docs
First of all, your path is wrong. Change
<script src="paramsController.js"></script>
to
<script src="Templates/Params/paramsController.js"></script>
Also, include the following in your <head> section:
<base href="/">
And the second thing, I'm not sure, even that will not work as Angular has already been initialized. So you need to use a library like ocLazyLoaded to dynamically load resources.
Also, consider reading this post https://stackoverflow.com/a/17675432/2405040
Update:
In your params.html
<!-- Remove this line
<script src="paramsController.js"></script>
-->
<div ng-controller="paramsCtrl">
<h1>
Passed a parameter via url
</h1>
</div>
And now modify your $routeProvider configuration:
(From the docs https://oclazyload.readme.io/docs/with-your-router)
$routeProvider.
when('/foo', {
templateUrl: 'Templates/Params/params.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('Templates/Params/paramsController.js');
}]
}
})
I'm creating a sailsJS application and using AngularJS for the front-end.
This is my index.ejs file
<!DOCTYPE html ng-app="myApp">
<head>
<title>Title</title>
<!-- load socket.io, angularjs, filters, special fonts, jquery, bootstrap -->
<!-- Application JavaScript -->
<script src='/js/app.js'></script>
<script src='/js/controllers/indexCtrl.js'></script>
</head>
<body ng-controller="indexController">
<div ui-view></div>
</body>
</html>
and this is my app.js file
var myApp = angular.module('myApp', ['ui.router', 'angular.filter']);
console.log('this is executing');
and this is my indexCtrl.js file
angular.module('myApp').controller('indexController', ['$scope', '$http', function($scope, $http) {
console.log('check if its executing');
}]);
I'm not getting a console log from indexCtrl.js file but I am from the app.js file
This is my folder structure
- Api
- Assets
--> images
--> js
--> controllers
-->indexCtrl.js
--> dependencies
--> directives
--> services
--> app.js
--> styles
--> templates
--> views
- Config
- node_modules
- tasks
- views
-->index.ejs
Something about your opening html tag doesn't feel right. I've never seen the DOCTYPE tag and <html> tag fused together like that. Try something like this instead :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Title</title>
...
...
</html>
A few other things you can check :
In your browser's developper console, check to make sure the request for /js/app.js and /js/controllers/indexCtrl.js went through and didn't return any 404 (Network tab in Chrome and Firefox)
Make sure there are no Javascript errors in the console
Note : the fact that you were seeing the console.log from App.js only means the Javascript file was being downloaded and interpreted, but not necessarily that your Angular app was starting correctly (because the console.log is placed outside of any Angular function).
I have a page that uses angular ui-router to render two views on the same page.
I ultimately need to have this run under phonegap/cordova so will have to bootstrap angular to the elements on a deviceready event.
I managed to encapsulate the code into a function and when the function is called at the end of the page it works fine.
However when the same function is called on the window.onload or document ready event it fails to work. In fact if the function is called from the javascript console itself after page load it just fails to work.
Need help figuring out what is exactly going wrong.
Code below
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
</script>
</head>
<body>
<div ui-view="appview"> appview </div>
<div ui-view="msgview"> messageview s</div>
<script>
var routerApp;
var appViews = ['appview','msgview'];
function zero()
{
routerApp= angular.module('routerApp', ['ui.router']);
x=$("body").attr("ng-app","routerApp");
for(var i=0;i<appViews.length;i++)
{
angular.bootstrap($("#" + appViews[i]), ["routerApp"]);
}
routerApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/messaging');
$stateProvider
.state('messaging',
{
url: '/messaging',
views:
{
'':{templateUrl:'http://geo.tikoo.com/app/components/messaging/phone/messaging.html'},
'msgview':
{
templateUrl: 'http://geo.tikoo.com/app/components/messaging/phone/messaging.html',
controller: 'messC'
}
}
});
});
routerApp.controller('messC', function($scope) {
$scope.username = 'Tom';
});
}
zero();
//window.onload=zero;
//$(document).ready(function(){zero();});
</script>
</body>
</html>
Figured it out after a few attempts.
Here is what needed to be done.
1. The routers need to be set first.
2. The attribute for ng-app on the element needs to be set next.
3. a angular.element(element).ready event needs to be caught to bootstrap
Understanding.
If the routers are not setup first then the bootstrapping fails (obvious)
The ng-app dynamic addition also needs the router setup (Interestingly chrome can work in any order but mobile browser/opera needs that router be setup first before the attribute ng-app is assigned to an element).
SET ROUTERS ==> ADD ng-app Attribute to element ==> Bootstrap
Hope this helps
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'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07