I'm trying to test some example Angularjs app in Salesforce. When I test it running
grunt serve
on my browser, it works fine. So I put the code in a Visualforce page and it doesn't show all the content correctly. Seems like it is a problem with the #/ and the $routeProvider part.
The code (the initial code of the angular generator from Yeoman) in my Visualforce page:
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="griApp">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">gri</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
In my real code I'm using correctly the URLFOR to include the files of an static resource.
My app.js is:
angular
.module('griApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
Hope you can help me.
Thanks!
I have integrated salesforce and angularjs. I have created Apex components corresponding to each page and have placed the html content in ngTemplate and load via $templateCache.
so my app visualforce page looks like as follows
<apex:component controller="APTS_ApttusLabAngularJS">
<script type="text/ng-template" id="name.html">
<!-- include your html and refer this name.html in your route
</script>
</apex:component>
I would advise you to use stateProvider instead.
Related
I'm learning AngularJS for a project but I got stuck in rendering a partial view. I've made the main page with three partial templates that need to be loaded in the main page. Also created a javascript files to define the module and create the controller. After all this still the partial templates are not loading in the main index page. Also there is no errors in the google chrome console. My Folder structure is as follows :
- scripts
-- angular.min.js
-- angular-route.min.js
-- app.js
templates
-- home.html
-- courses.html
-- students.html
index.html
My index.html is :
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>Courses</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
My app.js is :
var app = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
})
.controller("studentsController", function($scope, $http) {
$http.get("http://localhost:8000/api/students").then(function(response) {
$scope.students = response.data;
});
});
I've also tried the followings :
"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"
But nothing seems to be working.
I am trying to use the routing feature of angularJS, but so far it will not include my html templates (user.html and overview.html, which are in the same folder as index.html).
For information only: the expression {{test}} is working.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PARA Liste</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body>
<div ng-app="angularJsApplication" ng-controller="angularJsController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Para Liste</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>overview</li>
<li>user1</li>
<li>user2 - {{test}}</li>
</ul>
</div>
</div>
</nav>
<div class="ng-view"></div>
</div>
<script src="js/angularJsApplication.js"></script>
<script src="js/angularJsApplicationController.js"></script>
</body>
</html>
angularJsApplication.js:
var app = angular.module("angularJsApplication", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/#", {
templateURL : "overview.html"
})
.when("/overview", {
templateURL : "overview.html"
})
.when("/user1", {
templateURL : "user.html"
})
.when("/user2", {
templateURL : "user.html"
})
});
angularJsApplicationController.js:
app.controller("angularJsController", function($scope){
$scope.test = "testTestTEST";
});
user.html:
<h1>user</h1>
Its typo mistake :
not templateURL It''s templateUrl
So,it should be.
templateUrl: "overview.html"
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="xploresoftware.css">
</head>
<body ng-app="myapp">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images/Drawing.png">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:55px" >
<div ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="angularview.js"></script>
</body>
</html>
This is my angularview.js file
(function(){
var app=angular.module('myapp',['ngRoute']);
app.config([function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html'
})
.when('/ece',{
templateUrl:"ece.html"
})
.when('/cs',{
templateUrl:"cs.html"
})
.when('/mech',{
templateUrl:"mech.html"
})
.otherwise({
redirectTo:"/"
});
}]);
})();
The error caught:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
This error appears to caused by a missing dependency. I see that you need to include de ngRoute dependency in your app module.
Change your first line to:
var app=angular.module('myapp',['ngRoute']);
Try changing this line too
app.config(['$routeProvide', function($routeProvider){ ... }])
EDIT:
Take a look at this JSFiddle
https://jsfiddle.net/relferreira/dzx8w38t/2/
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as main">
{{main.test}}
</div>
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<div ng-view> </div>
</div>
JS:
angular.module('app', ['ngRoute']);
angular.module('app')
.config(config)
.controller('MainController', mainController);
config.$inject = ['$routeProvider'];
function config($routeProvider){
$routeProvider.when('/',{
template:'<h1>home</h1>'
})
.when('/ece',{
template:"<h1>ece</h1>"
})
.when('/cs',{
template:"<h1>cs</h1>"
})
.when('/mech',{
template:"<h1>mech</h1>"
})
.otherwise({
redirectTo:"/"
});
}
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.test = 'test'
}
UI router not working at all.
I have:
angular.module('bApp', ['ui.router']);
angular.module('bApp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('register', {
url: '/register',
templateUrl: '/views/register.html',
controller: 'RegisterCtrl'
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap-hero.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
</head>
<body ng-app="bApp">
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">b</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="main">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
<div ui-view></div>
<script src="scripts/app.js"></script>
<script src="scripts/app.config.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
</div>
</body>
</html>
There is no Errors at the console,
Even URL not changing when I'm clicking on register TAB.
I do not have any Idea why that is not working.
I tried to remove controllers from states and got the same behavior.
That solution also didn't worked
Please help.
Did you try to take away the begining slash on your url? i'm not quite sure about this, but when I code in AngularJS instead using
/views/main.html
I use:
views/main.html
Try $state.go('register'); in controller or app.run block. maybe it raise some error.
watch in DevTools for requests, maybe some of them doesnt works (E.G. 404, 403)..
I am getting an error of ngRoute not found while I added angular-route.js i can't understand why this is happening
<!DOCTYPE html>
<html ng-app="Userapp">
<head>
<title>Alltotal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<scipt src="js/lib/angular-route.js"></scipt>
<script src="js/app.js"></script>
<script src="js/controller/register.js"></script>
<script src="js/controller/show.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--navigation-->
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Register</li>
<li role="presentation">Show users</li>
</ul>
</div>
</div>
<!--view-->
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
And my javascipt is I think it is totally correct but not working when run
var app = angular.module("Userapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {templateUrl : 'partials/form.html',
controller: 'formctrl'});
});
That's a typo! Must be script:
<scipt src="js/lib/angular-route.js"></scipt>