I current working Web Application with Angular JS.
I using a Angular route to implement a Single page Application.
This is my implemented code to route.
config(function($routeProvider){
$routeProvider
.when('/init',{templateUrl:'/member/join?m=init'})
.when('/begin',{templateUrl:'/member/join?m=begin'})
.when('/end',{templateUrl:'/member/join?m=end'})
.otherwise({redirectTo:'/'});
}).
I was stuck with a problem.
AngularJS Router is update after page loading.
<body>
<ng-view>
</ng-view>
</body>
But, I can't update direct way without Angular Router.
I wonder how to update without angular router.
Example.
ontroller('registerController', function($scope, $http, baseUrl) {
$scope.register = function() {
var reqPromise = $http.post(baseUrl+'member/join',$scope.user);
reqPromise.success(function(data, status, headers, config) {
/// <-- i want to update <ng-view> without router. Just, direct update <ng-view>!
});
help me.
Related
I have an angular app which has a ng-view which (like any good MVC should) manipulates how the model is shown. The data (model) comes from a database, and I call it into the app's component. From there I want to propagate (if that's the right word) the model into ng-view, which loads a template to display the data based on the route. I also want to be able to filter the data/model that goes into the view with a "top-bar"
I.e:
INDEX.HTML:
<html ng-app="app">
<head>...</head>
<body ng-controller="appController">
<top-bar></top-bar>
<div ng-view></div>
</body>
</html>
APP.JS:
angular.module('app', ['top-bar','view-one','view-two', 'ngRoute']);
angular.module('app').controller('appController', function() {
var self = this;
this.myData = [];
$http.get('theQuery').then(res => self.myData = res.data);
});
angular.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/view-one', {template:'<view-one></view-one>'})
.when('/view-two', {template:'<view-two></view-two>'});
});
angular.module('top-bar', ['ngRoute']);
angular.module('top-bar').component('top-bar', {
templateUrl: './app/top-bar/top-bar.template.html',
controller: function(filterFilter) {
this.filters = filterFilter(...);
}
});
angular.module('view-one', ['ngRoute']);
angular.module('view-one').component('view-one', {
templateUrl: './app/view-one/view-one.template.html',
controller: function(filterFilter) {
// appController.data and topBar.filters would somehow
// need to be gotten from those respective modules.
this.data = appController.data;
this.filter = topBar.filters;
}
});
What I am trying to figure out is how to get the data from the main app's controller (appController) and the top-bar component, and send it to whatever view is currently loaded into ng-view.
I've been searching the web, I cannot find if the better way to do this would be to use binding (i.e. binding: {data:'<'})in the view-one controller/component, a system of $scopes, a custom service or something else. I also can't find out I would accomplish using either one to get the data in there. Thus any answers that also include a) code samples and b) links to further documentation I could read up on would be would be much appreciated.
The recommended way for doing this is to create a service, and let the different controllers work with the reference to the objects provided by the service.
Possible duplicate of enter link description here
This question may have been asked before. But here goes:
My website is http://thecheeknee.com.
The site basic structure is as follows:
`index.html
js|-app.js
js|ctrls|pageLoad.js -common controller for all pages
js|srvc|Datamap.js
templates/-about.html, etc`
The HTML basic view is as shown below:
<section ui-view></section>
The UI router angular code is as follows:
angular
.module('app',[
'ui.router',
'ngStorage'
])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url:'/',
templateUrl:'templates/home.html',
controller:'pageLoad'
})
The controller is very basic.
angular
.module('app')
.controller('pageLoad',[ '$scope', 'Datamap', function($scope, Datamap){
$scope.title = "thecheeknee";
//$scope.$storage = $localStorage;
//$scope.$storage.counter = $scope.$storage.counter+1 || 0;
Datamap.getData().then(function(response){
$scope.datamap = response.data;
});
The Data map service is as follows:
angular.module('app')
.factory('Datamap', function($http) {
//debugger;
return{
getData: function(){
return $http.get('data/data.json',{ cache: true});
}
}
});
The site works perfectly on the desktop across multiple browsers. But Chrome App on Android seems to load a blank page.
(I had designed the site to be responsive and had tested the UI thoroughly using Chrome's browser tool)
On observing, I noticed that the browser adds a #!/ and loads the view into the page. On the mobile browser however, it seems to be stopping at the site name itself (#!/ is not being added). So I assume the UI router is unable to load the route into the page.
I am relatively new to Angular, so is there anything minor I am missing out here?
Full source code at: https://github.com/thecheeknee/sitebase.git
I don't understand why I can't get this to work.
I'll share the relevant code, let me know if you need to see more stuff.
Index.html
<div class="col-md-3">Liberals</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/liberals", {
templateUrl: "partials/liberals.html"
, controller: "LiberalsController"
});
});
app.controller('LiberalsController', function ($scope, $http) {
var url = "workingURL"; /// changed function to a simple string message to test
$scope.message = "Hello Liberals";
});
(partial view) liberals.html
<h1>Hello</h1>
{{message}}
PS: I'm not working on a political hate website for or against liberals!
As of AngularJS 1.6, the default value of the hashPrefix has been changed to !.
There's two ways to get your routing to work with AngularJS 1.6+:
Add the hashprefix (!) to your href's:
Liberals
Change (remove) the hashPrefix value using $locationProvider:
$locationProvider.hashPrefix('');
I've created a working plunkr in which I used the second approach:
https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview
The commit regarding this breaking change can be found here
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.
Express.js routing of /question/ask
app.get('/question/ask', function (req, res){
console.log('index.js');
console.log('came to question/:id');
res.render('app');
});
The corresponding angularjs routing is:-
when('/ask', {
templateUrl: 'partials/askQuestion',
controller: 'xController'
}).
whereas it should be:-
when('/question/ask', {
templateUrl: 'partials/askQuestion',
controller: 'xController'
}).
I'm working in $locationProvider.html5Mode(true); mode.
Is there anyway i can get the later angularjs routing working. I'm using angularjs 1.1.5 version.
Edit:-
app.get('/*', function (req, res){
console.log('index.js');
console.log('came to question/:id');
res.render('app');
});
has the same problem, the angular route only routes the last /ask for /question/ask.
The issue for me is that I can only do 1 of the following :-
www.example.com/question/:qId
www.example.com/discussion/:aId
because the application will catch only 1 when('/:id', { as it does not include the previous /question/ or /discussion/
Well, if you have the same routes on Express and Angular, if the user types the url directly in the browser you will hit the Express route, but if the user is navigating within the application, then he will hit the Angular route.
Is this what you want ?
What some do is to have a different set of routes on the server for the REST API, and a catch all route to serve the application no matter what the user type as a URL, bringing the user to the home page when a server route is hit. Within the application of course navigation is handled by Angular routes. The problem is that you get no deep linking.
Some other apps have the same routes on both the server and the client, this way they can serve some contents no matter what.
Some will write involved route rewriting to make sure that you both get the application bootstrapping code AND the required URL, thus allowing deep linking.
Cheers
using angular version 1.2.0-rc.3 cures the problem.
change:
var myApp = angular.module('myApp', []);
to
var myApp = angular.module('myApp', ['ngRoute']);
And include:-
script(type='text/javascript', src='js/angular-route.js')