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.
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..
(firstly thanks for the help and time looking at this) -
OK so there are allot of frame works out there and i've been going round in circles trying to find the right language to do what I need -
I'm looking to create a web page (personal site) - which is only one page but when clicking on links (such as blog and projects) it then removes the main content on the page and re-populates it with the blog main content ect -
Ideally there would be some type of animation transition between pages -
From looking at some portfolio sites a good example of what I am trying to create is https://jasonliao.co.nz/
Any help here would be great -
Ideally to know:
what is this method called (loading pages without refreshing the page)
Can this be done using vanilla JS? (i'd love to get amazing as one language before throwing in frameworks on top of it) -
Yes I am kinda new to this side of development so any help is really appreciated - thanks,
Wally
I recommend start by learning basic JS (Java Script) then once your confident then move onto JQuery. Udemy would have a few basic courses.
What your asking is really broad as many languages and frameworks could do it. Its more what your use to or features your site will require. eg do you require back-end functions if so then you will need to use something like PHP or Node
This guy was probably using Angular or React for this. It is single page application (SPA). Whole app is loaded in the browser and if it needs some data, it will send HTTP requests to the servers and get data as JSON. If you want to make similar things with vanilla JS, you must use Ajax and do alot of DOM manipulation to achieve the same thing :)
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 currently looking at putting together a website with ASP.NET MVC that gives the viewer the ability to move around from page to page (view to view) without it being refreshed each time.
The way I'm currently thinking of doing it treating views as 'areas' (or mini master pages) and using partial views in the place of views. I'll then switch the partial views in and out as needed using AJAX calls to the controller (which will load the partial view) and JavaScript.
I feel like I could have explained this better but I'm not quite sure how to phrase it, so hopefully this diagram will help somewhat:
Here's a look at my current folder structure. Index.vbhtml is acting as the aformentioned 'area'.
Views/
Accounts/
Partials/
ViewAccount.vbhtml
CreateAccount.vbhtml
Index.vbhtml
I'm loading my partials views in using a JS function along the lines of: nav.navigateToView("Action", "Controller")
For example: nav.navigateToView("ViewAccount", "Accounts" will load the ViewAccount.vbhtml partial view onto my page.
What I'd like to know is: Is there currently a defined method for doing this, or perhaps a library I can use to aid me? If not, could you give some helpful advice on how to achieve this? I'm not convinced the method I've described will be adequate.
Apologies if this question has already been asked! I've had a tough time trying to find anything relevant on this topic. Am I missing something simple?
Thanks,Aaron.
From the description you have provided, I think what you are describing is a single page application (SPA). Needless to say, there is a bunch of articles available so sorry for not being more specific.
One approach would be to use Angular.js which is a Javascript framework, described here and here (and thousands of other sites).
ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.
Please see this site.
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.