1

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.?

Hamid Pourjam
  • 20,441
  • 9
  • 58
  • 74
Dribel
  • 465
  • 1
  • 10
  • 24
  • `// some text` is a comment, and will be ignored by the compiler. – Almo Jun 09 '14 at 13:48
  • I know. However, the documentation on the hackathon-starter says that one has to do it like this. – Dribel Jun 09 '14 at 13:58
  • Oooh appears to be some weird Rails thing! – Almo Jun 09 '14 at 14:00
  • I just wanna get some real world practice in Angular beyond the basic stuff. But I am confused with all the Express/Node.js etc.... – Dribel Jun 09 '14 at 14:02
  • I really recommend doing other things than this hackathon thing to learn to program if you're just starting out. – Almo Jun 09 '14 at 14:10

2 Answers2

2

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.

burseaner
  • 885
  • 2
  • 17
  • 28
1

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

ajma
  • 12,106
  • 12
  • 71
  • 90