Routing AngularJs / Laravel - angularjs

I got some problems using Laravel and Angular.
There my route.php
route.php
Route::group(array('domain' => 'dev.sydif.com'), function()
{
Route::get('/' , 'IndexController#index');
Route::get('/product' , 'IndexController#index');
Route::get('/aboutus' , 'IndexController#index');
Route::get('/product' , 'IndexController#index');
Route::get('/signup' , 'IndexController#index');
Route::get('/myproduct' , 'MyProductController#index');
});
My Angular modules
application.js
sydifApp.config(['$routeProvider', '$locationProvider' ,
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'public_html/template/home.html',
controller: 'HomeCtrl',
user_role: 0
}).when('/aboutus', {
templateUrl: 'public_html/template/aboutUs.html',
controller: 'AboutCtrl',
user_role: 0
}).when('/product', {
templateUrl: 'public_html/template/product.html',
controller: 'ProductCtrl',
user_role: 0
}).when('/signup', {
templateUrl: 'public_html/template/signUp.html',
controller: 'SignUpCtrl',
user_role: 0
}).when('/myproduct', {
templateUrl: 'public_html/template/myProduct.html',
controller: 'MyProductCtrl',
user_role: 0
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
So when I came first on each route it works I see the pages. However for the Controller MyProductController i put a var dump like this :
MyProductController.php
public function index()
{
var_dump('expression');
return View::make('index');
}
What is the problem : When I go to the url /myproduct it's look like the Controller MyProductController is not loaded because i can't see the var_dump(). When I refresh the pages then the var_dump is visible. I am using ng-view inside the index.php and I have separated the back-end from the front-end.
Do you have any idea why my Controller is not load first?
I try to be as clear as possible.
Thank you for your help.

Related

AngularJS ui-route $state, $scope and controller event loading

I'm kinda new with this UI-Route I know it's very powerful but i'm having problem working on it, I have use AngularJS before but not that often and this time i really want to use it so given that my questions goes like this (I've search everywhere regarding this but no luck for me):
The scenario is I have Index.html on that page I have two views
which are "News" and "Testi" both are confined on a div
So knowing that I added App.js (which will contain the initial code for my AngularJS implementation):
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/Views/Index.html',
views: {
'main': {
templateUrl: '/Views/App/home.html'
},
'testi': {
templateUrl: '/Views/App/testimonial.html'
}
},
controller: 'HomeCtrl'
})
});
and my controller goes like this (homeController.js)
'use strict';
app.controller('HomeCtrl', function ($scope, $state) {
$scope.welcomeMessage = 'Welcome to WeRCheese';
});
my problem is that I'm trying to access that "welcomeMessage" on my home.html page but wasn't able to, what strange is that when i put in a breakpoint on my controller it wasn't hit it seems the controller does not exist.
Maybe I'm doing it wrong because I don't have any problem when i use ngRoute before.
Lastly, how do you add in a factory?
app.controller('HomeCtrl', function ($scope, $state, homeFactory) {
});
or
app.controller('HomeCtrl', ['$scope', '$state', 'homeFactory', function ($scope, $state, homeFactory) { }]);
TIA.
I was having problem adding a comment my mistake for not realizing that I need to edit my question here. Anyway for my problem I was able to load the controller via different page but I'm still having problem loading the controller on the Index.html i tried updating the .state -> tried on different approach i.e. use '', '/', 'index' in the views.
.state('home', {
url: '', or '/', or 'index',
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl'
But still the controller is not loading, to be specific I have tried adding this line on my Index.html {{ welcomeMessage }} just to verify that the controller was/has been loaded properly.
When you have add views property to a state, the original template, templateUrl properties will be ignored, so you have to bind controllers in views.
$stateProvider.state('home', {
url: '/home',
templateUrl: 'Views/Index.html', <----- will be ignored
views: {
'main': {
templateUrl: 'Views/App/home.html',
controller: 'HomeCtrl'
},
'testi': {
templateUrl: 'Views/App/testimonial.html',
controller: 'HomeCtrl'
}
},
controller: 'HomeCtrl' <----- will be ignored
})
For factory: after defined it, you can inject it by both the ways you posted.
refer this plunker.
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: '/Views/App/home.html',
controller : 'HomeCtrl'
},
'testi': {
templateUrl: '/Views/App/testimonial.html',
controller : 'HomeCtrl'
}
},
})
});
you can do this
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl',
controllerAs: 'vm'
},
'main#home': {
templateUrl: '/Views/App/home.html'
},
'testi#home': {
templateUrl: '/Views/App/testimonial.html'
}
}
});
using controllerAs is a best practice

