Multiple Layers of Deep Linking in AngularJS - javascript

I am attempting to place multiple controllers within my template partials with AngularJS- The problem I am encountering is that of the first layer, direct-linking to these sub-controllers and their related snippets.
An example would be a management page for user accounts, say I am on a user-list and wanted to change a user from the list's password, I click on their change-password button, and want to redirect the user to #/ManageUsers/ChangePassword/?UserID=<uid here> rather than #/ManageUsers_ChangePassword/ or similar, but the Angular documentation (Or lack thereof) on the subject suggests that this is impossible, or not 'The Angular Way'...
Being that my team wants to keep these separate controllers as partials, is there a non-hacky way to do this with Angular?

There has been recently published a blog post about one possible way of solving deep linking with AngularJS. It has a parent/child style of implementation where parent sections do not need to be updated if you need to change only contents of the child, which makes it pretty neat.
It's here: http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

why not direct to #/ManageUsers/ChangePassword/:UserID ? You can get the UserID from $routeParams. See an example on the $route page.
You can even create routes like #/ManageUsers/:OrganizationID/:SectorId/:UserID/ChangePassword/Confirmation that will be used by the url #/ManageUsers/10/2/32/ChangePassword/Confirmation

Related

Is it possible to create a subpage without any file?

I'm a newbie when it comes to PHP. I wrote some JS to make AJAX requests for my project and it worked well, but I don't have any idea how to convert that into PHP.
I've prepared layouts like the following:
mainLayout.php,
userLayout.php,
offerLayout.php,
In those files are some PHP and MySQL parts that build an HTML page.
In Ajax it was easy to navigate between many users using only one page and replacing some divs with data...
But a huge minus was that you couldn't have a single address reference a user profile or the offer (like mywebsite.com/user1).
Now, when I use PHP I want to achieve same layout effect.
How can I avoid creating a thousands of pages (of course even dynamically it seems to be a waste of memory IMO) like user1.php, user2.php, offer1.php, etc.
I don't know how to achieve the effect of being on a site like example.com/user277373.php without creating thousands of files but only one template.
Two solutions I see is either you use GET to parse your data:
http://example.com/?data=1736861
and than access it over the $_GET variable:
$id = $_GET["data"];
($id will be 1736861)
or you use the flight php extension, that will look something like this:
Flight::route('/id/#id', function($id){
echo "ID: $id";
});
and the URL would look like http://example.com/id/1736861. You can also use multiple variables with the flight module.
I hope this helped, Sebastian
Are you familiar with any MVC frameworks? If not, I would highly recommend getting accustomed to the MVC design paradigm. MVC = Model View Controller. From Wikipedia, a short excerpt:
A model stores data that is retrieved according to commands from the controller and displayed in the view.
A view generates new output to the user based on changes in the model.
A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its
associated view to change the view's presentation of the model (e.g.,
scrolling through a document).
Two of the key components of MANY frameworks (in pretty much any language), are Routes and Templates. When utilizing a routing system, you're able to specify a template for every page loaded that matches a specific route. For instance, site.com/people/:id where ':id' can be any value in the URL, and be configured to use "person.html" for the HTML output. Note that "person.html" receives variables/data that will dynamically populate content, e.g. <h2>Hello, {{name}}</h2>
So, to clarify, site.com/people/252, site.com/people/12, site.com/people/5, site.com/people/john would all match the site.com/people/:id route path where :id is dynamic, and your system will use ONE TEMPLATE (which you specify) to display all the data. Don't forget, when that route path is met, that's only step 1. You will probably need to take that :id run some database query and pass that data into the template.
A popular micro PHP framework called Slim, might be a good starting point. Here's documentation for its way of handling Routes and Templates:
https://www.slimframework.com/docs/objects/router.html
https://www.slimframework.com/docs/features/templates.html
Slim is commonly used with Twig, a super popular PHP template engine. Here's its website/documentation: http://twig.sensiolabs.org/
And if that wasn't enough, Slim has a super handy First App Walkthrough that will show you routes, database connection, and templates: https://www.slimframework.com/docs/tutorial/first-app.html
Hope this information helps you on your journey – Best of luck!

