CODEWITHSUNDEEP
angularjsexpresspug
Dribel
Dribel

Reputation: 495

Include Angular into Hackathon-Starter

I'm quite a newbie. I try to include Angular into the https://github.com/sahat/hackathon-starter Boilerplate. I included 

//= require lib/ui-bootstrap-tpls-0.11.0

//= require lib/angular

into the application.js and the two files into the lib folder. Still, the app does not seem to work on Angular yet. What do I do wrong? Where do I put my code for controllers/directives etc.?

Upvotes: 1

Views: 1418

Answers (2)

burseaner
burseaner

Reputation: 905

Using Hackathon-starter-angular (HSA) doesn't answer questions which were mentioned in the post. HSA includes AngularJS globally in the layout.jade file which might mean that all routes are served by AngularJS and those pages are not indexed by search engines like google.

Another solution to include/inject AngularJS into hackathon-starter is to do it locally. Here are steps how to do it:

1) Create a controller which will delegate to angularjs all requests on a particular route. Place the controller inside e.g. angularEntry.js 

exports.getPagesServedByAngular = function (req, res) {
    res.render('shop/index', {
        title: 'Entry point to AngularJS pages'
    });
};

2) Require the controller inside app.js

// reference the controller
var angularPagesController = require('./controllers/angular');
// use it
app.get('/shop', angularPagesController.getPagesServedByAngular);

3) Create a new folder inside views (e.g. shop) and create the new file inside it with the name (e.g. index.jade). This file will serve as an entry point for Angular application. Paste inside the file the following code:

extends ../layout
block content 
  .page-header
    h3 Services
    body(data-ng-app='miniApp')    
    p first test expression from views/index.jade: {{ 5 + 5 }}
    div(data-ng-view)

4) Create app.js inside public/js for the mini application. For test purpases I just put inside it:

angular.module('miniApp', ['ngRoute']);
angular.module('miniApp').config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/test.html'
        })
        .when('/detailTest', {
            templateUrl: 'views/detailTest.html'
        })
});

5) Download libraries like angular.js and angular-route.js inside public/js/lib folder

6) Add references to them in public/js/application.js as following:

//= require lib/angular
//= require lib/angular-route
//= require app

7) Create test pages like test.html and detailTest.html inside public/views folder

At this point, Angular should be integrated. So, put your client-side controllers/directives inside public/js folder.

Upvotes: 2

ajma
ajma

Reputation: 12206

Someone make a fork that includes angular into hackathon-starter: https://github.com/squeezeday/hackathon-starter-angular

Upvotes: 1

Related Questions