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

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/24121182/include-angular-into-hackathon-starter

标签

angularjs

express

pug