Wrap Angular App in a jQuery function

Question

I am writing an AngularJS App for a system based on jQuery. Each app needs to be initiated with the code below.

How do I get this to work with my AngularJS code?

I have tried to include my entire Angular app within the function appStart(), but that doesn't work. Any ideas on how to solve this?

Init JS:

(function () {
    function appStart() {
}

function genericError() {
    console.error('Something went wrong');
}

TT.native.init()
.done(appStart)
.fail(genericError);
})();

My AngularJS app:

var app = angular.module('myApp', ['ui.sortable', 'ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/specs');

    $stateProvider
    .state('specs', {
        url: '/specs',
        templateUrl: 'specs.html',
        controller: 'SpecsController'
    })
    .state('editSp...

Try angular.bootstrap(angular.element("body")[0], ['MyApplication']); — Manuel Mazzuola
– Manuel Mazzuola, Commented Oct 7, 2014 at 13:00

Lowe Bäckström · Accepted Answer · 2014-10-07 13:07:54Z

2

Long time since I used it but this should work. It's a manual bootstrap of Angular so no ng-app in your index file.

(function () {
    $(document).ready(function () {
        if (TT) {
            TT.native.init().done(function () {
                angular.bootstrap(document, ['myTickTailApp']);
            }).fail(function () {
                // Error handling if TickTail fails to init ...
            });
        } else {
            throw new Error('Cannot start app, tt.js not loaded');
        }
    });
})();

answered Oct 7, 2014 at 13:07

Lowe Bäckström

4392 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

peta Over a year ago

Thanks! Would I place the entire Angular app inside the function appStart? or just that first line? where do I place the rest of the code then? Is it possible to keep the structure of the Tictail code as in my example? There is a possibility they will not approve the app otherwise.

Zlatko Over a year ago

You place the angular function in a separate file, like a regular app, but you don't put ng-app anywhere on the document. The angular.bootstrap() does that part for you manually (and when everything is loaded).

Lowe Bäckström Over a year ago

Put up some code on Github you might be able to use, or look at to get an idea: github.com/lowebackstrom/tictail-angular-boilerplate

peta Over a year ago

Brilliant! Thanks a lot. Very useful! Do I simply need the whole package or what code is needed for a fully functional native app, with authorization and so on?

Lowe Bäckström Over a year ago

Happy to help! The whole package gives you authorization and persistence of user data on your own backend. The server part is not necessary but removing it means rewriting some of the handshake logic in app.js. You do need mongodb and redis running on your local machine to run. When in production I used Heroku for both native and server. While developing put in localhost:9000 as URL for your app in TicTail and "run secure code" when starting through TT dev.

|

loddn · Accepted Answer · 2014-10-07 13:03:14Z

0

You can call angular.bootstrap(document, ['app']); if you want to manually initiate angular. You have to remove the ng-app-directive for this to work.

https://docs.angularjs.org/guide/bootstrap

answered Oct 7, 2014 at 13:03

loddn

6581 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Wrap Angular App in a jQuery function

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related