Adding fusioncharts with angularjs gives : inject modulerr error

I want to add fusioncharts to my angularjs app. I have followed this link:
http://www.fusioncharts.com/blog/2015/03/angular-fusioncharts/
But as soon as I add ng-fusioncharts to my app.js as:
var app = angular.module('myApp',['ngRoute', 'firebase','ng-fusioncharts']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'OrgListController',
templateUrl: 'views/organization/list.html'
})
.when('/add_org', {
controller: 'OrgAddController',
templateUrl: 'views/organization/org_add.html'
})
.when('/edit_org/:id', {
controller: 'OrgEditController',
templateUrl: 'views/organization/org_edit.html'
})
.when('/add_access_point', {
controller: 'AccessPointAdd',
templateUrl: 'views/access_points/access_add.html'
})
.when('/edit_access_point/:id', {
controller: 'AccessPointEdit',
templateUrl: 'views/access_points/access_edit.html'
})
.when('/add_user', {
controller: 'UserAdd',
templateUrl: 'views/users/user_add.html'
})
.when('/edit_user/:id', {
controller: 'UserEdit',
templateUrl: 'views/users/user_edit.html'
})
.otherwise({
redirectTo: '/'
});
});
Nothing gets displayed and my whole project doesn't work. Viewing in console says :
error: inject modulerr.................
Somebody please suggest how to add multiple dependencies in one module?
You need to have fusion-chart.js inorder to inject ng-fusioncharts
var app = angular.module('HelloApp', ["ng-fusioncharts"])
DEMO

angular routing and html5 Issue

I'm trying to make a routing , it's working when I just clicking on links , but when I refresh the page , browser says not found ! I'm using html5mode , also when I set the # on url and search page manually it just works! what's the problem ?
this is app.js :
app = angular.module("app", [ "ngRoute" ]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider.when("/", {
templateUrl: "partials/index.html",
controller: "mainCtrl"
}).when("/index", {
templateUrl: "partials/index.html"
}).when("/person", {
templateUrl: "partials/person.html",
controller: "personCtrl"
}).when("/person/:id", {
templateUrl: "partials/personShow.html",
controller: "personShowCtrl"
}).when("/about", {
templateUrl: "/partials/about.html"
}).when("/contact", {
templateUrl: "/partials/contact.html"
}).when("/coworking", {
templateUrl: "/partials/coworking.html"
}).otherwise({
redirectTo: "/partials/person.html"
});
$locationProvider.html5Mode(true);
});
Here is excatly same question, anwsered by me:
tl;dr
You need a webserver, like Apache, Nginx or something based on Node.js and you need to redirect all your http calls to index.html

Is AngularJS routes adding a special character?

I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation

Routing is not working in MVC Web API and AngularJS

I am using MVC Web API and Angular JS
When i am giving single routeProvider, then its working after adding one more routeProvider its not working....
My Code Is:
var phoneModelsApp = angular.module('phoneModelsApp', ['ngRoute']);
phoneModelsApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phonelist', {
templateUrl: 'partials/Test1.html',
controller: 'phoneListCtrl'
}).
$routeProvider.when('/phonelist1', {
templateUrl: 'partials/Test2.html',
controller: 'phoneListCtrl'
}).
otherwise({
redirectTo: '/phonelist'
});
}]);
You need to add to in your urls "#" or adding in your configuration:
$locationProvider.html5Mode(true);
In order to remove the # in Angular you need to make an small change in your configuration:
You need to add:
$locationProvider.html5Mode(true);
This is the whole version:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

Resources