Angularjs, how to structure my code across multiple files - angularjs

I'm new to AngularJS and have a question regarding the structure of AngularJS.
Here is a simple working Plunker example I was working on, which displays the map.
So my question is:
how do you separate out <mapbox callback="callback"></mapbox> if I want to create a file in the view folder instead of putting it into app.js?
I have tried creating a show.html file inside of my view folder and pasted that line of code, but it didn't work.
Should I change 'template': '<mapbox callback="callback"></mapbox>' to
templateUrl: 'views/show.html'?
Your help is greatly appreciated.

Yes. I slightly modified your plunker to show how can you can do it.
http://plnkr.co/edit/Fpst5cd6gfIh30eOk447
Basically, what I did there was to create a new html file, name it mapbox.html and paste the html template there from app.js. Afterwards, I edited the app.js config block to use the templateUrl property pointing to the new file above and deleted the template property one, et voilà!

Related

AngularJs - routing between css files

​Hi all..
referring to ngRoute,
i created a single page application but would like to apply different css rules to each sub-page like background image
how can i do that?
i assigned a different controller to each sub-page
and in the link tag i used ng-href and {{name}}.css to tell the browser to grap the correct css file where is name is giving the value of the file name and attached to the scope inside the corresponding controller.
is there a need to use more than one ng-controller ?
here is the view : http://shireefkhatab.github.io/imax-design
and my code : https://github.com/shireefkhatab/imax-design​
hope to get a response
thank you all in advance.
Reefo.
You can include those styles in your template (views) or make separate route for styles, add its view in head section and then change state from your controller using $state.go('where.ever.you.want.to.go');

Vtiger CRM: How I can load modified .tpl file?

I want to load a modified .tpl file vtigercrm\layouts\vlayout\modules\Vtiger\ListViewContents.tpl to a .php file from which I get HTML data after using AJAX and javascript . It's something feasible?
Im assuming that you want to view that template in the DetailView. In that case you can make a widget in module/Vtiger/models/DetailView.php in getWidget(). Just copy paste and change. The link you give here should go to a function in /module/Vtiger/views/Detail.php.
you should add your new function in the constructor.
$this->exposeMethod('Yourfunctionname');
Here you can copy any function and change it. you need to feed your variables to smarty with :
$viewer->assign('SMARTYVARNAME', $phpVar);
to fill the template. And finally you need to referance the template.
echo $viewer->view('tplname.tpl', $moduleName, 'true');
im not able to comment yet so i hope this is enough.

angular sticky notes app not working

1) The following Sticky Notes app is running perfectly under angular v1.0.0
http://jsfiddle.net/simpulton/VJ94U/
but does not run properly( I can't delete a note) under angular v1.4.7
http://jsfiddle.net/nnkcz4ko/
may I know why?
2) This is another problem(not related to the first one):
http://plnkr.co/edit/d3EwL2Jfzcpe84y01pLi?p=preview
in this app I could not figure out from where did the selected property come into existence in the statement ng-show="selected" in file my-pane.html. I can't see a $scope.selected defined anywhere in the code.
PS: I'm fairly new to angular, so a beginner-friendly answer will be much appreciated.
okay, I figured out that in problem 2) the selected property is set directly on the isolated scope, so it can be accessed directly from that scope(i.e. from inside the my-pane directive).

MVC, Render HTML page which includes AngularJS

I have a site build in MVC5 and C#. In this site I have a view (public.cshtml). In this view I have some text and beneith this text I would like to render another view (angular.html). The anguar.html view contains some angular script. How do I render the html page in the cshtml page correctly? Or is it even possible?
I have tried using Partial, RenderPartial and RenderPage but with no succes.
Any help is appreciated! Thanks in advance.
It depends on whether your public.cshtml is "covered" with ngApp or all angular-related stuff is in that "angular.html".
If it's the first, you could use ng-include:
<ng-include src="'/...'"></ng-include>
if it's the latter, you could use #Html.Raw(), like this
#Html.Raw(File.ReadAllText(Server.MapPath("~/...")))
where "..." is your relative path to angular.html.

AngularJS set title and description in head when populating content from JSON

Before I go and do this in Jquery out of frustration I figured I would ask what the angular way is?
I'm building an AngularJS site using a model based of the Phonecat tutorial example on the AngularJS site.
I found this method to set the title of a page and can work out how to modify it to do description as well in the app config but this doesn't work when I'm populating pages with content via json. I tried doing it using a ngbind method as well but have yet to find a working solution as I think something to do with the order in which files are loaded is breaking.
For example
when('/faq', {
templateUrl: 'sub_pages/articles.html',
title: 'Landing page title goes here, not to big a deal'
}).
when('/things-to-do/:activityID', {
templateUrl: 'sub_pages/activity-detail.html',
controller: 'activityDetailCtrl',
title: 'If I put a title here it will be the same on all of these pieces of content'
}).
What method can I use in order to set title on both the landing pages and also the pages which draw their content from a JSON feed?
EDIT - ANSWER BELOW
After about 2 days of bashing my head against a wall trying to work this one out it's actually quite simple and works for both static pages and templates with dynamically loaded content.
Inside the view pages (html that loads inside of ng-view) add a couple of divs (you can put this anywhere really) and then inside them you need to load in ng-init.
ng-init="$root.title = path.to.title"
ng-init="$root.description = path.to.description"
This will set the title and description on the root scope. The "path.to." is just an example path to content in json, you can replace this with plain text as well which is how I deal with landing pages.
Then on the index.html or what ever page your app is based on inside the head you just need to load in.
Your Page Title
This will automatically set your page title and description meta tags and you can pretty much use this formula for any other meta data you need to create.
I haven't tested this yet with Prerender.io or any other cache service but will do some checks and post the results here.
Something like
$document[0].title = "xyz";

Resources