AngularJS too much controller? - javascript

I know it is a little bit noob question, but I just wanted to ask, that is it a good or a bad practice if I have too many controllers. Let's say I have a web app, that has around 12 views. Each view has it's own controller (and i didn't talk about the modals controllers I have too). I'm using the ng-view directive for "templating". I just to get some advice, that is it good or just really bad way to make it.
index.html
<html ng-app="myApp">
<head>
.... <!-- Styles and others -->
</head>
<body>
<div ng-view="true">
</div>
<script src="angular/angula.min.js">
<script src="app.js">
<script src="controllers/firstController.js">
<script src="controllers/secondController.js">
<script src="controllers/thirdController.js">
.
.
<script src="controllers/eleventhController.js">
<script src="factory/mainFactory.js">
</body>
</html>
My app.js has the routing functions (Routeproviders etc.).
Thank you very much!

Breaking things down in to small components is good, but you need a way of combining things for production deployment - see for example https://egghead.io/series/angular-automation-with-gulp

Related

JavaScript: JQuery UI Tabs won't load my other HTML pages

So problem is that i added Tabs from JQuery UI in my web, and now my tab which contains paragraphs loads fine but tabs on which i have linked to other html pages(which donot contain Tabs) , they wont load. here is the my .js file code and .html code:
$(function(){
$("#tabs").tabs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title id="myTitle">Persistant Programmer: Testing Website</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script17.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/excite-bike/jquery-ui.css" />
</head>
<body>
<div id="tabs">
<ul>
<li>About Me</li>
<li>Click-Picture Game</li>
<li>Feed the Cat Game</li>
</ul>
<div id="tabs-1">
<p>Hello there! Welcome to my Website. My name is Syed Hammad Jaffery, studying in FAST-NUCES. Purpose of this site is just a playground for my JavaScript Codes. JavaScript is something which is really basic need in today's world, there couldn't exist any web which only runs with HTML5 and CSS3. We need JavaScript to give some living feature to our webpages on which they can act and do stuff dynamically <br></br>I know this web is really newbie version and possibly not even shown on Search Engines but still Thanks for visiting.</p>
</div>
</div>
</body>
</html>
I have placed game.html in the same folder as my this html file and catGame.html in a folder named catgame which is present in the same directory as of my html file.
It's been one day i am stuck on it, and i am really new in JavaScript took some tutorials online. Tried everything as it is from here http://jqueryui.com/tabs/#ajax .
Thanks in Anticipation
As I know, it is not possible directly using jQuery UI tabs.
You can do it with some jQuery tricks as this answer

Why isn't this angular expression working in Plunker? {{ 843 / 42 }}

I'm learning Angular on Plural Sight and the first lesson gives an example of how to use the ng-app directive.
Here's a link to the Plunker editor
http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 /42 }}
</body>
</html>
The example that was given uses the expression {{ 843 / 42 }} to demonstrate how angular would render the quotient on a webpage.
I've copied the lesson script several times over and can't figure out what I'm doing wrong and why its rendering as text.
This is my first post on stackoverflow, and I'm happy to join the community!
Thanks Again.
Shamus
Your Angular is throwing an error when its running.
You need to import the system library.
See in the dev console.
Checkout this link to get yourself setup
Thanks so much for your answers! I was able to figure out that when plunker adds the angular package, the default url is pointing to Angular 2.x. instead of 1.x as mentioned by "developer033" I went to the angular site and directly borrowed the CDN link from their setup page:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
And now it seems to work just fine. When you're getting started its always a bit frustrating when you spend the most time on the tiniest issues, but I'm glad I found stackoverflow to eliminate most of that guess work.
Thanks again!
Shamus

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Nesting ng-views in angular js

I had two different apps in angular. During integration to a single application I had to
nest ng-views.
For sample (index.html) is
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
One of my app view is (view2.html)
<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}
Now this application has different views once again inside it.
I tried but the page is not loading. Is there a possibility to nest ng-views?
If not Possible can it be explained?
Updated answer:
UI Router (which now sits here: https://angular-ui.github.io/ui-router/site/#/api/ui.router) is generally regarded as the best solution for complex routing in AngularJS.
Original answer:
Nesting views isn't natively possible, as of now, in AngularJS. In my last app, I used a solution derived from here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Allowing me to effectively nest views (and skipping the limited ng-view altogether)
After doing so, this other (simpler, better, I believe) solution appeared:
http://angular-ui.github.com/ (scroll down to "Route Checking")
Check it out!
I'd suggest that you have a look at the ui-router project by the AngularUI team. This project contains a new router based on states, which can also react to URLs, but allow way better handling of application state.
This includes the use of having multiple and / or nested views.
I had a similar question a while ago, so maybe its answers are going to help you as well: How do I setup nested views in AngularJS?
Moreover, you can expect ui-router to be integrated in AngularJS in a future version, so this will most probably be the way routing works in the future anyway. So no need to stick to other workarounds if you can already have what will be next today :-)
Take a look at this:
https://github.com/angular-ui/ui-router
http://angular-ui.github.io/ui-router/sample/#/
Looks like the thing you are looking for
There are many third party libraries for nested views and routing. ui-router is already mentioned here, I would also suggest to take a look at this one:
http://angular-route-segment.com
It has the nested views capabilities which you ask for exactly, and it is much simpler to use than ui-router. In your example:
index.html:
<div app-view-segment="0"></div>
view1.html:
<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>
deep-view.html:
<p>This is the partial for view inside view1.</p>
If you do not want to turn to yet another library to solve your problem (not that there's anything wrong with that), you should also look into using directives and ng-switch and ng-show.
This approach was given as an answer here :
angular complex nesting of partials
I sincerely doubt this is idiomatic Angular (and it's mentioned above that there is possible cross-browser issues), but my ng-include solution for having an "all" view with my other views nested inside something like an all.html:
<div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
</div>
<div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
</div>
<div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
</div>
This worked for me but felt like it was going against the grain of the framework. I will personally be trying something like what Eamon links to on my next pass.

Categories