I have deploy AngualrJs and Visualforce application in SFDC, Its working fine in IE10 , IE11 , Chrome , Mozilla but its not loaded in IE9. I have tried this
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="CartController">
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" lang="en-US" data-ng-app="diageoApp" id="ng-app" data-ng-controller="masterCtrl">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-US" xmlns:ng="http://angularjs.org" ng-app="diageoApp" id="ng-app" ng-controller="masterCtrl" >
<!--<![endif]-->
Have you looked at: https://docs.angularjs.org/guide/ie
It has info about IE8 issues that might be useful to you.
I'm guessing that those Angular properties in your html tag aren't making it into the Visualforce page. One easy workaround is to setup Angular on something in the body, like:
<div ng-app="ngApp">
For a working example check out: https://developer.salesforce.com/blogs/developer-relations/2014/07/building-salesforce1-apps-visualforce-angularjs-bootstrap.html
Related
I started developing a hybrid application. So I have done th folllowing steps:
add Angular 8 dependencies
add polyfills.ts
remove ng-app attribute from my root index.html
do a manual bootstrap of AngularJs app
How looks my Angular init module:
#NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class HubAngularModule {
ngDoBootstrap() {
}
}
platformBrowserDynamic().bootstrapModule(HubAngularModule)
.then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myAngularJsModule']);
});
How looks my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
</body>
</html>
main-header, console-menu - are AngularJS components. Of course that configuration works well when ng-app is presented.
What I expect. Hybrid app starts just like old AngularJS app and I'm able to see login page, start page etc.
What I actually got. AngularJS app is actually bootstrapping. I can see method app.module().run(...) executes. But no component loads so I see only a blank page.
After a several hours of experiments I have found a soultion.
I decided to check whether the manual bootstrap of the AngularJS will work:
angular.element(document)
.ready(() => {
angular.bootstrap(document.body, ['myAngularJsModule']);
});
And it had failed. Even if no Angular 8 present. So the reason it fails to start is a location of <script> tags with my webpack bundles. It located in <head> but should be located in <body> after all the app markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</body>
</html>
It is so dumb, but exactly that dumb thing like this make the biggest headache sometimes. And what disappointed me me the most not a single migration tutorial tells nothing about that detail!
Have you upgraded your angularJS components to make them work in Angular ?
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
I'm currently trying to get the preview functionality from the Eclipse Web Page Editor with AngularJS up and running. Unfortunately nothing happens (see attached image) when I try to run the provided code.
It seems to run here.
The code runs in every web browser - so the question is why is it not working in the "Preview Tab" of the Eclipse Web Page Editor? Any ideas?
My Setup:
Eclipse Mars.1 Release (4.5.1) for Web Developers
AngularJS Eclipse 1.1
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
enter image description here
I have written my first Angular JS but it is not loading in the browser. When I run the file, I get a blank screen. However when I do away with the script tag, the page renders.
<!doctype html>
<html lang="en" ng-app>
enter code here<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js></script>
</head>
<body>
<input type="text" ng-model="name">
<h2>Welcome {{name}}</h2>
</body>
</html>
You need to run it on a server to render angular content in browser. Otherwise, as you have faced, a blank page is displayed. Try using node.js for the same.
How does any body know how to divide a single html page in different view with angular.js.
I have this working :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view></div>
</body>
</html>
But i would like to do something like this :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view Sidebar></div>
<div ng-view></div>
<div ng-view Footer></div>
</body>
</html>
In advance thanks.
I think what you're looking for is "ng-include" : http://docs.angularjs.org/api/ng.directive:ngInclude
The Angular UI router should be a newer better way to handle this problem. At least that's its goal, and it looks very promising, but I haven't used it yet myself.
Angular UI is restructuring their site right now, so the links are a little scattered:
https://github.com/angular-ui/ui-router/wiki
http://angular-ui.github.io/ui-router/sample/#/