js / chaplin.js and I'm having some dificulties to find documentation about the chaplin routes.
I have the following code (cofeescript), it works in chrome but in firefox it tries to navigate doing a request to the server and it returns a 404 error. The server side is an ASP MVC 3 project.
Routes
define ->
'use strict'
(match) ->
match '', 'page#home'
match 'Home', 'page#home'
match 'Services', 'page#services'
PageController
define [
'controllers/base/controller',
'views/home_view',
'views/services_view'
], (Controller, HomeView, ServicesView) ->
'use strict'
class PageController extends Controller
historyURL: (params) ->
''
home: (params) ->
#view = new HomeView()
return
services: (params) ->
#view = new ServicesView()
return
Navbar (HTML)
Home
Services
PS: Another thing that I would like to know is, when the controller is called:
define [
'controllers/base/controller',
'views/home_view',
'views/services_view'
], (Controller, HomeView, ServicesView) ->
'use strict'
This is loading with AJAX both the Home and service view I would like to load only the one that has been actually called?
Thanks for your help.
Already answer on
https://github.com/chaplinjs/chaplin/issues/180
Related
I try to add rest api in yii2-advanced for using angularjs. What I have already done
install angular through composer
add angularController for rest
class AngularController extends ActiveController {
public $modelClass = 'frontend\models\Tour';
public function behaviors() {
$behaviors = parent::behaviors();
$behaviors['corsFilter'] = [
'class' => \yii\filters\Cors::className(),
];
$behaviors['contentNegotiator'] = [
'class' => \yii\filters\ContentNegotiator::className(),
'formats' => [
'application/json' => \yii\web\Response::FORMAT_JSON,
],
];
return $behaviors;
}
}
Create AngularAsset and in $public js write this
'angular/angular.js',
'angular-route/angular-route.js',
and change AppAsset adding my js file with angular code
'js/app.js',
This is my angular routeProvider in app.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'http://localhost/divnaukraina/frontend/views/angular/views/index.html',
controller: 'index'
})
.otherwise({
redirectTo: '/'
});
}])
In result everything works fine except routes. Page where angular must work
tours page.
But view from template url also renders on other pages main page.
I see that this is because "/" in angular routeprovider but how to disable it?
And I couldn't find much detailed information about yii2 rest+angular, so any tutorials,links an so on will be very useful for me! Thanks.
What was the solution: I changed when('/' on when('/angular' and I also changed link to this page in main navbar to .../index.php?r=tour%2Findex#!/angular. It isn't best solution but...
I'm using Angular on Django with Apache. And I have an app like the following:
(function(){
'use strict';
angular
// AngularJS modules define applications
.module('app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "/static/app/foo/templates/main.html"
})
.when("/red", {
templateUrl : "/static/app/foo/templates/red.html"
});
});
function foo() { }
})();
I'm serving my site on: http://localhost/ok/
When I make a GET to http://localhost/ok/ or to http://localhost/ok, all it's fine and the URL is transformed respectively to http://localhost/ok/#!/ or to http://localhost/ok#!/.
In main.html I have a link to the red "anchor" Go to Red. It points to http://localhost/ok/#red but when I click it, red.html is not returned, and I read in the address bar http://localhost/ok/#!/#red or http://localhost/ok#!/#red (depending on the URL pattern of the first call).
I do not understand where the problem is. How can I fix?
Try this:
Go to Red
According to the tutorial I've added new page and module, but it doesn't seem to work (neither it's shown in a sidebar, nor I can get it via direct url). What am I missing?
Note the
newPage that you have added has module name as BlurAdmin.pages.myNewPage
and state as myNewPage as given in the code
(function () {
'use strict';
angular.module('BlurAdmin.pages.myNewPage', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('myNewPage', {
url: '/myNewPage',
templateUrl: 'app/pages/myNewPage/my-new-page.html',
title: 'My New Page',
sidebarMeta: {
order: 800,
},
});
}
})();
Now goto src/app/pages you will find pages.module.js. You should add mentioned new module to list:
angular.module('BlurAdmin.pages', [
'ui.router',
'BlurAdmin.pages.dashboard',
'BlurAdmin.pages.ui',
'BlurAdmin.pages.components',
'BlurAdmin.pages.form',
'BlurAdmin.pages.tables',
'BlurAdmin.pages.charts',
'BlurAdmin.pages.maps',
'BlurAdmin.pages.profile',
'BlurAdmin.pages.myNewPage'
])
And you are done.
after adding the module name to pages.module.js re run gulp serve:dist
I'm looking for a way to "send" or "register" some configuration from several modules to one single module.
The idea is that different modules will have theirs own route configuration. And one single module controller will build the menu based on those configurations.
I want to "send" or "register" configuration instead of querying, because the menu controller cannot knows which modules are available.
Here is a solution to my need:
Each module defines its own routes using $routeProvider with a custom parameter defining if the route should be displayed in the menu and another custom parameter with the name to display. (See above Module A example).
Then the menu controller will loop the $route.routes variable (which contains all defined routes) to build de menu. (See above Module B example).
Module A:
angular
.module('module-a', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/path-a', {
controller: 'ModuleAController',
templateUrl: 'path/to/template.html',
menuDisplay: true, // Custom parameter
displayName: 'Solution Manager' // Custom parameter
});
});
Module B:
angular
.module('module-b', [])
.controller('MenuController', ['$scope', '$route', function ($scope, $route) {
var entries = [];
angular.forEach($route.routes, function (route, path) {
if ( route.menuDisplay == true ) {
this.push({
displayName: route.displayName,
route: '#' + path
});
}
}, entries);
$scope.menu = entries;
}]);
You will probably add some more checks to ensure displayName is provided, etc ...
I just took an app I'm working on and converted it to a Plunk but Angular and/or ui-router is not populating the two views I have in index.html. On my local box the app loads fine but there I have the app modularize. So when I converted it to a Plunk I had to rewire the files together since I can't make modules in Plunker AFAIK. Also, when I load the Plunk in a separate window and open Dev Tools I get no errors so I'm at a loss right now.
Here is link to the Plunk code I made:
http://plnkr.co/edit/2f1RITT6ysZhB5i0UcUw?p=preview
And here is the link to the embedded view (more convenient if you want to use Dev Tools):
http://embed.plnkr.co/2f1RITT6ysZhB5i0UcUw/preview/posts
I should mention that the route has to end in /posts since that it the url of the state named posts. I have no state defined for the root / url. Also the following url failed:
http://embed.plnkr.co/2f1RITT6ysZhB5i0UcUw/posts
Thanks in advance.
I've made few changes. Here is a working plunker
Firstly I upgraded your version to UI-Router 0.2.13 (fixes some issues, simply always use the latest)
The /post is now default
//$urlRouterProvider.otherwise('/');
$urlRouterProvider.otherwise('/posts');
I changed your controller, to not use router params,
// wrong old
/*
app.controller('ProfileCtrl', function ($scope, $routeParams, Profile) {
var uid = $routeParams.userId;
$scope.profile = Profile.get(uid);
Profile.getPosts(uid).then(function(posts) {
$scope.posts = posts;
});
});
*/
// the way with UI-Router
app.controller('ProfileCtrl', function ($scope, $stateParams, Profile) {
var uid = $stateParams.userId;
$scope.profile = Profile.get(uid);
...
JUST to know what is post holding
Also, the passed userId into state contains values like: "simplelogin:82", to observe taht, I added overview of processed post, which is showing info like this:
{
"creator": "3lf",
"creatorUID": "simplelogin:82", // this is passed as userId, is it ok?
"title": "a",
"url": "http://a",
"$id": "-JazOHpnlqdNzxxJG-4r",
"$priority": null
}
Also, this is a fixed way how to call state posts.postview
<!-- wrong -->
<!-- <a ui-sref="posts({postId:post.$id})">comments</a> -->
<!-- correct -->
<a ui-sref="posts.postview({postId:post.$id})">comments</a>
And alos, if the postview should be injected into main area, this should be its defintion
var postView = {
name: 'posts.postview',
parent: posts,
url: '/:postId',
views: {
'navbar#': {
templateUrl: 'nav.tpl.html',
controller: 'NavCtrl'
},
//'#posts.postview': {
'#': {
templateUrl: 'postview.tpl.html',
controller: 'PostViewCtrl'
}
}
};
Check it all here
SUMMARY: Working navigation is among posts - users... the "comments" link is also working, but the target is just loaded ... with many other errors... out of scope here