包括角成黑客马拉松起动 [英] Include Angular into Hackathon-Starter

问题描述

我是相当新手。我尝试包括角到 https://github.com/sahat/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

到的application.js和两个文件到lib文件夹。
尽管如此，应用程序似乎并没有对角工作呢。我该怎么办错了吗？我在哪里把我的code为控制器/指令等。

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

推荐答案

使用黑客马拉松起动-angular（HSA）不回答这是在帖子中提到的问题。 HSA包括在layout.jade文件全球AngularJS这可能意味着所有路由都用AngularJS供应，这些网页不会像谷歌搜索引擎索引。

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.

另一种解决方案，包括/注入AngularJS到黑客马拉松起动是在本地做。下面是步骤，如何做到这一点：

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

1）创建一个控制器，将委托给一个angularjs特定路线上的所有请求。将里面例如控制器angularEntry.js

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）要求内app.js控制器

2) Require the controller inside app.js

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

3）创建内部意见（例如店铺一个新文件夹），并在里面创建新的文件的名称（例如index.jade）。该文件将作为一个切入点角应用。粘贴文件里面以下code：

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）为迷你应用程序创建公共/ JS里面app.js。对于测试purpases我只是把它里面的：

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）下载库，例如angular.js和角route.js内的公共/ JS / lib文件夹

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

6）加入公共/ JS对它们的引用/ application.js中如下：

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

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

7）创建测试页一样的test.html和detailTest.html内的公共/ views文件夹

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

此时，角应综合。所以，把你的客户端控制器/指令内的公共/ JS文件夹中。

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

这篇关于包括角成黑客马拉松起动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！