将Angular包含在Hackathon-Starter中

Question

我是一个新手。 我尝试将Angular包含在https://github.com/sahat/hackathon-starter Boilerplate中。 包括我

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

//= require lib/angular

将application.js和两个文件放入lib文件夹中。 尽管如此，该应用程序似乎还没有在Angular上运行。 我做错了什么？ 我在哪里把我的代码用于控制器/指令等？

Answer 1

使用Hackathon-starter-angular（HSA）不回答帖子中提到的问题。 HSA在layout.jade文件中全局包含AngularJS，这可能意味着所有路由都由AngularJS提供，并且这些页面不被谷歌等搜索引擎索引。

将AngularJS包含/注入hackathon-starter的另一个解决方案是在本地进行。 以下是如何执行此操作的步骤：

1）创建一个控制器，该控制器将委托给特定路由上的所有请求。 将控制器放在例如angularEntry.js中

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

2）需要app.js内的控制器

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

3）在视图内部创建一个新文件夹（例如shop），并在其中创建名称（例如index.jade）的新文件。 该文件将作为Angular应用程序的入口点。 在文件中粘贴以下代码：

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）在mini / js中为mini应用程序创建app.js. 对于测试purpases我只是把它放在里面：

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

5）在public / js / lib文件夹中下载angular.js和angular-route.js等库

6）在public / js / application.js中添加对它们的引用，如下所示：

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

7）在public / views文件夹中创建test.html和detailTest.html等测试页面

此时，应该整合Angular。 因此，将客户端控制器/指令放在public / js文件夹中。

Answer 2

有人做了一个包括角色到hackathon-starter的分叉： https ： //github.com/squeezeday/hackathon-starter-angular