Skip to content
Permalink
Browse files

feat(option): add option angular.bootstrap to bootstrap angular inste…

…ad of using ng-app in spa.html
  • Loading branch information
jyounce committed Jun 8, 2016
1 parent 5b93f80 commit fd430766c54e8f3693e00a93a5adf08a57f4e81d
@@ -152,6 +152,7 @@ package.json
# angular.modules = (array of strings) = additional angular modules to load, already loaded are ['ngResource', 'ngRoute', 'ngSanitize'] and 'ngMockE2E' based on angular.httpBackend options
# angular.moduleName = (string) defaults to 'app' = application module name, value for ng-app
# angular.version = (string) defaults to '1.x' = semver version required
# angular.bootstrap = (boolean or string) defaults to false = bootstrap angular instead of using ng-app in spa.html, provide true to bootstrap on document or provide a css selector to bootstrap on a dom element
# angular.httpBackend.dev = (boolean) defaults to false = set to true to enable httpBackend for dev and default build
# angular.httpBackend.prod = (boolean) defaults to false = set to true to enable httpBackend for prod build
# angular.httpBackend.dir = (string) defaults to 'mocks' = directory inside your client scripts directory
@@ -1,10 +1,24 @@
angular.module('rapid-build').constant 'BUILD_OPTS',
angular:
info: 'for angular 1.x'
opts: [
name: 'version'
info: "@type string, @default '1.x'"
description: [
"The version of angular to load."
"<rb:icon kind=\"fa-exclamation-circle\"></rb:icon>
Currently the build does not support angular 2
out of the box."
]
,
name: 'moduleName'
info: "@type string, @default 'app'"
description: [
"Application module name, value for ng-app in spa.html file."
'Application module name.'
,
'Value for ng-app in
<a href="#spa" rb-scroll>spa.html</a> or angular\'s
<a href="#angular.bootstrap" rb-scroll> bootstrap</a>.'
]
,
name: 'modules'
@@ -18,13 +32,24 @@ angular.module('rapid-build').constant 'BUILD_OPTS',
options."
]
,
name: 'version'
info: "@type string, @default '1.x'"
name: 'bootstrap'
info: "@type boolean or string, @default false"
description: [
"The version of angular to load."
"<rb:icon kind=\"fa-exclamation-circle\"></rb:icon>
Currently the build does not support angular 2
out of the box."
'By default the build initializes angular via
<a target="_blank" href="https://docs.angularjs.org/guide/bootstrap">ng-app</a>
in <a href="#spa" rb-scroll>spa.html</a>.'
'Provide true to use angular\'s
<a target="_blank" href="https://docs.angularjs.org/guide/bootstrap#manual-initialization">bootstrap</a>
method instead.
<ul>
<li>
The build will bootstrap on the document.
</li>
</ul>'
'Or provide a
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector">css selector</a>
<em class="sub parens">string</em> to the dom element to bootstrap.'
'The bootstrap script will load last.'
]
,
name: 'ngFormify'
@@ -73,9 +98,10 @@ angular.module('rapid-build').constant 'BUILD_OPTS',
example: """
{
angular: {
version: '1.5.x',
moduleName: 'rapid-build',
modules: ['ngAnimate'],
version: '1.5.x',
bootstrap: true,
ngFormify: true,
httpBackend: {
dev: true,
@@ -254,8 +280,10 @@ angular.module('rapid-build').constant 'BUILD_OPTS',
description: [
"Set to true to exclude the angular files
from dist/client/ that come with rapid-build."
"Includes: angular lib and angular
<a href=\"#angular.modules\" rb-scroll>modules</a>."
"Includes: angular lib, angular
<a href=\"#angular.modules\" rb-scroll>modules</a>
and angular <a href=\"#angular.bootstrap\" rb-scroll>bootstrap</a>
<em class=\"sub parens\">if set</em>."
]
,
name: 'angular.modules'
@@ -77,7 +77,7 @@ ul.list {
> li {
&::before {
position: absolute;
top: -9px;
top: -12px;
left: -17px;
font-size: 28px;
content: '·';
@@ -97,6 +97,9 @@ ul.list {
margin-bottom: 16px;
li {
margin-bottom: 4px;
> ol, ul {
margin-bottom: 8px;
}
}
}
}
@@ -53,6 +53,7 @@ <h2 class="sub title">Options</h2>
<h3>
<rb:icon kind="fa-cog"></rb:icon>
<span ng-bind="opt"></span>
<em ng-if="!!val.info" ng-bind-html="val.info" class="sub parens"></em>
</h3>
<ul class="list small">
<li ng-repeat="opts in val.opts">
@@ -1,7 +1,8 @@
module.exports = (config, options) ->
path = require 'path'
log = require "#{config.req.helpers}/log"
test = require("#{config.req.helpers}/test")()
path = require 'path'
log = require "#{config.req.helpers}/log"
isType = require "#{config.req.helpers}/isType"
test = require("#{config.req.helpers}/test")()

# default modules
# order matters because of 'ngMockE2E'
@@ -13,6 +14,12 @@ module.exports = (config, options) ->
# ============
angular = {}

# bootstrap
# =========
angular.bootstrap = {}
angular.bootstrap.enabled = if options.angular.bootstrap is null then false else !!options.angular.bootstrap
angular.bootstrap.elm = if isType.string options.angular.bootstrap then options.angular.bootstrap else null

# ng-formify
# ==========
angular.ngFormify = options.angular.ngFormify or false
@@ -5,6 +5,10 @@ module.exports = (config, options) ->
pathHelp = require "#{config.req.helpers}/path"
test = require("#{config.req.helpers}/test")()

# exclude rb files
# ================
angularBootstrap = path.join 'scripts', 'bootstrap.js'

# options helpers
# ===============
get =
@@ -37,7 +41,7 @@ module.exports = (config, options) ->
scripts: []
styles: []
spaFile:
scripts: []
scripts: [angularBootstrap]
styles: []
dist:
client: []
@@ -31,6 +31,12 @@ module.exports = (config) ->
config.src.rb.client.scripts.dir
)

templates.angularBootstrap = getInfo(
'angular-bootstrap.tpl'
'bootstrap.coffee'
config.src.rb.client.scripts.dir
)

templates.clickjacking = getInfo 'clickjacking.tpl'
templates.ngCloakStyles = getInfo 'ng-cloak-styles.tpl'

@@ -8,6 +8,7 @@ module.exports = (config, options) ->
angular.modules = null unless isType.array angular.modules
angular.version = null unless isType.string angular.version
angular.moduleName = null unless isType.string angular.moduleName
angular.bootstrap = null if not isType.boolean(angular.bootstrap) and not isType.string angular.bootstrap
angular.ngFormify = null unless isType.boolean angular.ngFormify
angular.httpBackend = {} unless isType.object angular.httpBackend
angular.httpBackend.dev = null unless isType.boolean angular.httpBackend.dev
@@ -11,6 +11,7 @@ module.exports = (gulp, config) ->

# build
# =====
taskHelp.addTask 'build-angular-bootstrap', '/build/build-angular-bootstrap'
taskHelp.addTask 'build-angular-modules', '/build/build-angular-modules'
taskHelp.addTask 'build-bower-json', '/build/build-bower-json'
taskHelp.addTask 'build-config', '/build/build-config'
@@ -1,5 +1,5 @@
<!doctype html>
<html xmlns:ng="http://angularjs.org" xmlns:app="ignored" ng-app="<!--#include moduleName-->">
<html xmlns:ng="http://angularjs.org" xmlns:app="ignored">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -0,0 +1,37 @@
module.exports = (config, gulp) ->
q = require 'q'
rename = require 'gulp-rename'
template = require 'gulp-template'
promiseHelp = require "#{config.req.helpers}/promise"

# helpers
# =======
getData = ->
data =
elm: config.angular.bootstrap.elm
moduleName: config.angular.moduleName

# API
# ===
api =
runTask: (src, dest, file) ->
defer = q.defer()
data = getData()
gulp.src src
.pipe rename file
.pipe template data
.pipe gulp.dest dest
.on 'end', ->
# console.log 'bootstrap.coffee built'.info
defer.resolve()
defer.promise

# return
# ======
return promiseHelp.get() unless config.angular.bootstrap.enabled
api.runTask(
config.templates.angularBootstrap.src.path
config.templates.angularBootstrap.dest.dir
config.templates.angularBootstrap.dest.file
)

@@ -110,13 +110,22 @@ module.exports = (config, gulp) ->
]).done -> defer.resolve()
defer.promise

addAngularBootstrap = ->
return if config.exclude.default.client.files
return if config.exclude.angular.files
return unless config.angular.bootstrap.enabled
_path = path.join config.dist.rb.client.dir, 'scripts', 'bootstrap.js'
_path = pathHelp.format _path
data.client.scripts.push _path # add last

# API
# ===
api =
runTask: -> # sync
defer = q.defer()
tasks = [
-> buildData()
-> addAngularBootstrap()
-> buildFile data
]
tasks.reduce(q.when, q()).done -> defer.resolve()
@@ -145,6 +145,7 @@ module.exports = (config, gulp) ->
)

moduleName: (content, ph) ->
return content if config.angular.bootstrap.enabled
get.content.attr(
ph
'ng-app'
@@ -12,6 +12,7 @@ module.exports = (config, gulp, taskOpts={}) ->
"#{config.rb.prefix.task}build-bower-json"
"#{config.rb.prefix.task}bower"
"#{config.rb.prefix.task}build-angular-modules"
"#{config.rb.prefix.task}build-angular-bootstrap"
[
"#{config.rb.prefix.task}copy-bower_components"
"#{config.rb.prefix.task}copy-css"
@@ -0,0 +1,12 @@
# Angular Bootstrap
# =================
do ->
return if typeof angular is 'undefined'
<% if (!!elm) { %>
elm = document.querySelector '<%= elm %>'
angular.element(elm).ready ->
angular.bootstrap elm, ['<%= moduleName %>']
<% } else { %>
angular.element(document).ready ->
angular.bootstrap document, ['<%= moduleName %>']
<% } %>

0 comments on commit fd43076

Please sign in to comment.
You can’t perform that action at this time.