I am trying to navigate to a new jsp page on click of a link . I am using routing for this .
home.jsp
I am having below div outside the ng-view directive .If I am putting this inside ng-view ,Page is not working properly .I dont know if it should be inside or outside .
<div>
<h4> <a href ="#/Mix.web" data-ng-click="getMixData()" target="_self">Overall Mix
</a></h4>
</div>
Mix.jsp
I have not put it inside ng-view .Again If I am enclosing it inside ng-view ,the page is not loading .
Controller js
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider
.when('/home.web', {
templateUrl : 'Views/Home.jsp',
controller : 'MyController'
})
.when('/Mix.web', {
templateUrl : 'Views/Mix.jsp',
controller : 'MyController'
});
});
Few things I have debugged .
Onclick of the link , controller function is getting called and subsequent java spring controller is sending data successfully as well .
I am not able to figure out if this is the correct way to implement routing . What am I doing wrong here .
Related
This question might sound very generic to some of you but as a newbie i am having trouble in this. Its evident to use ng-view within the home page in order to display other html files within the page but how should i redirect to a new page present in the web app. I mean how to route to completely different web page in a multipage web application.
Import AngularJs-Route File
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
Use the $routeProvider to configure different routes in your application:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
STructure Your HTML
<body ng-app="myApp">
<p>Home</p>
Red
Green
Blue
<div ng-view></div>
</body>
For nested views you can use https://github.com/angular-ui/ui-router
Follow https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views for reference
Try searching angular ui-roter how its works and its mechanism . Since angular is a single page application your app needs to be on one base template then expand from their. From base template route in different page but if you want to route to different application use normal hyper link or ui-serf . Go though u-router basic. Also look into ui-serf .
I am working on Symfony3 and Angular 1.5.8 integration, the api part is all ready and now I am trying to display the result in partials using angular js which I am not having any success with.
This is my factory which is responsible for fetching data from symfony
jobs.fac.js
(function () {
"use strict";
angular
.module("ngListings")
.factory("jobFactory", function ($http) {
console.log('inside the factory');
function getJobs() {
return $http.get(Routing.generate("get_jobs"));
}
return {
getJobs: getJobs
}
})
})();
This is my controller jobs.ctrl.js
(function () {
"use strict";
angular
.module("ngListings")
.controller("jobsCtrl", function ($scope, $state, $http, jobFactory) {
var vm = this;
$scope.$on
vm.jobs;
jobFactory.getJobs().then(function (jobs) {
vm.jobs = jobs.data;
});
});
})();
this is my main.js where i am setting up the states and the controllers that are linked with the states
angular
.module("ngListings", ["ui.router"])
.config(function ( $stateProvider) {
$stateProvider
.state('jobs',{
url: '/listings/jobs',
templateURL: '/partials/home.html',
controller: 'jobsCtrl as vm'
})
;
});
Now this is my index where i am adding ui-view
{% extends 'base.html.twig' %}
{% block body %}
<ui-view></ui-view>
{% endblock %}
Now as I mentioned I am using Symfony so I have tried adding the partials inside the web directory and also inside the AppBundle/Resources/views/jobs/template-name in both cases the partial does not appear and there is no error in console either.
In console I can see the call being made to the URL and data being returned but its not being displayed in browser.
I will really appreciate if someone can tell me what am i missing here?
Note: Symfony and Angular are not setup separated, angular js files are kept in AppBundle and then being dumped in web directory, this is just for symfony users ofcourse any non symfony user who can see what i am doing wrong is also welcome to comment
To serve a template through Symfony you need a route/controller to access it via url ("partials/home.html" in your example). Elegant solution is to have one controller which is taking name of the partial as variable, and render that twig file as response. Take a look at this slide http://www.slideshare.net/mladenplavsic/symfony-angularjs-dafed26/19 as example of Template contoller.
With this you could change your templateUrl to something like "/template/home.html" where "home" is "$name" value for Symfony controller.
Well, this is giving this angular newbie some gray hairs:
My regular isotope external javascript initialization begins like normal :
$(document).ready(function() {
// ISOTOPE INITIALISATON AND STUFF HERE
And that all works fine with no angular. Now since my isotope items is in a separate portfolio.html page which loads into my main index.html page which contains an ng-view div, isotope sometimes fails to initialize.
It's around fifty fifty: If I refresh isotope works, then it doesn't. So this is due to that angular is not ready renderinng the DOM. And so even though I am waiting for document ready (and tried document load), that does not work either.
Is there a simple way that I can create my isotope AFTER that my index.html page loaded my portfolio.html page in (where my portfolio contains my isotope divs), with Angular?
Please note I am not using angular-isotope but just the regular metafizzy isotope and angular.
A simple as possible solution would be great:
Somehow I must create my isotope after that the Angular is done. But how do I call a method in my main.js file(which is the file where I initialize my Isotope) from my Script.js file (which is the file with my Angular script)
If it is any help this is my angular script:
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Hmmm.hmmmm. I think it is time for a cup of tea. Hmm. hmm
Look forward to your replies!
I solved it myself.
I simply added this line to my isotope javascript file
$(window).load(function() { window.setTimeout(onRenderReadyStartIsotope, 0) });
And the intialised isotope with that timedout function call. Was no need for me this time to look into directives or change the angular, the DOM now renders, the isotope begins.
In my ionic blank app, i have two html file index.html and category.html.
i write the controller for index.html in app.js like
.controller('AppCtrl',function($scope){
$scope.menu = function() {
console.log('yesytest');
window.location = "category.html";
};
})
this is working fine and after reaching the category page i create another controller in app.js
controller('categoryCtrl',function($scope){
console.log('ffffffffff');
$scope.beauty = function() {
console.log('yesytest');
window.location = "categorydetails.html";
};
});
i add a ng-click function on a button inside category.html but when i click on that button it is not calling the controller?
You can define your controller either on :
- defining it on your ui router state
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'app/views/loading/index.html'
})
Or by defining it into tour template category.html
<div ng-controller="categoryCtrl"> .... </div>
This is standard AngularJS feature, nothing special with ionic
If you use this :
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
You can use ui-sref="stateId" to do redirection
Example:
<a ui-sref="category"></a>
..Hi Kindly route your controller just define them..This might help.. --> http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/ ^_^
//app.js
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
//index.html
<a ng-href="#/category"></a>
I have a view in which I am listing out existing contacts.
route : /contacts
controller : contacts.list
view : /templates/list.html
I have another view in which I want to add a new contact
route : /contacts/add
controller : contacts.add
view : /templates/add.html
Using route, I am able to show either of these when needed.
But the challenge I am facing is to show the add form page in a popup when clicked on Add button instead of replacing list view.
Basically I want to link "Add" with the /contacts/add URL which will load the view in a popup and bind the controller to it, instead of replacing the entire view.
Please help me in how to think in Angular to achieve this.
Following is what I have currently.
var myModule =
angular
.module('myModule', [])
.config(['$routeProvider', function config($routeProvider){
$routeProvider
.when('/contacts', {
controller : 'contacts.list',
templateUrl : 'templates/contacts/list.html'
})
.when('/cotnacts/add', {
controller : 'contacts.add',
templateUrl : 'templates/contacts/add.html'
});
}]);
You might want to map angular routes to custom events and not really using <ng-view>
See this: www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm