• 0

AngularJS Problem


Question

Hello, I've got a website that I initially wrote with PHP and jQuery (with jQuery UI, Bootstrap, TouchPunch, etc).  I found I was doing a lot of jQuery related work, coupled with some php for initial loads.  It became that I was more or less doing double the code (one for php to do the logic at render time, then jQuery adding the same logic for dynamic Ajax related functionality).

I was looking into Angular, and I think that it will allow me to reduce the jQuery code, and remove much of the PHP loading and really keep the PHP on the backend as opposed to front-end.  However, I am running into some difficulties (which as I have found out isn't that surprising).

I am starting with my options page as it has multiple pages and the next step with it was to really make it more dynamic/jQuery oriented (perfect spot for angular controllers).  However I have a problem and I am not sure how to handle it.

Basically I have a main file called app.js which creates my base application:

var app = angular.module('davesapp',[]);

This is what is set in the html tag (ng-app="davesapp").   Then I have a second file called: options.js.  It defines a second app/module:

var app = angular.module('davesapp-settings',[]);

This file is included in the options.php page in the content section (so it is loaded only on the options page).  This file has all my objects/functions related to the options page.  Including loading settings via ajax, ($http.get) and saving settings ($http.post) as well as a function for controlling which options setting to show.  

This files controllers only work if I include it in the app.js file. Like so:
 

var app = angular.module('davesapp',['davesapp-settings']);

Now, this works fine on the options.php page however it causes issues with other pages as I don't include the options.js file on other pages (not needed).  Is there some way for me to create an array of some sort that based on the page I can tell it what to include/not include?  Like for example on the options page have it look the same as above, but on say the archive page have it be:
 

var app = angular.module('davesapp',['davesapp-archive']);

Also, I am really liking the Angular idea primarily for things like the ng-repeat and the ng-show/hide that I can put right in the raw html (similar to the way the PHP is done) vs doing foreaches / $('div').show()/hide() of jQuery separately.   However I kind of feel like maybe adding in Angular might be over complicating things... but with the level of dynamic stuff that this site will have.. I think it will be much cleaner than trying to do it with both PHP and jQuery alone.

Also, not sure if it will make any difference, but I use the Slim Framework with the site so it handles all the routing/templating.  The Angular is purely to make sections of the code much cleaner and allow for more dynamic sections without a bunch of jQuery.

Link to comment
https://www.neowin.net/forum/topic/1256102-angularjs-problem/
Share on other sites

3 answers to this question

Recommended Posts

  • 0

No one eh?  Alright.. well another option I was thinking...

Was that I could change the logic so in PHP I use a different ng-app based on the page I load.  Since I use a header.php file that includes all the css files, js files, sets up my structure, etc.  Thoughts?

  • 0

Have you tried using a AMD library to manage your dependencies? For example, requirejs. I remember Require.js being a pain in the ass to set up with Angular, but it might solve your problem.

 

You could look at other stand-alone frameworks for view manipulation, like KnockoutJS. I use knockout on a daily basis at work, and it's a nice framework. It has it's quirks, but I like it.

 

Personally, I stopped all Angular development and POC work when the Angular team announced that 2.0 was going to be a complete rewrite of the library, with little-to-no backwards compatibility. I really like Angular, but I'm waiting to see what happens with 2.0. (Yes I know the 1.x branch will continue to live on, but I'd rather wait for now. I'm not a huge fan of the 1.x API)

  • 0
  On 11/05/2015 at 14:50, spacer said:

Have you tried using a AMD library to manage your dependencies? For example, requirejs. I remember Require.js being a pain in the ass to set up with Angular, but it would solve your problem.

 

You could look at other stand-alone frameworks for view manipulation, like KnockoutJS. I use knockout on a daily basis at work, and it's a nice framework. It has it's quirks, but I like it.

 

Personally, I stopped all Angular development and POC work when the Angular team announced that 2.0 was going to be a complete rewrite of the library, with little-to-no backwards compatibility. I really like Angular, but I'm waiting to see what happens with 2.0. (Yes I know the 1.x branch will continue to live on, but I'd rather wait for now. I'm not a huge fan of the 1.x API)

Hmm, I may have to look into that.   I found a way to sort of solve my issue.  I found a thing called ng-module.  Which instead of binding an ng-app in say the html, you can wrap your content in a div, then do like

<div ng-module="davesapp-settings">

  or if you want multiple you could either associate them in the .js file or do 

<div ng-modules="davesapp","davesapp-settings">

See, for the basic site flow I rely on Slim to do the routing.  Then php for building the basic pages using the slim template then includes on the pages.  

require('header.php');

I'm really using angular to clean up my code and make things cleaner moving forward.  Like instead of trying to do a foreach loop with jQuery I can do an ("ng-repeat=blah) and as soon as the object bound in the repeat is populated (http.get) it just does it.  

So I am probably not using Angular to it's full power or capabilities, but it definitely makes the code easier to follow.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I thought router has to have 6 Ghz band to be called wifi-7, guess I was wrong...
    • I have the Pixel 9 Pro XL...Unless this thing is "leaps and bounds" faster than the 9, I'll pass. And by leaps and bounds, I don't mean on benchmarks. "Real world" faster. Most people don't even come close to topping out the performance of their phones. Tensor G5 is Google's most powerful chip to date, boasting a staggering 36 percent performance leap over G4.
    • MIT's stunning 'bubble wrap' device squeezes water out from thin air even in deserts by Sayan Sen Image by Matteo Roman via Pexels Massachusetts Institute of Technology (MIT) engineers have built a new kind of device that can pull clean drinking water straight out of the air—no electricity needed. It’s designed for areas where water is scarce and traditional sources like rivers or lakes aren’t reliable. Right now, more than 2.2 billion people globally don’t have access to safe drinking water. In the United States alone, 46 million face water insecurity, with either no running water or water that’s not safe to drink. This new device, called an Atmospheric Water Harvesting Window (AWHW), uses a unique hydrogel panel that looks like black bubble wrap. These dome-shaped bubbles soak up water vapor from the air, especially at night when humidity is higher. During the day, sunlight makes the vapor inside evaporate. That vapor then condenses on a glass surface and drips down through a tube, turning into drinkable water. The AWHW doesn’t rely on power sources like batteries or solar panels. It’s completely passive, meaning it works on its own. The team tested a meter-sized panel in Death Valley, California, one of the driest places in North America, and got between 57.0 and 161.5 milliliters of water per day even with humidity as low as 21 percent. That’s more than what other similar passive devices have managed. “We have built a meter-scale device that we hope to deploy in resource-limited regions, where even a solar cell is not very accessible,” said Xuanhe Zhao, a professor at MIT. “It’s a test of feasibility in scaling up this water harvesting technology. Now people can build it even larger, or make it into parallel panels, to supply drinking water to people and achieve real impact.” Another cool part of the design is how they kept the water safe to drink. Usually, these kinds of hydrogels use salts like lithium chloride to absorb more vapor but that can lead to salt leaking into the water, which isn’t ideal. To solve this, MIT’s team mixed in glycerol, a compound that helps keep salt locked inside the gel. In testing, the lithium ion concentration in the harvested water stayed below 0.06 ppm (parts per million), which is way below the safe limit. The hydrogel domes also give the material more surface area, letting it collect more vapor. The outer glass panel is coated with a special polymer film that helps cool the glass, making it easier for vapor to condense. “This is just a proof-of-concept design, and there are a lot of things we can optimize,” said lead author Chang Liu, now a professor at the National University of Singapore. “For instance, we could have a multipanel design. And we’re working on a next generation of the material to further improve its intrinsic properties.” Published in Nature Water, the study says the AWHW could last at least a year and shows promise for making safe, sustainable water in places with harsh climates. The researchers believe an array of vertical panels could one day supply water to individual households, especially in remote or off-grid locations. Source: MIT News, Nature This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • Clear Linux is open source, indeed, so its source code is available for anyone. They're just shutting down its support from them, they're not forbidding anyone else from taking over.
    • Linux Mint is also my favorite distro, but I fear what will happen with it if Clem were to disappear tomorrow, to be honest.
  • Recent Achievements

    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
    • Explorer
      cekicen went up a rank
      Explorer
  • Popular Contributors

    1. 1
      +primortal
      505
    2. 2
      ATLien_0
      209
    3. 3
      Michael Scrip
      202
    4. 4
      Xenon
      144
    5. 5
      +FloatingFatMan
      121
  • Tell a friend

    Love Neowin? Tell a friend!