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提供，并且这些页面不会被google等搜索引擎索引。

将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）在public / js中为迷你应用程序创建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

将Angular包含在Hackathon-Starter中

2 个答案: