Currently I am working on my app and I decided to use AngularJS as a framework to structure my front-end code. However, I don't have any experience with AngularJS and thus, am currently struggling with the concepts and logics of it.
Below you can see a rough draft of my app's scaffold:
So what I am trying to do is to create a single page application for my whole app.
Within the <menu bar> one can select different pages to display within the workspace. I learned that I can realise this behaviour by using the <ng-view> directive.
However, what I want to do is, depending on the buttons clicked within the <workspace> (-> the currently loaded view) I'd like to show different <sidebars>.
For example: If one clicks on an edit object button within the workspace, the form to edit the object will be loaded into the sidebar.
At first I though I could solve this by using multiple ng-view directives within the app, but I learned that this is not possible.
So, do you have any ideas on how to realise the above described behaviour?
I would like to asynchronously load <sidebar> templates whenever they are needed within the app. These sidebar templates should contain some logic, e.g. buttons to submit data etc.
I really don't know how to realise this behaviour, as I'm as well struggling with how to use scopes and controllers in this context.
Any ideas, articles, examples are highly suggested! Thanks.
Edit: I created a small and only minimalised draft of how I imagine AngularJS would handle the process:
You can use Angular-UI.
The UI-Router has much more powerful routing features than the default AngularJS router.
For the views, with Angular-UI, you can have multiple views in a same document (ui-view) and each can load a different template depending on the current application state (the URL).
Here is the documentation for these components:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
https://github.com/angular-ui/ui-router/wiki
You definitely should check it out!
Please note that once you'll get your two templates, they will be in different scopes so you'll need some sort of communication service to handle passing data from one scope to another without getting into a $watch or $rootscope hell.
Related
Over the last week I tried to create a single page application without using the template provided by Oracle. My goal is to load the modules by clicking on simple headers or divs.
I know that OJ-Module and the CoreRouter are needed, but nothing I’ve tried so far has worked.
Maybe someone can give me some hints on this.
Thank you
I am trying similar methods and it is the best way of getting hang od the syntax, variables and the structure.
I created projects of all the 4 templates in different folders. Each one serves as a reference on how to implement a specific set of features like CSS, behaviors in my new app, created out of the blank template.
I also created a demo project. This project contains the specific element from cookbook I am trying to understand (one or two at a time and not more) and then implement the learning in the blank template, which I started filling already. The demo project keeps getting erased and recreated in my case.. You can choose to retain different demo projects if you need.
Most important will be the understanding of concepts like the busyContext, dataBinding, ResponsiveUI, Require, AMD, ojModule, inter-module interactions and the creation of events, views and viewMdels. Once you get past the initial hiccups, the APi docs are a great assistance in helping you programmatically control the entire behavior of the application features.
BTW: Do not remember the css variables. I think it is a bad idea to maintain so much material in your mind, which could otherwise be easily referenced in a document. You only need to know which documents have what content..
I'm thinking about making a sort of admin panel in angularjs. I need a way to edit the content of the site, like e.g. Wordpress offers (basically a CMS).
The confusing bit is how the CMS and Angular would integrate together
In other CMSs, the creation of the views happens on the server side. In Angular we creare a HTML template, which you can populate with data in an angular controller.
I am a bit stuck as to how to define templates and then on click position the templates accordingly..
Please suggest a way to help achieve this
Althought you seem to have an understanding how Angular works, some fundamental information is missing in your question. I guess you want to persist the content of the CMS, so you have to provide some details about the server part (I don't think you are going to use clientside storage solutions).
Additionally your question how to position templates is a bit confusing. Typically you are not dynamically positioning templates. Rather you have a template and position some elements inside of the templates. You should concretise your problem here.
Maybe you want to use some existing CMS solutions based on Angular like:
http://respondcms.com/
https://github.com/jonniespratley/angular-cms
I'm building a web site (no SPA) with Laravel and Angular Js.
So far it works like this: All routing is made by laravel Router (the views are displayed by laravel controllers), but all the CRUD operations are made in asynchronous requests by angular (save, delete, view).
So far I had very simple views: one form to create resources on one column and a list of resources on another column. Like this
The problem is that the last form has a lot of fields and i want to split it in two separate views. I read about angular routing but the way i see it, you must configure the routing for the whole angular module and i want to use it only for this specific controller. What's the best approach on this one?
So this is how i decided to go after reading a lot, create a new module for my big view and configure the routing only for the new module. I hope this helps someone eventually.
I'm trying to learn angular by building this small web app that has this layout:
Simply, the Header's going to say "first app!"
each content nav button is going to be a different category (sports, music, etc) and each one is going to pull some public api and display it in a list on the content page in a table. I think I'm ganna have some search and filtering features and bread crumb if I decide to get fancy and add submenus.
Anyways, I understand the gist of Angular and I went through the phoneCat app tutorial on the angular site: https://docs.angularjs.org/tutorial and I have been watching bits and pieces of youtube videos on angular as well.
Unfortunately I'm still confused when it comes to transposing the concepts of routing/modules/services/directives/etc... into making an actual web app/site
I'm looking for someone to kind of give me a super high level view of how they would make this app using angular and explain it like I'm a total noob and maybe offer some simple rule of thumb tricks to think about angular in terms of web app components (eg. when I think of the data in a json file and I want to display it, what could I think of that in terms of angular concepts (data/model/view?) or ie: you'll be using ng-repeat a lot, etc.)
Here are some questions I have off the bat:
How many .html files should I have (views?) Do I make a .html for each content page?
The Header, Nav and bread crumb (if I use sub menus) will always be displayed to the user. Does this mean I have a index.html page with <div ng-view></div> in the body and then have a main.html with the header/nav/breadcrumb, and then have content1.html / content2.html/ content3.html etc separate? If this is true then how do I use more than one ng-view? Or is this where the concept of routing comes in? Could someone explain how I would set up these pages from a ng-view/routing perspective at the simplest level?
What does angular.module() do? and when do I use it? I see it at the top of controllers, routing, and services files, etc...
Could someone use an example when and how they use a service / factory?
I feel like this is asking a lot for someone to explain. I'm not very computer-sciency minded and I feel stuck in this place where I feel like I can almost build a really cool app but just need to put all the pieces in the right place.
Thanks
Great questions, I know I had my fare share when I first started. I am going to answer each question with a link that will give you detailed information of each.
yes, you make a html page for each content page(aka view)
Yes, your index page will contain all the static content, and you will use your ng-view directive to state the area that is dynamic. ng-views are the only way to make set dynamic content. You can use: switches, hide/show, and ng-repeats. For multiple views I would suggest you either user a combination of ng-views and in the views use a switch. If saving the state is very important, than I suggest you look at angular-ui https://github.com/angular-ui/ui-router
Angular.module() is a way to separate/ modularize your code. This means that it is only used in the parts that you explicitly state. When used the dependencies stated will be injected.
A great example of how to use the factory module, is in the angularjs tutorial from the official site. I would also suggest some great videos from egghead.io -https://www.youtube.com/watch?v=HvTZbQ_hUZY
If you are looking into a mobile solution, you might want to check out Ionicframework. It is angularjs but with added magic for mobile.
I'm wondering if it's possible to trigger a route and show a different view in Angular without updating the URL.
Basically I am embedding an Angular app inside an existing web site, and I don't want my embedded app to alter the URL, but I do want view management via routing.
I understand I can use ng-include as suggested here, but I would rather use routing.
I don't think it's possible to use routing and not URLs. You can roll your own routing pretty easily using ng-switch and a rootScope variable which stores the current "route".
The ng-include approach would address your issue. I'm not sure what you mean when you say you'd rather use routing since routing by definition uses URLs, but, yes, you can load different views using a different mechanism. Take a look at Angular-ui ui-router which uses the concept of states and views in addition to routing. It sounds like the view mechanism in states might address what you want.