JSON items to have pages of their own

I've started using contentful, created a few entries and now I want to make a simple dynamic page with subpages.
Basically, a portfolio. What i want to have there - index page with links to inner portfolio pages. I've got a JSON with entries each of them containing title, content, slug, id, etc.
How do i make them have each of their page with url? Template is going to be the same. So for example the user comes to url.com/someurl and he sees the page for some specific item in entries.
My gut is telling me that usually controller does this kind of job. Should i try using some frameworks like angularjs?
You can have a look at this simple example app I've been working on, using just plain JS. It's not entirely finished but showcases the very basic principles of using Contentful to build a frontend only app with the contentful.js SDK: https://github.com/contentful/product-catalogue-js
Give that you added an angularjs tag I'm assuming you could also be interested in this: https://github.com/jvandemo/angular-contentful
Essentially you should just build an app as any other, using whatever framework (or not) you want, but get the data from Contentful instead of an AJAX endpoint or any other data library.
What you might want to think of as well is how you structure your Entries and Content Types in Contentful. A good strategy is to have some kind of Entry that corresponds to a page (for instance, in that example app there are Products and there are individual pages for each Product), and then have related Entries you can link to it (like say, Blog Posts and Images).

EmberJS multiple controllers on one page

Is it possible to have multiple controllers on one route / page. I want to show 2 features of my application on one page. But they are not directly related so each would need it's own controller, model and (partial) view.
But I can't seem to figure out how I could do this.
It seems that I must use the {{render}} option here.
Is it possible to have a subdirectory structure here?
When I have {{render "dashboard.users"}} for the template it does look in template/dashboard/users.hbs but for the controller I can't seem to find where it looks and what the naming conventions should be.
E.g. should it be
App.DashboardUsersController = ... ?
edit:
Looks like it should be, but I shouldn't place it in a subfolder of controllers but name it dashboard_users_controller.js
You get this effect by rendering templates into multiple outlets of their parent template: Guide and API Docs
Here is a running JSBin demonstrating it

How do you maintain the page state, so that you can provide permalinks using emberjs?

