How to use Angular JS on Web api result - angularjs

I am just trying to connect MongoDB using Web api.
I followed steps present in
http://www.sunyingroup.com/web2012/mongapi.htm
I confused with step 3, Build Angular JS MVC Pattern .
My question is how/where to add Angularjs script present in the above mentioned website.

Looking into your link example, it uses MVC page but that page is not provided (they provided just the javascript code), but basically you can go with a pure html file where you define your grid to show the data, and add your button. you need to add ng-app directive to body tag of the html file with app named after their module name "CRUD", and include that code into a javascript tag, in the same file for example or separate file.
the following link gives you a starting point of how to use angularjs with API
http://www.codeproject.com/Articles/737030/A-basic-SPA-application-using-AngularJS-WebAPI-and
hope that helps.

Related

AngularJS Routing All Within One HTML page

I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?

How to run a validation check with Ionic

I have written an ionic application and would like to know how(if) i can validate the ionic app. Much like validating HTML with W3C.
Is there any way possible to run a validation check on the app.
I have tried to run the application in the browser and run a google chrome local html validation, however the directives are still visible and haven't been generated to html.
I don't believe there is a way to validate the Ionic HTML in the same way you validate the HTML in W3C validator.
however the directives are still visible and haven't been generated to html
Probably a bit of confusion here.
1. AngularJS directives will always be visible "as is" in the HTML code, they will not transform to anything. It's AngularJS itself to use them in its special way.
2. Ionic components are build with custom HTML tags, which means, for example will not transform to anything else. All Ionic custom tags are defined in ionic.css file.

Sails.js and Angular.js project structure and configuration for non-SPA case

I am starting a side-project based in Sails to try it. Most of the pages are server-side rendered via EJS and don't require javascript on the front-end (my landing page doesn't, my "about" page certainly doesn't etc). However, I have a few pages that have quite a lot client-side functionality and I want to use Angular, because I am mostly familiar with that framework. The routing to these pages is again handled in the server and there's really no meaning in bundling them as a SPA.
So I am trying to wrap my mind around these concerns:
Where to place the Angular app's scripts?
Is /assets/js/dependencies still the proper place? Wouldn't placing them there make the Grunt task inject them in layout.ejs and thus in every page?
How to conditionally load the Angular base and it's components (controllers, services, etc)?
Sails uses views/layout.ejs as a base layout for loading project-wide styles, templates and scripts. Each page's controller handles injecting the body part into this layout according to the view "partial" that has been developed for that page. Is this view "partial" .ejs file the appropriate place to conditionally load the Angular app files in only the pages that require them?
How to add min/conctact/uglify of Angular' script sources in Grunt tasking?
All the Angular related files will need to be concatenated, minified/uglified for production. This will need to be a new js concatenated file to be loaded in appropriate pages apart from the "generic" js file that currently Sails tasks create and is loaded in every page. So we're essentially talking about two concatenated js files for the client side. One that is globally loaded, and the Angular one that only the pages that need it load. Which parts of the build/tasking procedure will require modifications? Some examples or resources to check would be highly useful here.
Where to place the Angular app's scripts?
Is /assets/js/dependencies still the proper place?
No, just put your angular.min.js in your dependencies folder, but not your Angular app's script. You need to put all you Angular app in the assets/js folder ( or in a sub-folder, but not in dependencies )
To be sure that each file of your app will be loaded in the right order (for example you need to load first the Js file which inject your angular app's dependencies), you can modify the tasks/pipeline.js file, and specify the order you want : You need to modify the jsFilesToInject array which contains all the Js files to load in the right order.
For example for your project :
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// loading angularJS
'js/dependencies/angular.min.js',
// all the rest in dependencies
'js/dependencies/**/*.js',
// loading first AngularModule definition
'js/app/app.module.js',
// all the rest of the angular application
'js/app/**/*.js'
];
For your other question I think you need to look at the tasks/config/sails-linker.js file, that inject all the Js scripts in the <!--SCRIPTS--> tags in your HTML code.
I hope that it will help you and that I'm not too late !

What is the recommended approach when using AngularJS with SharePoint WebParts

We have started using AngularJS within some SharePoint WebParts. So far, this has been working really well, however, we noticed that when we started placing more than one AngularJS WebPart onto a WebPart page, only the first WebPart on the page was bootstrapped by AngularJS. The second, or third, one simply didn't function. This is because we set up each WebPart as it's own Module/App in AngularJS. We were able to get around this using a technique described here:
Multiple apps and controllers in the same file
Is this a best practice for using AngularJS within SharePoint WebParts, or is there a better approach?
Steps:
1) Upload the angular JS files at top site collection level.
2) Refer angular JS files in master page.
3) Create a module in master page and refer the same in all the pages(Create separate controllers for each page).
4) Create a html page which has all the display which you want for the web part using angular JS.
5) Add a content editor web part on the page and refer that html page.

How can i add multi web part which used angularjs module?

How can i add multi web part sharepoint which used angularjs module?
I have web part in which i have used angular the problem is when i want to add this web part for several times in a page i don't know how to separate angular modules name? when there is only one web part added in the page it works properly but when there are more than one problem start
i guess i should create dynamic names for modules in server side am i right? is there any other way?
I used angular.bootstrap.
This resource helped me to figure out how to load different angularjs html+js files in 2 different content editor webparts. I also made sure to load angularjs only once on the page.

Resources