I can't to get a good idea of how you support permalinks. This is perhaps simply because emberjs doesn't support permalinks.
I'm building a UI that allows users to choose certain reports, so in ember this is easy enough you just add a route 'reports' that takes in an id so the URL looks like this:
#/reports/10/
What I need to have is some extra parameters to also be present in that URL for example start and end dates and metric types e.g.
#/reports/10/metric/impressions/start/10-08-2013/end/11-08-2013
So those parameters need to be picked up if I paste them in the browser, AND importantly when the user changes those settings e.g. via a date picker the URL should update to reflect the new parameters.
Edit:
Here is a link to a jsbin with a solution based on the answer below. http://jsbin.com/ucanam/703
Just throwing my 2 cents into this topic. Please note that i am using this approach in production and it works fine. Actually there are 2 parts to this question.
1. How can i have multiple dynamic segments?
One approach is described by Mike Grasotti using nested resources. This approach works but i think this approach is a little bit cumbersome in this case.
Why do i think it is cumbersome?
Routes are a means to separate concerns in Ember. In this case i do not see separate concerns. It looks to me like you are trying to mirror the state of a form in your URL. I think it should be one route that is responsible for the concern "state of the form". Therefore i recommend to have a look at the following post, in which i describe how to implement multiple dynamic parameters per Route: Is resource nesting the only way to enable multiple dynamic segments?
2. How is it possible to trigger the serialize hook to update the URL, when you have changed just one parameter in your form?
The problem is that the serialize hook is only triggered, when the Route gets entered with a new model. I guess you have some logic in place, that deals with the event of changing the parameters start or end. I suppose that you do not re enter the Route in this case. So how do you trigger the serialize hook in this case again to update the URL? I am handling a event like this in my router and there i am using the following code:
var currentRouteName = this.controllerFor("application").get("currentPath");//the ApplicationController stores the name of the current Route
var url = App.Router.router.generate(currentRouteName);
App.Router.router.updateURL(url);
PS: You can have a look at my production app here. This app shows the best movies in cinemas in Germany. Even if you do not know german, you can click on one of the controls in the top area and see the URL getting updated. I guess this is pretty much the same you want?
I have wondered how to do this as well. The data has to go in the URI since we want to share links, but you don't want to confuse the application location with the application state.
The hash: #/reports/10 would be the minimal information required to tell the application where to go. All the other data which is independent of location should probably go in the search portion of the URI. I would suggest something like this:
#/reports?metrics=impressions&start=10-08-2013&end=11-08-2013
In theory you could parse the query string when you enter a route and then update your model accordingly. From my understanding the route's model() function is called when navigating to a route by changing the URL directly or clicking a link so that would be the place.
Unfortunately, in practice this didn't work as I expected. I'm not sure if it's just JSBin, but there is some weird behavior where the link with the extra application data doesn't actually navigate which is the whole point for a permalink. Notice that if you follow the directions in the JSBin the start and end dates are taken from the url instead of the default values. This concept could be extended to send extra requests for different model data using findQuery etc so almost any thing is possible.
http://jsbin.com/abadet/7
Anyways, it might give you some ideas.
There are a couple of ways to get this done in ember. If you need a lot of flexibility for misc parameters that might be passed to a report, check out ember-query which adds query-string support to ember applications.
Another option is to use nested resources. So for example:
App = Ember.Application.create({});
App.Router.map(function() {
this.resource('report', {path: '/reports/:report'}, function() {
this.resource('metric', {path: '/:metric'}, function() {
this.resource('start', {path: '/:start'}, function() {
this.route('end', {path: '/:end'});
});
});
});
});
App.StartEndRoute = Ember.Route.extend({
model: function(params, transition){
return transition.params
}
});
<script type="text/x-handlebars" data-template-name="start/end">
<pre>
Report ID: {{report}}
metric: {{metric}}
start: {{start}}
end: {{end}}
{{log this}}
</pre>
</script>
See this jsbin for working example

Getting started with Angular JS - Structure and other questions

I'm new to AngularJS and have gone through its tutorial, read some of its documentation, and I understand the main aspects. But I'd like some help in organizing the structure of my project.
Basically, I want to have a single page app. There will be a few main sections, e.g: Customers, Sales, Reports, etc. Each section will have its own pages e.g 'Add a Customer', 'View Sales reports', etc.
1) So, should I make one module for my app, with different routes and controllers for every screen?
2) Or should I have multiple modules, e.g one module for 'Customers', one for 'Sales', etc?
3) Say I have a 'Add Customer' form which has a bunch of fields. I want this form to be interactive e.g if the user selects his country from a dropdown, I want to load the cities for that country via an ajax request. Would I do this event handling within my controller, or should I make a directive for it? What if I'm only ever going to need this functionality for one form, should I still go to the trouble of writing a directive?
4) I want to build a CRUD form builder type of library, where I would add the fields that are required, and it would in return generate the add/edit/delete/list views and forms, alongwith the required form validation. Something like this:
var crud = new CrudLib();
crud.addTextbox('first').label('First Name').rules('required');
crud.addTextbox('email').label('Email').rules('required,email');
//....
crud.init();
Should I make this a module, or a directive, or something else?
(Too many questions in one question.)
1) and 2): organize your controllers and services into modules however you like. I tend to put "related things" into a separate module. E.g., a LoginCtrl, LogoutCtrl, UserService, etc. I put into a User.js file, which is a module.
3) AJAX interactions should be put in a service/factory/provider. Event handling should be in directives. (Directives may seem a bit cumbersome/overkill at times, but use them whenever you need to manipulate the DOM, attach event handlers, or reuse a chunk of HTML.)
4) You will need to write a directive if you need custom form validation. See also How can I use Angular to output dynamic form fields?

Categories

Resources