├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .firebaserc ├── .gitignore ├── .travis.yml ├── README.md ├── bin └── compile.js ├── browser-sync.js ├── config └── default.js ├── dist ├── 200.html ├── angular-2 │ ├── img │ │ └── angular.svg │ └── index.html ├── angularjs │ ├── img │ │ └── angularjs.png │ └── index.html ├── app.css ├── app.js ├── assets │ └── img │ │ ├── angular.svg │ │ └── angularjs.png ├── build.js ├── build.js.map ├── components │ ├── site-footer │ │ ├── img │ │ │ └── angular-shield.png │ │ └── site-footer.html │ └── site-header │ │ ├── img │ │ └── logo.png │ │ └── site-header.html ├── config.js ├── favicon.ico └── index.html ├── firebase.json ├── index.js ├── karma.conf.js ├── lib └── logger │ └── index.js ├── package.json └── src ├── 200.jade ├── _build ├── bootstrap.less ├── cards.less ├── homepage.less ├── lists.less ├── mixins.less ├── page-header.less ├── sections.less └── variables.less ├── _includes ├── head.jade └── site-footer.jade ├── _karma-before-each.js ├── _layout.jade ├── angular-2 ├── _build │ └── angular-2.less ├── img │ └── angular.svg └── index.jade ├── angularjs ├── _build │ └── angularjs.less ├── img │ └── angularjs.png └── index.jade ├── app.js ├── app.less ├── assets └── img │ ├── angular.svg │ └── angularjs.png ├── build.js ├── build.js.map ├── components ├── site-footer │ ├── _build │ │ └── site-footer.less │ ├── img │ │ └── angular-shield.png │ └── site-footer.jade └── site-header │ ├── _build │ └── site-header.less │ ├── img │ └── logo.png │ └── site-header.jade ├── config.js ├── favicon.ico └── index.jade /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.jade] 12 | indent_size = 4 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/_jspm_packages/**/* 2 | src/build.js 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | parser: babel-eslint 2 | eslint inrules: 3 | indent: 4 | - 2 5 | - 4 6 | quotes: 7 | - 2 8 | - single 9 | linebreak-style: 10 | - 2 11 | - unix 12 | semi: 13 | - 2 14 | - always 15 | rules: 16 | no-unused-vars: 17 | - 0 18 | no-console: 19 | - 0 20 | globals: 21 | inject: true 22 | env: 23 | es6: true 24 | browser: true 25 | mocha: true 26 | jasmine: true # make sure 'expect' is understood 27 | extends: 'eslint:recommended' 28 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "angularcodereview" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore editor stuff 2 | .idea 3 | 4 | # Ignore OS stuff 5 | .DS_Store 6 | 7 | # Ignore jspm stuff 8 | _jspm_packages 9 | 10 | # Ignore node stuff 11 | node_modules/ 12 | npm-debug.log 13 | libpeerconnection.log 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | before_script: 5 | - npm install -g jspm 6 | - npm install -g surge 7 | - npm install -g firebase-tools 8 | - npm install 9 | - jspm install -y 10 | - npm run build 11 | - npm run compile 12 | after_success: 13 | - npm run ci-deploy-to-surge 14 | - npm run ci-deploy-to-firebase 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Code Review 2 | 3 | Welcome to the public repository of [angularcodereview.com](http://angularcodereview.com/). 4 | 5 | [![angularcodereview](https://cloud.githubusercontent.com/assets/1859381/15802364/7cc7a72a-2aaf-11e6-9d93-ba3fcfb94292.png)](http://angularcodereview.com/) 6 | 7 | ## How to contribute 8 | 9 | Want to add or change items in the code review checklists? Awesome! 10 | 11 | Here's the best way to contribute: 12 | 13 | 1. [Create a new issue](https://github.com/jvandemo/angularcodereview-com/issues/new) to discuss the changes you would like to see 14 | 2. Create a PR referencing the issue your PR is tackling 15 | 16 | Quick links to the checklist source code: 17 | - [src/angularjs/index.jade](src/angularjs/index.jade) 18 | - [src/angular-2/index.jade](src/angular-2/index.jade) 19 | 20 | ## How to run the website locally on your machine 21 | 22 | First install all dependencies: 23 | 24 | ```bash 25 | $ npm install -g jspm 26 | $ npm install 27 | $ jspm install 28 | ``` 29 | 30 | To start the Angular Express server: 31 | 32 | ```bash 33 | $ node index.js 34 | ``` 35 | 36 | then navigate to: `:9000` in your browser. 37 | 38 | ## How the code works 39 | 40 | For more details about the technical details, check out the [Angular Express boilerplate documentation](https://github.com/ngx-boilerplates/default). 41 | 42 | ## How to deploy 43 | 44 | The repository is configured with [Travis CI](https://travis-ci.org) to automatically deploy updates to [Firebase hosting](https://www.firebase.com). 45 | 46 | To deploy manually: 47 | 48 | ```bash 49 | $ npm run deploy 50 | ``` 51 | 52 | ## Change log 53 | 54 | ### v0.1.0 55 | 56 | - Initial version 57 | -------------------------------------------------------------------------------- /bin/compile.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var fse = require("fs-extra"); 4 | var harp = require('harp'); 5 | var path = require('path'); 6 | 7 | /************************************************************************** 8 | * Define paths 9 | *************************************************************************/ 10 | 11 | var root = path.resolve(__dirname, '..'); 12 | var sourcePath = path.resolve(root, 'src'); 13 | var destPath = path.resolve(root, 'dist'); 14 | 15 | /************************************************************************** 16 | * No need to touch anything below 17 | *************************************************************************/ 18 | 19 | console.log("Compiling, please wait..."); 20 | console.log(" source: %s", sourcePath); 21 | console.log(" destination: %s", destPath); 22 | 23 | // First remove existing destination directory 24 | fse.removeSync(destPath); 25 | 26 | harp.compile(sourcePath, destPath, function(err, output){ 27 | 28 | if(err) { 29 | abort(err); 30 | } 31 | 32 | var srcPackages = path.resolve(sourcePath, '_jspm_packages'); 33 | var destPackages = path.resolve(destPath, '_jspm_packages'); 34 | 35 | fse.stat(srcPackages, function(err, stats){ 36 | 37 | if (err) { 38 | console.log('Skipped package: %s not found', srcPackages); 39 | return done(); 40 | } 41 | 42 | console.log("Copying _jspm_packages"); 43 | console.log(" source: %s", srcPackages); 44 | console.log(" destination: %s", destPackages); 45 | 46 | fse.mkdirs(destPackages, function (err) { 47 | 48 | if(err) { 49 | return abort(err); 50 | } 51 | 52 | fse.copy(srcPackages, destPackages, function (err) { 53 | if (err) { 54 | return abort(err); 55 | } 56 | 57 | done(); 58 | }); 59 | 60 | }); 61 | 62 | }); 63 | 64 | }); 65 | 66 | function done(){ 67 | console.log("Successfully compiled to %s", destPath); 68 | } 69 | 70 | function abort(err){ 71 | // console.log(JSON.stringify(err, null, 2)); 72 | console.error(err.message); 73 | console.error('Compilation aborted'); 74 | } 75 | -------------------------------------------------------------------------------- /browser-sync.js: -------------------------------------------------------------------------------- 1 | var browserSync = require('browser-sync'); 2 | var reload = browserSync.reload; 3 | var chokidar = require('chokidar'); 4 | 5 | chokidar 6 | .watch('src/**/*.less', { 7 | ignored: [ 8 | 'src/_jspm_packages/**/*' 9 | ] 10 | }) 11 | .on('all', function (event, path) { 12 | reload("app.css", { 13 | stream: true 14 | }); 15 | }); 16 | 17 | chokidar 18 | .watch('src/**/*.jade', { 19 | ignored: [ 20 | 'src/_jspm_packages/**/*' 21 | ] 22 | }) 23 | .on('all', function (event, path) { 24 | reload(); 25 | }); 26 | 27 | browserSync({ 28 | proxy: "localhost:9000", 29 | open: true, 30 | notify: { 31 | styles: ['opacity: 0', 'position: absolute'] 32 | } 33 | }); 34 | -------------------------------------------------------------------------------- /config/default.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | server: { 4 | 5 | // Whether or not to serve files starting with _ 6 | serveUnderscores: true, 7 | 8 | // Absolute path or relative to the repository root 9 | appRoot: 'src/', 10 | 11 | // Port to listen on 12 | port: 9000 13 | }, 14 | 15 | // Logger configuration 16 | logger: { 17 | 18 | // combined | common | dev | short | tiny 19 | format: 'combined' 20 | } 21 | 22 | }; 23 | -------------------------------------------------------------------------------- /dist/200.html: -------------------------------------------------------------------------------- 1 | Angular Code Review

Code Review Checklists

Collection of free checklists you can use to perform a code review of your Angular application.

AngularJS 1.x
Angular 2
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /dist/angular-2/img/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dist/angular-2/index.html: -------------------------------------------------------------------------------- 1 | Angular Code Review

Angular 2

Code Review Checklist

Coming soon

Want to receive a notification when the Angular 2 checklist is available?

Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /dist/angularjs/img/angularjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/dist/angularjs/img/angularjs.png -------------------------------------------------------------------------------- /dist/angularjs/index.html: -------------------------------------------------------------------------------- 1 | Angular Code Review

AngularJS 1.x

Code Review Checklist

Checklist you can use when you need to perform a code review of an AngularJS 1.x application.

Based on best-practices and recommendations by

@angularjs, @mgechev, @ToddMotto, @John_Papa, @Thoughtram and @jvandemo
Code style
1
Is all code intention-revealing?
What?
All code should be easy to understand for other developers
Why?
To make sure the code can be updated, refactored and maintained by others if needed
2
Is all code linted/hinted?
What?
All code should be syntactically correct
Why?
To avoid unpredictable errors
Links
http://jshint.com
http://eslint.org/
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#js-hint
3
Is `controller as` syntax used?
What?
Use controllerAs
Use bindToController
Why?
Avoid pitfalls from scope soup
Target outer scopes easily from within inner scopes
Links
https://toddmotto.com/digging-into-angulars-controller-as-syntax/
http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html
4
Is DOM manipulation handled only by directives?
What?
DOM manipulation should only happen in directives
Use the element available in the directive compile and link function to manipulate the DOM
No DOM manipulation from controllers or services
Why?
Angular is declarative with directives attached to elements. The directive then provides access via the compile or link element to this DOM element
Links
https://github.com/mgechev/angularjs-style-guide#directives
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y072
5
Are names prefixed with `$ ` avoided?
What?
Names of variables, properties and methods should not start with $
Why?
The $ prefix is reserved for AngularJS internals
Links
https://google.github.io/styleguide/angularjs-google-style.html
https://github.com/mgechev/angularjs-style-guide#others
6
Is direct use of globals avoided?
What?
Create services to wrap globals
Use dependency injection to inject global wrappers
Why?
Prevents unpredictable application behavior when global is not available
Easier to test: allows you to mock global
Links
http://jvandemo.com/how-to-properly-integrate-non-angularjs-libraries-in-your-angularjs-application/
https://github.com/mgechev/angularjs-style-guide#others
7
Are AngularJS specific directives put after standard attributes in templates?
What?
Put AngularJS specific directives after standard attributes
Why?
Easier to read and maintain your code
Links
https://github.com/mgechev/angularjs-style-guide#markup
8
Are built-in AngularJS dependencies injected before custom ones?
What?
Inject built-in AngularJS dependencies before customer ones
Example: function($rootScope, $timeout, MyDependency)
Why?
Easier to read and maintain your code
Links
https://github.com/mgechev/angularjs-style-guide#markup
9
Are modules named correctly?
What?
lowerCamelCase
Example: myApp
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y020
10
Are controllers named correctly?
What?
UpperCamelCase + Ctrl or UpperCamelCase + Controller
Example: MyCtrl or MyController
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y124
11
Are directives named correctly?
What?
lowerCamelCase
Example: myDirective
Use scope instead of $scope in link function
Use custom prefix to prevent name collisions with third-party libraries
Don’t use ng prefix as it is reserved for AngularJS
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y073
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y126
12
Are filters named correctly?
What?
lowerCamelCase
Example: myFilter
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
13
Are services named correctly?
What?
lowerCamelCase
Example: myService
UpperCamelCase if service is a Constructor
Example: MyContrstructorClassService
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y125
14
Are factories named correctly?
What?
lowerCamelCase
Example: myFactory
Why?
Naming convention
Links
https://github.com/mgechev/angularjs-style-guide#naming-conventions
15
Are built-in AngularJS directives used whenever possible?
What?
Use ng-src instead of src, ng-hrefinstead of href, ng-styleinstead of style, etc. when dynamic values are passed
Why?
They make sure markup remains valid, even when expression value is not available yet
They are well-written and tested
Links
https://github.com/mgechev/angularjs-style-guide#templates
16
Are built-in AngularJS services used whenever possible?
What?
Use $ services provided by AngularJS whenever possible
Examples: $timeout, $interval, $http, …
Why?
These services are designed to work well with the $digest cycle
They are well-written and tested
Links
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#angular--wrapper-services
17
Is ng-cloak used to prevent content from flashing
What?
Use ng-cloak to initially hide elements that are only visible under certain conditions
Why?
Prevents content flashing when page is loaded
Links
https://github.com/mgechev/angularjs-style-guide#templates
18
Is console.log() avoided?
What?
use $log service
use $log.debug() to write debug messages to the console
Why?
allows you to turn off debug logging in production
Links
https://docs.angularjs.org/api/ng/service/$log
19
Is code minification safe?
What?
Use array notation or $inject notation or use ng-annotate
Why?
Code will break when minified if not written in a way that supports minification
Links
https://docs.angularjs.org/guide/di
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#manual-annotating-for-dependency-injection
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#minification-and-annotation
Architecture
1
Is there a component-driven structure?
What?
Group scripts, markup and styles by feature
Why?
Components can easily be removed
Locating related files is easy
Links
https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
https://github.com/mgechev/angularjs-style-guide#directory-structure
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y120
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y152
2
Do directives communicate correctly?
What?
Never rely on scope inheritance e.g. $scope.$parent
Use directive controllers and require to let directives communicate
Why?
The scope hierarchy may change, breaking your code
Links
https://docs.angularjs.org/guide/directive
https://toddmotto.com/directive-to-directive-communication-with-require/
3
Is business logic defined in services?
What?
Business logic should be defined in services, not in controllers
Why?
Business logic is centralized and reusable
Services are really easy to test
Links
https://github.com/mgechev/angularjs-style-guide#services
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y035
4
UI-Router: has a default route been configured?
What?
Use $urlRouterProvider.otherwise() to specify the default route in case no route definition matches the request
Why?
To gracefully handle requests that do not match to a route definition
Links
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
5
ngRoute: has a default route been configured?
What?
Use $routerProvider.otherwise() to specify the default route in case no route definition matches the request
Why?
to gracefully handle requests that do not match to a route definition
Links
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
6
ngRoute: are route errors handled properly?
What?
use a $routeChangeError event listener to handle routing errors
Why?
To gracefully handle routing errors
Links
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y112
7
UI-Router: are state change errors handled properly?
What?
use a $stateChangeError event listener to handle routing errors
Why?
to gracefully handle errors that occur during state transition (e.g. when a resolve fails)
Links
https://github.com/angular-ui/ui-router/wiki#state-change-events
8
Are exceptions handled properly?
What?
decorate the $exceptionHandler service to handle uncaught exceptions
Why?
To gracefully handle uncaught exceptions
Links
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y110
9
Are resolves used where needed?
What?
Use the resolve property of a route or state to load content that is immediately required in the view
Why?
Make sure content is loaded before view is shown
Prevent content flashing
Links
https://github.com/mgechev/angularjs-style-guide#routing
http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/
http://www.jvandemo.com/how-to-resolve-application-wide-resources-centrally-in-angularjs-with-ui-router/
https://toddmotto.com/resolve-promises-in-angular-routes/
https://johnpapa.net/route-resolve-and-controller-activate-in-angularjs/
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y081
Security
1
Is Strict Contextual Escaping enabled?
What?
Make sure SCE is enabled
Use $sce service to explicitly tell AngularJS which content can be marked as safe for a context
As of version 1.2, AngularJS ships with SCE enabled by default.
Why?
To deal with content that can not be trusted
With SCE disabled, your application allows a user to render arbitrary data creating security vulnerabilities
Links
https://docs.angularjs.org/api/ng/service/$sce
2
UI-Router: are private parts of application properly protected?
What?
Use border states to protect private areas in your application
Use $stateChangeStart event handler to control access
Why?
To restrict access to private areas in your application
To make sure the states cannot be accessed by guessing the url's
Links
http://jvandemo.com/how-to-use-areas-and-border-states-to-control-access-in-an-angular-application-with-ui-router/
3
Is there a server-side template engine involved?
What?
Don't use a server-side template engine for building angular templates
Why?
XSS prevention of the server-side template don't avoid injection of angular expressions
Violation of this rule can result in a XSS vulnerability
This issue is called "client-side template injection"
Links
https://docs.angularjs.org/guide/security
https://portswigger.net/knowledgebase/issues/details/00200308_clientsidetemplateinjection
4
Is user input used for template generation or in watch expressions?
What?
User input must not be used for template generation: $compile, $parse and $interpolate
User input must not be used for expressions inside the following functions: watches, $eval, $apply and not in the orderBy pipe
Why?
Violation of this rule can result in a XSS vulnerability
Links
https://docs.angularjs.org/guide/security
Accessibility
1
Is ngAria included?
What?
Include the ngAria module as a dependency
Why?
To convey state or semantic information about the application for users of assistive technologies, such as screen readers
Links
https://docs.angularjs.org/api/ngAria
Performance
1
Are scripts at bottom of the document?
What?
<script> elements should be as low as possible in document
Why?
Improves initial rendering speed
Links
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
https://github.com/mgechev/angularjs-style-guide#markup
2
Are styles in HEAD?
What?
Stylesheets should be in the document <head>
Why?
Improves initial rendering speed
Links
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html
https://github.com/mgechev/angularjs-style-guide#markup
3
Is expensive logic avoided in filters?
What?
Filter logic should be lightweight
Why?
Filters are called often during $digest loop so if they are slow, they will slow down your application
Links
https://github.com/mgechev/angularjs-style-guide#filters
https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y420
4
Is filtering logic handled in controller if needed?
What?
Filtering can be done in controller if the result is not affected by every $digest cycle
Why?
To control manually when the filter should run instead of with every $digest cycle
Links
https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/
5
Are expensive operations cached?
What?
Cache operations that are expensive (e.g. CPU or bandwidth intensive)
Why?
Optimizes speed by avoiding repetition of expensive operation
6
Are complex expressions avoided in templates?
What?
Complex logic should be handled in controller or service
Why?
View expressions are evaluated many times during $digest cycles
Putting the logic in a controller or services allows you to cache the result
Links
https://github.com/mgechev/angularjs-style-guide#templates
7
Is one-time binding used where possible?
What?
Use {{ :: expression }} for content that does not change after initialization
Why?
AngularJS will stop watching the expression as soon as it evaluates to a non-null value
Links
https://docs.angularjs.org/guide/expression
http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html
http://www.bennadel.com/blog/2760-one-time-data-bindings-for-object-literal-expressions-in-angularjs-1-3.htm
8
Is logic in watchers kept as simple as possible?
What?
Keep computations in $watch as simple as possible
Example: watch data.property instead of deep watching data
Why?
Watchers are evaluated many times during $digest cycles so keeping them fast results in better performance
Links
https://github.com/mgechev/angularjs-style-guide#performance
9
Is $watchCollection used instead of deep watch where possible?
What?
Use $watchCollection instead of a deep watch for collections
Why?
$watchCollection performs a shallow equality check of the result of the watched expression and its previous value, resulting in better performance
Links
https://github.com/mgechev/angularjs-style-guide#performance
https://docs.angularjs.org/guide/scope
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection
10
Is `$applyAsync` used when possible?
What?
Use $scope.$applyAsync()
Configure $httpProvider to use $applyAsync: $httpProvider.useApplyAsync(true);
Why?
To reduce number of $digest cycles when expressions are evaluated around the same time
Links
https://code.angularjs.org/1.3.8/docs/api/ng/type/$rootScope.Scope#$applyAsync
http://blog.thoughtram.io/angularjs/2015/01/14/exploring-angular-1.3-speed-up-with-applyAsync.html
11
Do timers skip `$digest` cycle when possible?
What?
Pass false as third parameter to $timeout when no watched variables are impacted by its callback
Why?
To skip unnecessary $digest cycles
Links
https://github.com/mgechev/angularjs-style-guide#performance
https://docs.angularjs.org/api/ng/service/$timeout
12
Are resources cleaned up when scope is destroyed?
What?
use $scope.$on(‘$destroy’, fn) to clean up resources such as timers and intervals
Why?
resources that are not cleaned up can chew up memory and CPU
every time the scope is recreated (e.g. when page is visited again and again) the problem grows bigger
Links
https://docs.angularjs.org/guide/directive
http://odetocode.com/blogs/scott/archive/2013/07/16/angularjs-listening-for-destroy.aspx
https://github.com/mgechev/angularjs-style-guide#directives
http://www.bennadel.com/blog/2723-unbinding-scope-on-event-handlers-in-angularjs.htm
http://www.bennadel.com/blog/2548-don-t-forget-to-cancel-timeout-timers-in-your-destroy-events-in-angularjs.htm
13
Are templates bundled with main JavaScript file?
What?
Bundle your templates with your scripts using tools like grunt-html2js or gulp-html2js
Why?
Reduce number of network requests, especially when a large number of templates needs to be downloaded
Links
https://github.com/mgechev/angularjs-style-guide#performance
https://github.com/karlgoldstein/grunt-html2js
https://github.com/fraserxu/gulp-html2js
14
Is ngModelOptions used where possible?
What?
Use ngModelOptions to manually control when $digest cycle should run
Why?
To prevent unnecessary $digest cycles
Links
https://docs.angularjs.org/api/ng/directive/ngModelOptions
https://toddmotto.com/super-fast-angular-ng-model-options-limit-digest-cycles/
http://blog.thoughtram.io/angularjs/2014/10/19/exploring-angular-1.3-ng-model-options.html
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/dist/app.js -------------------------------------------------------------------------------- /dist/assets/img/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dist/assets/img/angularjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/dist/assets/img/angularjs.png -------------------------------------------------------------------------------- /dist/build.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(e){for(var r=[],t=0,n=e.length;n>t;t++)-1==f.call(r,e[t])&&r.push(e[t]);return r}function t(e,t,n,o){if("string"!=typeof e)throw"System.register provided no module name";var l;l="boolean"==typeof n?{declarative:!1,deps:t,execute:o,executingRequire:n}:{declarative:!0,deps:t,declare:n},l.name=e,e in p||(p[e]=l),l.deps=r(l.deps),l.normalizedDeps=l.deps}function n(e,r){if(r[e.groupIndex]=r[e.groupIndex]||[],-1==f.call(r[e.groupIndex],e)){r[e.groupIndex].push(e);for(var t=0,o=e.normalizedDeps.length;o>t;t++){var l=e.normalizedDeps[t],a=p[l];if(a&&!a.evaluated){var i=e.groupIndex+(a.declarative!=e.declarative);if(void 0===a.groupIndex||a.groupIndex=0;l--){for(var i=t[l],u=0;uo;o++){var a=t.importers[o];if(!a.locked){var i=f.call(a.dependencies,t);a.setters[i](n)}}return t.locked=!1,r});if(t.setters=o.setters,t.execute=o.execute,!t.setters||!t.execute)throw new TypeError("Invalid System.register form for "+r.name);for(var i=0,d=r.normalizedDeps.length;d>i;i++){var u,v=r.normalizedDeps[i],g=p[v],m=c[v];m?u=m.exports:g&&!g.declarative?u=g.module.exports&&g.module.exports.__esModule?g.module.exports:{"default":g.module.exports,__useDefault:!0}:g?(a(g),m=g.module,u=m.exports):u=s(v),m&&m.importers?(m.importers.push(t),t.dependencies.push(m)):t.dependencies.push(null),t.setters[i]&&t.setters[i](u)}}}function i(e){var r,t=p[e];if(t)t.declarative?u(e,[]):t.evaluated||d(t),r=t.module.exports;else if(r=s(e),!r)throw new Error("Unable to load dependency "+e+".");return(!t||t.declarative)&&r&&r.__useDefault?r["default"]:r}function d(r){if(!r.module){var t={},n=r.module={exports:t,id:r.name};if(!r.executingRequire)for(var o=0,l=r.normalizedDeps.length;l>o;o++){var a=r.normalizedDeps[o],u=p[a];u&&d(u)}r.evaluated=!0;var s=r.execute.call(e,function(e){for(var t=0,n=r.deps.length;n>t;t++)if(r.deps[t]==e)return i(r.normalizedDeps[t]);throw new TypeError("Module "+e+" not declared as a dependency.")},t,n);s&&(n.exports=s)}}function u(r,t){var n=p[r];if(n&&!n.evaluated&&n.declarative){t.push(r);for(var o=0,l=n.normalizedDeps.length;l>o;o++){var a=n.normalizedDeps[o];-1==f.call(t,a)&&(p[a]?u(a,t):s(a))}n.evaluated||(n.evaluated=!0,n.module.execute.call(e))}}function s(e){if(v[e])return v[e];var r=p[e];if(!r)throw"Module "+e+" not present.";o(e),u(e,[]),p[e]=void 0;var t=r.module.exports;return(!t||!r.declarative&&t.__esModule!==!0)&&(t={"default":t,__useDefault:!0}),v[e]=t}var p={},f=Array.prototype.indexOf||function(e){for(var r=0,t=this.length;t>r;r++)if(this[r]===e)return r;return-1},c={},v={};return function(r,n){var o,o={register:t,get:s,set:function(e,r){v[e]=r},newModule:function(e){return e},global:e};o.set("@empty",{}),n(o);for(var l=0;lAngular Code Review

Never miss an update

Subscribe to the mailing list and receive a quick note when something was added or updated:

Want to contribute?

Do you feel something should be added or updated? Get involved now and help improve the checklists.

GitHub
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub

Never miss an update

Subscribe to the mailing list and receive a quick note when something was added or updated:

Want to contribute?

Do you feel something should be added or updated? Get involved now and help improve the checklists.

GitHub
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /dist/components/site-header/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/dist/components/site-header/img/logo.png -------------------------------------------------------------------------------- /dist/components/site-header/site-header.html: -------------------------------------------------------------------------------- 1 | Angular Code Review

Never miss an update

Subscribe to the mailing list and receive a quick note when something was added or updated:

Want to contribute?

Do you feel something should be added or updated? Get involved now and help improve the checklists.

GitHub
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /dist/config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | "transpiler": "babel", 3 | "babelOptions": { 4 | "optional": [ 5 | "runtime" 6 | ] 7 | }, 8 | "paths": { 9 | "*": "*.js", 10 | "github:*": "_jspm_packages/github/*.js", 11 | "npm:*": "_jspm_packages/npm/*.js" 12 | } 13 | }); 14 | 15 | System.config({ 16 | "map": { 17 | "babel": "npm:babel-core@5.8.38", 18 | "babel-runtime": "npm:babel-runtime@5.8.38", 19 | "bootstrap-less": "github:distros/bootstrap-less@3.3.9", 20 | "core-js": "npm:core-js@0.9.18", 21 | "github:distros/bootstrap-less@3.3.9": { 22 | "jquery": "github:components/jquery@2.2.4" 23 | }, 24 | "github:jspm/nodelibs-assert@0.1.0": { 25 | "assert": "npm:assert@1.4.1" 26 | }, 27 | "github:jspm/nodelibs-buffer@0.1.0": { 28 | "buffer": "npm:buffer@3.6.0" 29 | }, 30 | "github:jspm/nodelibs-process@0.1.2": { 31 | "process": "npm:process@0.11.3" 32 | }, 33 | "github:jspm/nodelibs-util@0.1.0": { 34 | "util": "npm:util@0.10.3" 35 | }, 36 | "npm:assert@1.4.1": { 37 | "assert": "github:jspm/nodelibs-assert@0.1.0", 38 | "buffer": "github:jspm/nodelibs-buffer@0.1.0", 39 | "process": "github:jspm/nodelibs-process@0.1.2", 40 | "util": "npm:util@0.10.3" 41 | }, 42 | "npm:babel-runtime@5.8.38": { 43 | "process": "github:jspm/nodelibs-process@0.1.2" 44 | }, 45 | "npm:buffer@3.6.0": { 46 | "base64-js": "npm:base64-js@0.0.8", 47 | "child_process": "github:jspm/nodelibs-child_process@0.1.0", 48 | "fs": "github:jspm/nodelibs-fs@0.1.2", 49 | "ieee754": "npm:ieee754@1.1.6", 50 | "isarray": "npm:isarray@1.0.0", 51 | "process": "github:jspm/nodelibs-process@0.1.2" 52 | }, 53 | "npm:core-js@0.9.18": { 54 | "fs": "github:jspm/nodelibs-fs@0.1.2", 55 | "process": "github:jspm/nodelibs-process@0.1.2", 56 | "systemjs-json": "github:systemjs/plugin-json@0.1.2" 57 | }, 58 | "npm:inherits@2.0.1": { 59 | "util": "github:jspm/nodelibs-util@0.1.0" 60 | }, 61 | "npm:process@0.11.3": { 62 | "assert": "github:jspm/nodelibs-assert@0.1.0" 63 | }, 64 | "npm:util@0.10.3": { 65 | "inherits": "npm:inherits@2.0.1", 66 | "process": "github:jspm/nodelibs-process@0.1.2" 67 | } 68 | } 69 | }); 70 | 71 | -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Angular Code Review

Code Review Checklists

Collection of free checklists you can use to perform a code review of your Angular application.

AngularJS 1.x
Angular 2

Never miss an update

Subscribe to the mailing list and receive a quick note when something was added or updated:

Want to contribute?

Do you feel something should be added or updated? Get involved now and help improve the checklists.

GitHub
Created by @jvandemo
Powered by HarpJS
Hosted on Surge
Code on GitHub
-------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "dist" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var harp = require('harp'); 3 | var app = express(); 4 | var harpMiddleware = require('./node_modules/harp/lib/middleware'); 5 | var path = require('path'); 6 | var logger = require('./lib/logger'); 7 | var config = require('config'); 8 | var serverConfig = config.get('server'); 9 | 10 | // Default server configuration in case 11 | // no config files are present 12 | var defaultServerConfig = { 13 | serveUnderscores: true, 14 | appRoot: 'src/', 15 | port: 9000 16 | }; 17 | 18 | module.exports = createApp; 19 | 20 | /** 21 | * Create express application 22 | * 23 | * @param options 24 | * @returns {*} 25 | */ 26 | function createApp (options) { 27 | 28 | // Merge configuration with server defaults 29 | config.util.extendDeep(defaultServerConfig, options) 30 | config.util.setModuleDefaults('server', defaultServerConfig); 31 | 32 | var appRoot = path.resolve(__dirname, serverConfig.appRoot); 33 | 34 | /************************************************************************** 35 | * Ignore files if needed 36 | *************************************************************************/ 37 | 38 | if(serverConfig.serveUnderscores !== true){ 39 | app.use(harpMiddleware.underscore); 40 | } 41 | 42 | /************************************************************************** 43 | * Configure logger 44 | *************************************************************************/ 45 | 46 | app.use(logger()); 47 | 48 | /************************************************************************** 49 | * Serve static assets 50 | *************************************************************************/ 51 | 52 | app.use(express.static(appRoot)); 53 | 54 | /************************************************************************** 55 | * Let harp serve application 56 | *************************************************************************/ 57 | 58 | app.use(harp.mount(appRoot)); 59 | 60 | /************************************************************************** 61 | * Handle unfound .js, .js.map and .css requests with 404 62 | * to prevent html from being returned by catch all 63 | *************************************************************************/ 64 | 65 | app.all(/.*\.(js|css|js\.map)$/i, function(req, res, next){ 66 | res.status(404).send('Not Found'); 67 | }); 68 | 69 | /************************************************************************** 70 | * Let 200.jade catch all other requests 71 | *************************************************************************/ 72 | 73 | app.use(harpMiddleware.fallback); 74 | 75 | return app; 76 | } 77 | 78 | /** 79 | * Start the application if module is called 80 | * directly and not required by other module 81 | */ 82 | if(require.main === module){ 83 | var server = createApp(); 84 | var port = serverConfig.port; 85 | server.listen(port, function(){ 86 | console.log('Angular Express running on port %s', port); 87 | }); 88 | } 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Fri Jun 19 2015 10:37:18 GMT+0200 (CEST) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: __dirname + '/src', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['jspm', 'mocha', 'chai'], 14 | 15 | jspm: { 16 | 17 | // Manually include .spec.js file locations to avoid *.spec.js from 18 | // jspm_packages being tested 19 | loadFiles: [ 20 | 21 | // Main app 22 | 'app.js', 23 | '_karma-before-each.js', 24 | 25 | // Spec files in app directory 26 | '*.spec.js', 27 | 28 | // Spec files in all component directories 29 | 'components/**/*.spec.js' 30 | ], 31 | 32 | // Make sure all files can be served 33 | serveFiles: [ 34 | '**/*.*' 35 | ], 36 | 37 | // Configure package location 38 | packages: '_jspm_packages' 39 | }, 40 | 41 | // list of files / patterns to load in the browser 42 | files: [], 43 | 44 | 45 | // list of files to exclude 46 | exclude: [], 47 | 48 | 49 | // preprocess matching files before serving them to the browser 50 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 51 | preprocessors: { 52 | 'components/**/*.js': ['babel'] 53 | }, 54 | 'babelPreprocessor': { 55 | options: { 56 | sourceMap: 'inline', 57 | modules: 'system', 58 | moduleIds: false, 59 | loose: "all", 60 | optional: [ 61 | "es7.decorators" 62 | ] 63 | } 64 | }, 65 | 66 | 67 | // test results reporter to use 68 | // possible values: 'dots', 'progress' 69 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 70 | reporters: ['progress'], 71 | 72 | 73 | // web server port 74 | port: 9876, 75 | 76 | 77 | // enable / disable colors in the output (reporters and logs) 78 | colors: true, 79 | 80 | 81 | // level of logging 82 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 83 | logLevel: config.LOG_INFO, 84 | 85 | 86 | // enable / disable watching file and executing tests whenever any file changes 87 | autoWatch: true, 88 | 89 | 90 | // start these browsers 91 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 92 | browsers: ['Chrome'], 93 | 94 | 95 | // Continuous Integration mode 96 | // if true, Karma captures browsers, runs the tests and exits 97 | singleRun: false 98 | }); 99 | }; 100 | -------------------------------------------------------------------------------- /lib/logger/index.js: -------------------------------------------------------------------------------- 1 | var morgan = require('morgan'); 2 | var config = require('config'); 3 | 4 | var defaultModuleConfig = { 5 | format: 'combined', 6 | options: {} 7 | }; 8 | 9 | module.exports = function(options){ 10 | 11 | config.util.extendDeep(defaultModuleConfig, options) 12 | config.util.setModuleDefaults('logger', defaultModuleConfig); 13 | 14 | var moduleConfig = config.get('logger'); 15 | return morgan(moduleConfig.format, moduleConfig.options); 16 | }; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-app", 3 | "version": "0.1.0", 4 | "description": "Angular Express web application", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node index.js", 8 | "test": "echo \"Error: no test needed.\"", 9 | "compile": "node ./bin/compile.js", 10 | "build": "jspm bundle-sfx app --minify -y", 11 | "eslint": "eslint ./src", 12 | "development-server": "NODE_ENV=development node index.js", 13 | "production-server": "NODE_ENV=production node index.js", 14 | "browser-sync": "node browser-sync.js", 15 | "deploy": "firebase deploy", 16 | "ci-deploy-to-surge": "surge dist/ angularcodereview.com", 17 | "ci-deploy-to-firebase": "firebase deploy --token ${FIREBASE_TOKEN}" 18 | }, 19 | "keywords": [ 20 | "angular", 21 | "express", 22 | "angular-express", 23 | "ngx", 24 | "ngx-app" 25 | ], 26 | "author": "Angular Express", 27 | "license": "MIT", 28 | "dependencies": { 29 | "config": "^1.14.0", 30 | "express": "^4.12.4", 31 | "harp": "^0.20.x", 32 | "morgan": "^1.6.0" 33 | }, 34 | "devDependencies": { 35 | "babel-eslint": "^4.1.3", 36 | "browser-sync": "^2.9.10", 37 | "chai": "^3.0.0", 38 | "chokidar": "^1.2.0", 39 | "eslint": "^1.5.1", 40 | "fs-extra": "^0.20.0", 41 | "karma": "^0.12.36", 42 | "karma-babel-preprocessor": "^5.2.1", 43 | "karma-chai": "^0.1.0", 44 | "karma-chrome-launcher": "^0.1.12", 45 | "karma-jspm": "^1.1.5", 46 | "karma-mocha": "^0.1.10", 47 | "karma-phantomjs-launcher": "^0.2.0", 48 | "mocha": "^2.2.5", 49 | "phantomjs": "^1.9.17" 50 | }, 51 | "jspm": { 52 | "directories": { 53 | "baseURL": "src", 54 | "packages": "src/_jspm_packages" 55 | }, 56 | "dependencies": { 57 | "bootstrap-less": "github:distros/bootstrap-less@^3.3.9" 58 | }, 59 | "devDependencies": { 60 | "babel": "npm:babel-core@^5.1.13", 61 | "babel-runtime": "npm:babel-runtime@^5.1.13", 62 | "core-js": "npm:core-js@^0.9.4" 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/200.jade: -------------------------------------------------------------------------------- 1 | include ./index 2 | -------------------------------------------------------------------------------- /src/_build/bootstrap.less: -------------------------------------------------------------------------------- 1 | // Set this variable to the path of your less files 2 | // depending on whether you used jsmp, bower or npm 3 | // to install bootstrap 4 | @bootstrap-path-to-less-files: '../_jspm_packages/github/distros/bootstrap-less@3.3.9/bootstrap'; 5 | 6 | // Core variables and mixins 7 | @import "variables.less"; 8 | @import "@{bootstrap-path-to-less-files}/mixins.less"; 9 | 10 | // Reset and dependencies 11 | @import "@{bootstrap-path-to-less-files}/normalize.less"; 12 | //@import "@{bootstrap-path-to-less-files}/print.less"; 13 | //@import "@{bootstrap-path-to-less-files}/glyphicons.less"; 14 | 15 | // Core CSS 16 | @import "@{bootstrap-path-to-less-files}/scaffolding.less"; 17 | @import "@{bootstrap-path-to-less-files}/type.less"; 18 | //@import "@{bootstrap-path-to-less-files}/code.less"; 19 | @import "@{bootstrap-path-to-less-files}/grid.less"; 20 | @import "@{bootstrap-path-to-less-files}/tables.less"; 21 | @import "@{bootstrap-path-to-less-files}/forms.less"; 22 | @import "@{bootstrap-path-to-less-files}/buttons.less"; 23 | 24 | // Components 25 | @import "@{bootstrap-path-to-less-files}/component-animations.less"; 26 | @import "@{bootstrap-path-to-less-files}/dropdowns.less"; 27 | @import "@{bootstrap-path-to-less-files}/button-groups.less"; 28 | @import "@{bootstrap-path-to-less-files}/input-groups.less"; 29 | @import "@{bootstrap-path-to-less-files}/navs.less"; 30 | @import "@{bootstrap-path-to-less-files}/navbar.less"; 31 | @import "@{bootstrap-path-to-less-files}/breadcrumbs.less"; 32 | //@import "@{bootstrap-path-to-less-files}/pagination.less"; 33 | //@import "@{bootstrap-path-to-less-files}/pager.less"; 34 | @import "@{bootstrap-path-to-less-files}/labels.less"; 35 | //@import "@{bootstrap-path-to-less-files}/badges.less"; 36 | //@import "@{bootstrap-path-to-less-files}/jumbotron.less"; 37 | //@import "@{bootstrap-path-to-less-files}/thumbnails.less"; 38 | @import "@{bootstrap-path-to-less-files}/alerts.less"; 39 | @import "@{bootstrap-path-to-less-files}/progress-bars.less"; 40 | //@import "@{bootstrap-path-to-less-files}/media.less"; 41 | //@import "@{bootstrap-path-to-less-files}/list-group.less"; 42 | //@import "@{bootstrap-path-to-less-files}/panels.less"; 43 | //@import "@{bootstrap-path-to-less-files}/responsive-embed.less"; 44 | //@import "@{bootstrap-path-to-less-files}/wells.less"; 45 | //@import "@{bootstrap-path-to-less-files}/close.less"; 46 | 47 | // Components w/ JavaScript 48 | //@import "@{bootstrap-path-to-less-files}/modals.less"; 49 | //@import "@{bootstrap-path-to-less-files}/tooltip.less"; 50 | //@import "@{bootstrap-path-to-less-files}/popovers.less"; 51 | //@import "@{bootstrap-path-to-less-files}/carousel.less"; 52 | 53 | // Utility classes 54 | @import "@{bootstrap-path-to-less-files}/utilities.less"; 55 | @import "@{bootstrap-path-to-less-files}/responsive-utilities.less"; 56 | -------------------------------------------------------------------------------- /src/_build/cards.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | 3 | .cards{ 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | } 8 | 9 | .card{ 10 | flex: 1; 11 | background: white; 12 | border: 16px solid darken(@ngx-color-blue, 10%); 13 | border-radius: 15px; 14 | padding: 60px 60px 45px 60px; 15 | width: 60%; 16 | max-width: 800px; 17 | position: relative; 18 | display: flex; 19 | flex-wrap: wrap; 20 | &:nth-child(odd){ 21 | transform: rotate(-1deg); 22 | margin-right: 120px; 23 | margin-bottom: 90px; 24 | .card__number{ 25 | left: 60px; 26 | } 27 | } 28 | &:nth-child(even){ 29 | transform: rotate(1deg); 30 | margin-left: 120px; 31 | margin-bottom: 90px; 32 | .card__number{ 33 | right: 60px; 34 | } 35 | } 36 | @media(max-width: @screen-xs-max){ 37 | width: 90%; 38 | } 39 | } 40 | 41 | .card__number{ 42 | font-family: @ngx-font-family-script; 43 | border: 16px solid darken(@ngx-color-blue, 10%); 44 | border-radius: 50%; 45 | font-size: 40px; 46 | display: inline-block; 47 | width: 100px; 48 | height: 100px; 49 | text-align: center; 50 | background: @ngx-color-blue; 51 | position: absolute; 52 | top: -80px; 53 | line-height: 65px; 54 | font-weight: 700; 55 | color: white; 56 | } 57 | 58 | .card__title{ 59 | flex: 1 0 100%; 60 | margin-bottom: 30px; 61 | font-family: @ngx-font-family-script; 62 | font-weight: 700; 63 | font-size: 1.8rem; 64 | } 65 | 66 | .card__what{ 67 | flex: 0 0 45%; 68 | margin-bottom: 30px; 69 | @media(max-width: @screen-xs-max){ 70 | flex: 0 0 100%; 71 | } 72 | } 73 | 74 | .card__why{ 75 | flex: 0 0 45%; 76 | margin-bottom: 30px; 77 | margin-left: 10%; 78 | @media(max-width: @screen-xs-max){ 79 | flex: 0 0 100%; 80 | margin-left: 0; 81 | } 82 | } 83 | 84 | .card__links{ 85 | flex: 1 0 100%; 86 | } 87 | -------------------------------------------------------------------------------- /src/_build/homepage.less: -------------------------------------------------------------------------------- 1 | .page--homepage{ 2 | 3 | .page-header{ 4 | img.logo{ 5 | width: 220px; 6 | } 7 | @media(max-width: @screen-xs-max){ 8 | img.logo{ 9 | width: 140px; 10 | } 11 | } 12 | } 13 | 14 | .page-header-intro{ 15 | margin-bottom: 60px; 16 | @media(max-width: @screen-xs-max){ 17 | margin-bottom: 30px; 18 | } 19 | } 20 | 21 | .page-header-links{ 22 | a.btn{ 23 | img{ 24 | height: 28px; 25 | margin: -4px 5px 0 0; 26 | } 27 | @media(max-width: @screen-xs-max){ 28 | margin-bottom: 10px; 29 | } 30 | } 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/_build/lists.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | 3 | .list{ 4 | } 5 | 6 | .list-heading{ 7 | margin-bottom: 15px; 8 | font-family: @ngx-font-family-script; 9 | font-size: 1.2rem; 10 | font-weight: 700; 11 | color: rgba(0,0,0,0.5); 12 | } 13 | 14 | .list-item{ 15 | margin-bottom: 15px; 16 | position: relative; 17 | &:last-child{ 18 | margin-bottom: 0; 19 | } 20 | &::before{ 21 | content: '-'; 22 | position: absolute; 23 | left: -15px; 24 | } 25 | // See https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ 26 | overflow-wrap: break-word; 27 | word-wrap: break-word; 28 | -ms-word-break: break-all; 29 | word-break: break-all; 30 | word-break: break-word; 31 | -ms-hyphens: auto; 32 | -moz-hyphens: auto; 33 | -webkit-hyphens: auto; 34 | hyphens: auto; 35 | } 36 | 37 | .list--links{ 38 | .list-item{ 39 | margin-bottom: 8px; 40 | a{ 41 | // See https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ 42 | overflow-wrap: break-word; 43 | word-wrap: break-word; 44 | -ms-word-break: break-all; 45 | word-break: break-all; 46 | word-break: break-word; 47 | -ms-hyphens: auto; 48 | -moz-hyphens: auto; 49 | -webkit-hyphens: auto; 50 | hyphens: auto; 51 | } 52 | a::before{ 53 | font-family: @ngx-font-family-fontawesome@ngx-font-family-script; 54 | font-size: 0.7em; 55 | content: '\f08e'; 56 | position: absolute; 57 | left: -20px; 58 | top: 5px; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/_build/mixins.less: -------------------------------------------------------------------------------- 1 | // Set this variable to the path of your less files 2 | // depending on whether you used jsmp, bower or npm 3 | // to install bootstrap 4 | @bootstrap-path-to-less-files: '../_jspm_packages/github/distros/bootstrap-less@3.3.9/bootstrap'; 5 | 6 | // Expose mixins for inclusion from components 7 | @import "@{bootstrap-path-to-less-files}/mixins.less"; 8 | -------------------------------------------------------------------------------- /src/_build/page-header.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | 3 | .page-header{ 4 | text-align: center; 5 | margin: 0; 6 | color: rgba(255,255,255,0.7); 7 | padding: 60px 60px 120px 60px; 8 | background: @ngx-color-blue-dark; 9 | background: -moz-linear-gradient(left, @ngx-color-blue-dark 0%, @ngx-color-blue 50%, @ngx-color-blue-dark 100%); /* FF3.6-15 */ 10 | background: -webkit-linear-gradient(left, @ngx-color-blue-dark 0%,@ngx-color-blue 50%,@ngx-color-blue-dark 100%); /* Chrome10-25,Safari5.1-6 */ 11 | background: linear-gradient(to right, @ngx-color-blue-dark 0%,@ngx-color-blue 50%,@ngx-color-blue-dark 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 12 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@ngx-color-blue-dark', endColorstr='@ngx-color-blue',GradientType=1 ); 13 | 14 | h1{ 15 | color: white; 16 | padding: 0; 17 | margin: 0 0 10px 0; 18 | //text-shadow: 0 3px 5px rgba(0,0,0,0.5); 19 | font-weight: 400; 20 | font-size: 2rem; 21 | } 22 | h2{ 23 | font-family: @ngx-font-family-script; 24 | font-weight: 700; 25 | font-size: 3rem; 26 | padding: 0; 27 | margin: 0 0 20px 0; 28 | color: #f9f9f9; 29 | text-shadow: 0 3px 5px rgba(0,0,0,0.5); 30 | } 31 | 32 | @media(max-width: @screen-xs-max){ 33 | padding-top: 30px; 34 | padding-bottom: 60px; 35 | h1{ 36 | font-size: 1.2rem; 37 | } 38 | h2{ 39 | font-size: 1.6rem; 40 | } 41 | } 42 | } 43 | 44 | .header__names{ 45 | a{ 46 | color: white; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/_build/sections.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | 3 | .section{ 4 | padding: 30px 0 60px 0; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | .section__header{ 10 | width: 60%; 11 | @media(max-width: @screen-xs-max){ 12 | width: 80%; 13 | } 14 | } 15 | 16 | .section__content{ 17 | width: 100%; 18 | } 19 | 20 | .section-title{ 21 | font-family: @ngx-font-family-script; 22 | margin-bottom: 150px; 23 | text-align: center; 24 | font-size: 2.4rem; 25 | background: @ngx-color-yellow; 26 | text-shadow: 0 3px 5px rgba(0,0,0,0.5); 27 | color: white; 28 | font-weight: 700; 29 | border-radius: 0 45px 45px 0; 30 | padding: 60px 30px; 31 | //box-shadow: 0 3px 5px rgba(0,0,0,0.5); 32 | text-transform: uppercase; 33 | @media(max-width: @screen-xs-max){ 34 | font-size: 1.8rem; 35 | } 36 | } 37 | 38 | .section--code{ 39 | .section-title{ 40 | background: @ngx-color-code; 41 | } 42 | .card__number{ 43 | background: @ngx-color-code; 44 | border-color: darken(@ngx-color-code, 10%); 45 | } 46 | .card{ 47 | border-color: darken(@ngx-color-code, 10%); 48 | } 49 | } 50 | 51 | .section--architecture{ 52 | .section-title{ 53 | background: @ngx-color-architecture; 54 | } 55 | .card__number{ 56 | background: @ngx-color-architecture; 57 | border-color: darken(@ngx-color-architecture, 10%); 58 | } 59 | .card{ 60 | border-color: darken(@ngx-color-architecture, 10%); 61 | } 62 | } 63 | 64 | .section--accessibility{ 65 | .section-title{ 66 | background: @ngx-color-accessibility; 67 | } 68 | .card__number{ 69 | background: @ngx-color-accessibility; 70 | border-color: darken(@ngx-color-accessibility, 10%); 71 | } 72 | .card{ 73 | border-color: darken(@ngx-color-accessibility, 10%); 74 | } 75 | } 76 | 77 | .section--performance{ 78 | .section-title{ 79 | background: @ngx-color-performance; 80 | } 81 | .card__number{ 82 | background: @ngx-color-performance; 83 | border-color: darken(@ngx-color-performance, 10%); 84 | } 85 | .card{ 86 | border-color: darken(@ngx-color-performance, 10%); 87 | } 88 | } 89 | 90 | .section--security{ 91 | .section-title{ 92 | background: @ngx-color-security; 93 | } 94 | .card__number{ 95 | background: @ngx-color-security; 96 | border-color: darken(@ngx-color-security, 10%); 97 | } 98 | .card{ 99 | border-color: darken(@ngx-color-security, 10%); 100 | } 101 | } 102 | 103 | .section--other{ 104 | .section-title{ 105 | background: @ngx-color-other; 106 | } 107 | .card__number{ 108 | background: @ngx-color-other; 109 | border-color: darken(@ngx-color-other, 10%); 110 | } 111 | .card{ 112 | border-color: darken(@ngx-color-other, 10%); 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/_build/variables.less: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | @ngx-color-blue: rgb(25, 118, 210); 6 | @ngx-color-blue-dark: #0042a8; 7 | @ngx-color-red: #df002a; 8 | @ngx-color-red-dark: #c5002a; 9 | @ngx-color-yellow: #fae042; 10 | @ngx-color-yellow-dark: #e1c93b; 11 | @ngx-color-code: @ngx-color-yellow; 12 | @ngx-color-architecture: #34A853; 13 | @ngx-color-accessibility: @ngx-color-blue; 14 | @ngx-color-performance: #EA4335; 15 | @ngx-color-security: #f68840; 16 | @ngx-color-other: #a0a0a0; 17 | 18 | @ngx-border-color: rgba(0,0,0,0.1); 19 | 20 | @ngx-font-family-sans-serif: "roboto", "acumin-pro-semi-condensed", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 21 | @ngx-font-family-serif: Georgia, "Times New Roman", Times, serif; 22 | @ngx-font-family-script: "reklame-script"; 23 | @ngx-font-family-fontawesome: "fontawesome"; 24 | @ngx-font-family-monospace: "inconsolata", Menlo, Monaco, Consolas, "Courier New", monospace; 25 | 26 | // Sizes for paddings and margins 27 | @ngx-size-xxs: 9px; 28 | @ngx-size-xs: 12px; 29 | @ngx-size-s: 18px; 30 | @ngx-size-m: 30px; 31 | @ngx-size-l: 42px; 32 | @ngx-size-xl: 60px; 33 | @ngx-size-xxl: 120px; 34 | 35 | @ngx-text-size-base: 14px; 36 | @ngx-text-size-xxs: 8px; 37 | @ngx-text-size-xs: 10px; 38 | @ngx-text-size-s: 12px; 39 | @ngx-text-size-m: 14px; 40 | @ngx-text-size-l: 18px; 41 | @ngx-text-size-xl: 30px; 42 | @ngx-text-size-xxl: 60px; 43 | 44 | @ngx-gray-darker: rgb(53, 57, 68); 45 | @ngx-gray-dark: rgb(89, 95, 111); 46 | @ngx-gray: rgb(160, 164, 173); 47 | @ngx-gray-light: rgb(203, 206, 213); 48 | @ngx-gray-lighter: rgba(89, 95, 111, 0.08); 49 | 50 | //== Colors 51 | // 52 | //## Gray and brand colors for use across Bootstrap. 53 | 54 | // @gray-base: #000; 55 | @gray-darker: @ngx-gray-darker; 56 | @gray-dark: @ngx-gray-dark; 57 | @gray: @ngx-gray; 58 | @gray-light: @ngx-gray-light; 59 | @gray-lighter: @ngx-gray-lighter; 60 | 61 | //@brand-primary: darken(#428bca, 6.5%); // #337ab7 62 | @brand-primary: @ngx-color-blue; 63 | @brand-success: #5cb85c; 64 | @brand-info: #5bc0de; 65 | @brand-warning: #f0ad4e; 66 | @brand-danger: @ngx-color-red; 67 | 68 | 69 | //== Scaffolding 70 | // 71 | //## Settings for some of the most global styles. 72 | 73 | //** Background color for ``. 74 | @body-bg: #fff; 75 | //** Global text color on ``. 76 | @text-color: @gray-dark; 77 | 78 | //** Global textual link color. 79 | @link-color: @brand-primary; 80 | //** Link hover color set via `darken()` function. 81 | @link-hover-color: darken(@link-color, 15%); 82 | //** Link hover decoration. 83 | @link-hover-decoration: underline; 84 | 85 | 86 | //== Typography 87 | // 88 | //## Font, line-height, and color for body text, headings, and more. 89 | 90 | @font-family-sans-serif: @ngx-font-family-sans-serif; 91 | @font-family-serif: @ngx-font-family-serif; 92 | //** Default monospace fonts for ``, ``, and `
`.
 93 | @font-family-monospace:   @ngx-font-family-monospace;
 94 | @font-family-base:        @font-family-sans-serif;
 95 | 
 96 | @font-size-base:          16px;
 97 | @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 98 | @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 99 | 
100 | @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
101 | @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
102 | @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
103 | @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
104 | @font-size-h5:            @font-size-base;
105 | @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
106 | 
107 | //** Unit-less `line-height` for use in components like buttons.
108 | @line-height-base:        1.428571429; // 20/14
109 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
110 | @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
111 | 
112 | //** By default, this inherits from the ``.
113 | @headings-font-family:    inherit;
114 | @headings-font-weight:    500;
115 | @headings-line-height:    1.1;
116 | @headings-color:          inherit;
117 | 
118 | 
119 | //== Iconography
120 | //
121 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
122 | 
123 | //** Load fonts from this directory.
124 | @icon-font-path:          "../fonts/";
125 | //** File name for all font files.
126 | @icon-font-name:          "glyphicons-halflings-regular";
127 | //** Element ID within SVG icon file.
128 | @icon-font-svg-id:        "glyphicons_halflingsregular";
129 | 
130 | 
131 | //== Components
132 | //
133 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
134 | 
135 | @padding-base-vertical:     6px;
136 | @padding-base-horizontal:   12px;
137 | 
138 | @padding-large-vertical:    10px;
139 | @padding-large-horizontal:  16px;
140 | 
141 | @padding-small-vertical:    5px;
142 | @padding-small-horizontal:  10px;
143 | 
144 | @padding-xs-vertical:       1px;
145 | @padding-xs-horizontal:     5px;
146 | 
147 | @line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
148 | @line-height-small:         1.5;
149 | 
150 | @border-radius-base:        4px;
151 | @border-radius-large:       6px;
152 | @border-radius-small:       3px;
153 | 
154 | //** Global color for active items (e.g., navs or dropdowns).
155 | @component-active-color:    #fff;
156 | //** Global background color for active items (e.g., navs or dropdowns).
157 | @component-active-bg:       @brand-primary;
158 | 
159 | //** Width of the `border` for generating carets that indicator dropdowns.
160 | @caret-width-base:          4px;
161 | //** Carets increase slightly in size for larger components.
162 | @caret-width-large:         5px;
163 | 
164 | 
165 | //== Tables
166 | //
167 | //## Customizes the `.table` component with basic values, each used across all table variations.
168 | 
169 | //** Padding for ``s and ``s.
170 | @table-cell-padding:            8px;
171 | //** Padding for cells in `.table-condensed`.
172 | @table-condensed-cell-padding:  5px;
173 | 
174 | //** Default background color used for all tables.
175 | @table-bg:                      transparent;
176 | //** Background color used for `.table-striped`.
177 | @table-bg-accent:               #f9f9f9;
178 | //** Background color used for `.table-hover`.
179 | @table-bg-hover:                #f5f5f5;
180 | @table-bg-active:               @table-bg-hover;
181 | 
182 | //** Border color for table and cell borders.
183 | @table-border-color:            #ddd;
184 | 
185 | 
186 | //== Buttons
187 | //
188 | //## For each of Bootstrap's buttons, define text, background and border color.
189 | 
190 | @btn-font-weight:                normal;
191 | 
192 | @btn-default-color:              #333;
193 | @btn-default-bg:                 #fff;
194 | @btn-default-border:             #ccc;
195 | 
196 | @btn-primary-color:              #fff;
197 | @btn-primary-bg:                 @brand-primary;
198 | @btn-primary-border:             darken(@btn-primary-bg, 5%);
199 | 
200 | @btn-success-color:              #fff;
201 | @btn-success-bg:                 @brand-success;
202 | @btn-success-border:             darken(@btn-success-bg, 5%);
203 | 
204 | @btn-info-color:                 #fff;
205 | @btn-info-bg:                    @brand-info;
206 | @btn-info-border:                darken(@btn-info-bg, 5%);
207 | 
208 | @btn-warning-color:              #fff;
209 | @btn-warning-bg:                 @brand-warning;
210 | @btn-warning-border:             darken(@btn-warning-bg, 5%);
211 | 
212 | @btn-danger-color:               #fff;
213 | @btn-danger-bg:                  @brand-danger;
214 | @btn-danger-border:              darken(@btn-danger-bg, 5%);
215 | 
216 | @btn-link-disabled-color:        @gray-light;
217 | 
218 | 
219 | //== Forms
220 | //
221 | //##
222 | 
223 | //** `` background color
224 | @input-bg:                       #fff;
225 | //** `` background color
226 | @input-bg-disabled:              @gray-lighter;
227 | 
228 | //** Text color for ``s
229 | @input-color:                    @gray;
230 | //** `` border color
231 | @input-border:                   #ccc;
232 | 
233 | // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
234 | //** Default `.form-control` border radius
235 | // This has no effect on ``s in CSS.
236 | @input-border-radius:            @border-radius-base;
237 | //** Large `.form-control` border radius
238 | @input-border-radius-large:      @border-radius-large;
239 | //** Small `.form-control` border radius
240 | @input-border-radius-small:      @border-radius-small;
241 | 
242 | //** Border color for inputs on focus
243 | @input-border-focus:             #66afe9;
244 | 
245 | //** Placeholder text color
246 | @input-color-placeholder:        #999;
247 | 
248 | //** Default `.form-control` height
249 | @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
250 | //** Large `.form-control` height
251 | @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
252 | //** Small `.form-control` height
253 | @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
254 | 
255 | @legend-color:                   @gray-dark;
256 | @legend-border-color:            #e5e5e5;
257 | 
258 | //** Background color for textual input addons
259 | @input-group-addon-bg:           @gray-lighter;
260 | //** Border color for textual input addons
261 | @input-group-addon-border-color: @input-border;
262 | 
263 | //** Disabled cursor for form controls and buttons.
264 | @cursor-disabled:                not-allowed;
265 | 
266 | 
267 | //== Dropdowns
268 | //
269 | //## Dropdown menu container and contents.
270 | 
271 | //** Background for the dropdown menu.
272 | @dropdown-bg:                    #fff;
273 | //** Dropdown menu `border-color`.
274 | @dropdown-border:                rgba(0,0,0,.15);
275 | //** Dropdown menu `border-color` **for IE8**.
276 | @dropdown-fallback-border:       #ccc;
277 | //** Divider color for between dropdown items.
278 | @dropdown-divider-bg:            #e5e5e5;
279 | 
280 | //** Dropdown link text color.
281 | @dropdown-link-color:            @gray-dark;
282 | //** Hover color for dropdown links.
283 | @dropdown-link-hover-color:      darken(@gray-dark, 5%);
284 | //** Hover background for dropdown links.
285 | @dropdown-link-hover-bg:         #f5f5f5;
286 | 
287 | //** Active dropdown menu item text color.
288 | @dropdown-link-active-color:     @component-active-color;
289 | //** Active dropdown menu item background color.
290 | @dropdown-link-active-bg:        @component-active-bg;
291 | 
292 | //** Disabled dropdown menu item background color.
293 | @dropdown-link-disabled-color:   @gray-light;
294 | 
295 | //** Text color for headers within dropdown menus.
296 | @dropdown-header-color:          @gray-light;
297 | 
298 | //** Deprecated `@dropdown-caret-color` as of v3.1.0
299 | @dropdown-caret-color:           #000;
300 | 
301 | 
302 | //-- Z-index master list
303 | //
304 | // Warning: Avoid customizing these values. They're used for a bird's eye view
305 | // of components dependent on the z-axis and are designed to all work together.
306 | //
307 | // Note: These variables are not generated into the Customizer.
308 | 
309 | @zindex-navbar:            1000;
310 | @zindex-dropdown:          1000;
311 | @zindex-popover:           1060;
312 | @zindex-tooltip:           1070;
313 | @zindex-navbar-fixed:      1030;
314 | @zindex-modal:             1040;
315 | 
316 | 
317 | //== Media queries breakpoints
318 | //
319 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
320 | 
321 | // Extra small screen / phone
322 | //** Deprecated `@screen-xs` as of v3.0.1
323 | @screen-xs:                  480px;
324 | //** Deprecated `@screen-xs-min` as of v3.2.0
325 | @screen-xs-min:              @screen-xs;
326 | //** Deprecated `@screen-phone` as of v3.0.1
327 | @screen-phone:               @screen-xs-min;
328 | 
329 | // Small screen / tablet
330 | //** Deprecated `@screen-sm` as of v3.0.1
331 | @screen-sm:                  768px;
332 | @screen-sm-min:              @screen-sm;
333 | //** Deprecated `@screen-tablet` as of v3.0.1
334 | @screen-tablet:              @screen-sm-min;
335 | 
336 | // Medium screen / desktop
337 | //** Deprecated `@screen-md` as of v3.0.1
338 | @screen-md:                  992px;
339 | @screen-md-min:              @screen-md;
340 | //** Deprecated `@screen-desktop` as of v3.0.1
341 | @screen-desktop:             @screen-md-min;
342 | 
343 | // Large screen / wide desktop
344 | //** Deprecated `@screen-lg` as of v3.0.1
345 | @screen-lg:                  1200px;
346 | @screen-lg-min:              @screen-lg;
347 | //** Deprecated `@screen-lg-desktop` as of v3.0.1
348 | @screen-lg-desktop:          @screen-lg-min;
349 | 
350 | // So media queries don't overlap when required, provide a maximum
351 | @screen-xs-max:              (@screen-sm-min - 1);
352 | @screen-sm-max:              (@screen-md-min - 1);
353 | @screen-md-max:              (@screen-lg-min - 1);
354 | 
355 | 
356 | //== Grid system
357 | //
358 | //## Define your custom responsive grid.
359 | 
360 | //** Number of columns in the grid.
361 | @grid-columns:              12;
362 | //** Padding between columns. Gets divided in half for the left and right.
363 | @grid-gutter-width:         30px;
364 | // Navbar collapse
365 | //** Point at which the navbar becomes uncollapsed.
366 | @grid-float-breakpoint:     @screen-sm-min;
367 | //** Point at which the navbar begins collapsing.
368 | @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
369 | 
370 | 
371 | //== Container sizes
372 | //
373 | //## Define the maximum width of `.container` for different screen sizes.
374 | 
375 | // Small screen / tablet
376 | @container-tablet:             (720px + @grid-gutter-width);
377 | //** For `@screen-sm-min` and up.
378 | @container-sm:                 @container-tablet;
379 | 
380 | // Medium screen / desktop
381 | @container-desktop:            (940px + @grid-gutter-width);
382 | //** For `@screen-md-min` and up.
383 | @container-md:                 @container-desktop;
384 | 
385 | // Large screen / wide desktop
386 | @container-large-desktop:      (1140px + @grid-gutter-width);
387 | //** For `@screen-lg-min` and up.
388 | @container-lg:                 @container-large-desktop;
389 | 
390 | 
391 | //== Navbar
392 | //
393 | //##
394 | 
395 | // Basics of a navbar
396 | @navbar-height:                    50px;
397 | @navbar-margin-bottom:             @line-height-computed;
398 | @navbar-border-radius:             @border-radius-base;
399 | @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
400 | @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
401 | @navbar-collapse-max-height:       340px;
402 | 
403 | @navbar-default-color:             white;
404 | @navbar-default-bg:                @ngx-color-blue;
405 | @navbar-default-border:            transparent;
406 | 
407 | // Navbar links
408 | @navbar-default-link-color:                white;
409 | @navbar-default-link-hover-color:          #333;
410 | @navbar-default-link-hover-bg:             transparent;
411 | @navbar-default-link-active-color:         #555;
412 | @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
413 | @navbar-default-link-disabled-color:       #ccc;
414 | @navbar-default-link-disabled-bg:          transparent;
415 | 
416 | // Navbar brand label
417 | @navbar-default-brand-color:               @navbar-default-link-color;
418 | @navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
419 | @navbar-default-brand-hover-bg:            transparent;
420 | 
421 | // Navbar toggle
422 | @navbar-default-toggle-hover-bg:           transparent;
423 | @navbar-default-toggle-icon-bar-bg:        white;
424 | @navbar-default-toggle-border-color:       transparent;
425 | 
426 | 
427 | // Inverted navbar
428 | // Reset inverted navbar basics
429 | @navbar-inverse-color:                      lighten(@gray-light, 15%);
430 | @navbar-inverse-bg:                         #222;
431 | @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
432 | 
433 | // Inverted navbar links
434 | @navbar-inverse-link-color:                 lighten(@gray-light, 15%);
435 | @navbar-inverse-link-hover-color:           #fff;
436 | @navbar-inverse-link-hover-bg:              transparent;
437 | @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
438 | @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
439 | @navbar-inverse-link-disabled-color:        #444;
440 | @navbar-inverse-link-disabled-bg:           transparent;
441 | 
442 | // Inverted navbar brand label
443 | @navbar-inverse-brand-color:                @navbar-inverse-link-color;
444 | @navbar-inverse-brand-hover-color:          #fff;
445 | @navbar-inverse-brand-hover-bg:             transparent;
446 | 
447 | // Inverted navbar toggle
448 | @navbar-inverse-toggle-hover-bg:            #333;
449 | @navbar-inverse-toggle-icon-bar-bg:         #fff;
450 | @navbar-inverse-toggle-border-color:        #333;
451 | 
452 | 
453 | //== Navs
454 | //
455 | //##
456 | 
457 | //=== Shared nav styles
458 | @nav-link-padding:                          10px 15px;
459 | @nav-link-hover-bg:                         @gray-lighter;
460 | 
461 | @nav-disabled-link-color:                   @gray-light;
462 | @nav-disabled-link-hover-color:             @gray-light;
463 | 
464 | //== Tabs
465 | @nav-tabs-border-color:                     #ddd;
466 | 
467 | @nav-tabs-link-hover-border-color:          @gray-lighter;
468 | 
469 | @nav-tabs-active-link-hover-bg:             @body-bg;
470 | @nav-tabs-active-link-hover-color:          @gray;
471 | @nav-tabs-active-link-hover-border-color:   #ddd;
472 | 
473 | @nav-tabs-justified-link-border-color:            #ddd;
474 | @nav-tabs-justified-active-link-border-color:     @body-bg;
475 | 
476 | //== Pills
477 | @nav-pills-border-radius:                   @border-radius-base;
478 | @nav-pills-active-link-hover-bg:            @component-active-bg;
479 | @nav-pills-active-link-hover-color:         @component-active-color;
480 | 
481 | 
482 | //== Pagination
483 | //
484 | //##
485 | 
486 | @pagination-color:                     @link-color;
487 | @pagination-bg:                        #fff;
488 | @pagination-border:                    #ddd;
489 | 
490 | @pagination-hover-color:               @link-hover-color;
491 | @pagination-hover-bg:                  @gray-lighter;
492 | @pagination-hover-border:              #ddd;
493 | 
494 | @pagination-active-color:              #fff;
495 | @pagination-active-bg:                 @brand-primary;
496 | @pagination-active-border:             @brand-primary;
497 | 
498 | @pagination-disabled-color:            @gray-light;
499 | @pagination-disabled-bg:               #fff;
500 | @pagination-disabled-border:           #ddd;
501 | 
502 | 
503 | //== Pager
504 | //
505 | //##
506 | 
507 | @pager-bg:                             @pagination-bg;
508 | @pager-border:                         @pagination-border;
509 | @pager-border-radius:                  15px;
510 | 
511 | @pager-hover-bg:                       @pagination-hover-bg;
512 | 
513 | @pager-active-bg:                      @pagination-active-bg;
514 | @pager-active-color:                   @pagination-active-color;
515 | 
516 | @pager-disabled-color:                 @pagination-disabled-color;
517 | 
518 | 
519 | //== Jumbotron
520 | //
521 | //##
522 | 
523 | @jumbotron-padding:              30px;
524 | @jumbotron-color:                inherit;
525 | @jumbotron-bg:                   @gray-lighter;
526 | @jumbotron-heading-color:        inherit;
527 | @jumbotron-font-size:            ceil((@font-size-base * 1.5));
528 | 
529 | 
530 | //== Form states and alerts
531 | //
532 | //## Define colors for form feedback states and, by default, alerts.
533 | 
534 | @state-success-text:             #3c763d;
535 | @state-success-bg:               #dff0d8;
536 | @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
537 | 
538 | @state-info-text:                #31708f;
539 | @state-info-bg:                  #d9edf7;
540 | @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
541 | 
542 | @state-warning-text:             #8a6d3b;
543 | @state-warning-bg:               #fcf8e3;
544 | @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
545 | 
546 | @state-danger-text:              #a94442;
547 | @state-danger-bg:                #f2dede;
548 | @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
549 | 
550 | 
551 | //== Tooltips
552 | //
553 | //##
554 | 
555 | //** Tooltip max width
556 | @tooltip-max-width:           200px;
557 | //** Tooltip text color
558 | @tooltip-color:               #fff;
559 | //** Tooltip background color
560 | @tooltip-bg:                  #000;
561 | @tooltip-opacity:             .9;
562 | 
563 | //** Tooltip arrow width
564 | @tooltip-arrow-width:         5px;
565 | //** Tooltip arrow color
566 | @tooltip-arrow-color:         @tooltip-bg;
567 | 
568 | 
569 | //== Popovers
570 | //
571 | //##
572 | 
573 | //** Popover body background color
574 | @popover-bg:                          #fff;
575 | //** Popover maximum width
576 | @popover-max-width:                   276px;
577 | //** Popover border color
578 | @popover-border-color:                rgba(0,0,0,.2);
579 | //** Popover fallback border color
580 | @popover-fallback-border-color:       #ccc;
581 | 
582 | //** Popover title background color
583 | @popover-title-bg:                    darken(@popover-bg, 3%);
584 | 
585 | //** Popover arrow width
586 | @popover-arrow-width:                 10px;
587 | //** Popover arrow color
588 | @popover-arrow-color:                 @popover-bg;
589 | 
590 | //** Popover outer arrow width
591 | @popover-arrow-outer-width:           (@popover-arrow-width + 1);
592 | //** Popover outer arrow color
593 | @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
594 | //** Popover outer arrow fallback color
595 | @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
596 | 
597 | 
598 | //== Labels
599 | //
600 | //##
601 | 
602 | //** Default label background color
603 | @label-default-bg:            @gray-light;
604 | //** Primary label background color
605 | @label-primary-bg:            @brand-primary;
606 | //** Success label background color
607 | @label-success-bg:            @brand-success;
608 | //** Info label background color
609 | @label-info-bg:               @brand-info;
610 | //** Warning label background color
611 | @label-warning-bg:            @brand-warning;
612 | //** Danger label background color
613 | @label-danger-bg:             @brand-danger;
614 | 
615 | //** Default label text color
616 | @label-color:                 #fff;
617 | //** Default text color of a linked label
618 | @label-link-hover-color:      #fff;
619 | 
620 | 
621 | //== Modals
622 | //
623 | //##
624 | 
625 | //** Padding applied to the modal body
626 | @modal-inner-padding:         15px;
627 | 
628 | //** Padding applied to the modal title
629 | @modal-title-padding:         15px;
630 | //** Modal title line-height
631 | @modal-title-line-height:     @line-height-base;
632 | 
633 | //** Background color of modal content area
634 | @modal-content-bg:                             #fff;
635 | //** Modal content border color
636 | @modal-content-border-color:                   rgba(0,0,0,.2);
637 | //** Modal content border color **for IE8**
638 | @modal-content-fallback-border-color:          #999;
639 | 
640 | //** Modal backdrop background color
641 | @modal-backdrop-bg:           #000;
642 | //** Modal backdrop opacity
643 | @modal-backdrop-opacity:      .5;
644 | //** Modal header border color
645 | @modal-header-border-color:   #e5e5e5;
646 | //** Modal footer border color
647 | @modal-footer-border-color:   @modal-header-border-color;
648 | 
649 | @modal-lg:                    900px;
650 | @modal-md:                    600px;
651 | @modal-sm:                    300px;
652 | 
653 | 
654 | //== Alerts
655 | //
656 | //## Define alert colors, border radius, and padding.
657 | 
658 | @alert-padding:               15px;
659 | @alert-border-radius:         @border-radius-base;
660 | @alert-link-font-weight:      bold;
661 | 
662 | @alert-success-bg:            @state-success-bg;
663 | @alert-success-text:          @state-success-text;
664 | @alert-success-border:        @state-success-border;
665 | 
666 | @alert-info-bg:               @state-info-bg;
667 | @alert-info-text:             @state-info-text;
668 | @alert-info-border:           @state-info-border;
669 | 
670 | @alert-warning-bg:            @state-warning-bg;
671 | @alert-warning-text:          @state-warning-text;
672 | @alert-warning-border:        @state-warning-border;
673 | 
674 | @alert-danger-bg:             @state-danger-bg;
675 | @alert-danger-text:           @state-danger-text;
676 | @alert-danger-border:         @state-danger-border;
677 | 
678 | 
679 | //== Progress bars
680 | //
681 | //##
682 | 
683 | //** Background color of the whole progress component
684 | @progress-bg:                 #f5f5f5;
685 | //** Progress bar text color
686 | @progress-bar-color:          #fff;
687 | //** Variable for setting rounded corners on progress bar.
688 | @progress-border-radius:      @border-radius-base;
689 | 
690 | //** Default progress bar color
691 | @progress-bar-bg:             @brand-primary;
692 | //** Success progress bar color
693 | @progress-bar-success-bg:     @brand-success;
694 | //** Warning progress bar color
695 | @progress-bar-warning-bg:     @brand-warning;
696 | //** Danger progress bar color
697 | @progress-bar-danger-bg:      @brand-danger;
698 | //** Info progress bar color
699 | @progress-bar-info-bg:        @brand-info;
700 | 
701 | 
702 | //== List group
703 | //
704 | //##
705 | 
706 | //** Background color on `.list-group-item`
707 | @list-group-bg:                 #fff;
708 | //** `.list-group-item` border color
709 | @list-group-border:             #ddd;
710 | //** List group border radius
711 | @list-group-border-radius:      @border-radius-base;
712 | 
713 | //** Background color of single list items on hover
714 | @list-group-hover-bg:           #f5f5f5;
715 | //** Text color of active list items
716 | @list-group-active-color:       @component-active-color;
717 | //** Background color of active list items
718 | @list-group-active-bg:          @component-active-bg;
719 | //** Border color of active list elements
720 | @list-group-active-border:      @list-group-active-bg;
721 | //** Text color for content within active list items
722 | @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
723 | 
724 | //** Text color of disabled list items
725 | @list-group-disabled-color:      @gray-light;
726 | //** Background color of disabled list items
727 | @list-group-disabled-bg:         @gray-lighter;
728 | //** Text color for content within disabled list items
729 | @list-group-disabled-text-color: @list-group-disabled-color;
730 | 
731 | @list-group-link-color:         #555;
732 | @list-group-link-hover-color:   @list-group-link-color;
733 | @list-group-link-heading-color: #333;
734 | 
735 | 
736 | //== Panels
737 | //
738 | //##
739 | 
740 | @panel-bg:                    #fff;
741 | @panel-body-padding:          15px;
742 | @panel-heading-padding:       10px 15px;
743 | @panel-footer-padding:        @panel-heading-padding;
744 | @panel-border-radius:         @border-radius-base;
745 | 
746 | //** Border color for elements within panels
747 | @panel-inner-border:          #ddd;
748 | @panel-footer-bg:             #f5f5f5;
749 | 
750 | @panel-default-text:          @gray-dark;
751 | @panel-default-border:        #ddd;
752 | @panel-default-heading-bg:    #f5f5f5;
753 | 
754 | @panel-primary-text:          #fff;
755 | @panel-primary-border:        @brand-primary;
756 | @panel-primary-heading-bg:    @brand-primary;
757 | 
758 | @panel-success-text:          @state-success-text;
759 | @panel-success-border:        @state-success-border;
760 | @panel-success-heading-bg:    @state-success-bg;
761 | 
762 | @panel-info-text:             @state-info-text;
763 | @panel-info-border:           @state-info-border;
764 | @panel-info-heading-bg:       @state-info-bg;
765 | 
766 | @panel-warning-text:          @state-warning-text;
767 | @panel-warning-border:        @state-warning-border;
768 | @panel-warning-heading-bg:    @state-warning-bg;
769 | 
770 | @panel-danger-text:           @state-danger-text;
771 | @panel-danger-border:         @state-danger-border;
772 | @panel-danger-heading-bg:     @state-danger-bg;
773 | 
774 | 
775 | //== Thumbnails
776 | //
777 | //##
778 | 
779 | //** Padding around the thumbnail image
780 | @thumbnail-padding:           4px;
781 | //** Thumbnail background color
782 | @thumbnail-bg:                @body-bg;
783 | //** Thumbnail border color
784 | @thumbnail-border:            #ddd;
785 | //** Thumbnail border radius
786 | @thumbnail-border-radius:     @border-radius-base;
787 | 
788 | //** Custom text color for thumbnail captions
789 | @thumbnail-caption-color:     @text-color;
790 | //** Padding around the thumbnail caption
791 | @thumbnail-caption-padding:   9px;
792 | 
793 | 
794 | //== Wells
795 | //
796 | //##
797 | 
798 | @well-bg:                     #f5f5f5;
799 | @well-border:                 darken(@well-bg, 7%);
800 | 
801 | 
802 | //== Badges
803 | //
804 | //##
805 | 
806 | @badge-color:                 #fff;
807 | //** Linked badge text color on hover
808 | @badge-link-hover-color:      #fff;
809 | @badge-bg:                    @gray-light;
810 | 
811 | //** Badge text color in active nav link
812 | @badge-active-color:          @link-color;
813 | //** Badge background color in active nav link
814 | @badge-active-bg:             #fff;
815 | 
816 | @badge-font-weight:           bold;
817 | @badge-line-height:           1;
818 | @badge-border-radius:         10px;
819 | 
820 | 
821 | //== Breadcrumbs
822 | //
823 | //##
824 | 
825 | @breadcrumb-padding-vertical:   8px;
826 | @breadcrumb-padding-horizontal: 15px;
827 | //** Breadcrumb background color
828 | @breadcrumb-bg:                 #f5f5f5;
829 | //** Breadcrumb text color
830 | @breadcrumb-color:              #ccc;
831 | //** Text color of current page in the breadcrumb
832 | @breadcrumb-active-color:       @gray-light;
833 | //** Textual separator for between breadcrumb elements
834 | @breadcrumb-separator:          "/";
835 | 
836 | 
837 | //== Carousel
838 | //
839 | //##
840 | 
841 | @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
842 | 
843 | @carousel-control-color:                      #fff;
844 | @carousel-control-width:                      15%;
845 | @carousel-control-opacity:                    .5;
846 | @carousel-control-font-size:                  20px;
847 | 
848 | @carousel-indicator-active-bg:                #fff;
849 | @carousel-indicator-border-color:             #fff;
850 | 
851 | @carousel-caption-color:                      #fff;
852 | 
853 | 
854 | //== Close
855 | //
856 | //##
857 | 
858 | @close-font-weight:           bold;
859 | @close-color:                 #000;
860 | @close-text-shadow:           0 1px 0 #fff;
861 | 
862 | 
863 | //== Code
864 | //
865 | //##
866 | 
867 | @code-color:                  #c7254e;
868 | @code-bg:                     #f9f2f4;
869 | 
870 | @kbd-color:                   #fff;
871 | @kbd-bg:                      #333;
872 | 
873 | @pre-bg:                      #f5f5f5;
874 | @pre-color:                   @gray-dark;
875 | @pre-border-color:            #ccc;
876 | @pre-scrollable-max-height:   340px;
877 | 
878 | 
879 | //== Type
880 | //
881 | //##
882 | 
883 | //** Horizontal offset for forms and lists.
884 | @component-offset-horizontal: 180px;
885 | //** Text muted color
886 | @text-muted:                  @gray-light;
887 | //** Abbreviations and acronyms border color
888 | @abbr-border-color:           @gray-light;
889 | //** Headings small color
890 | @headings-small-color:        @gray-light;
891 | //** Blockquote small color
892 | @blockquote-small-color:      @gray-light;
893 | //** Blockquote font size
894 | @blockquote-font-size:        (@font-size-base * 1.25);
895 | //** Blockquote border color
896 | @blockquote-border-color:     @gray-lighter;
897 | //** Page header border color
898 | @page-header-border-color:    @gray-lighter;
899 | //** Width of horizontal description list titles
900 | @dl-horizontal-offset:        @component-offset-horizontal;
901 | //** Horizontal line color.
902 | @hr-border:                   @gray-lighter;
903 | 


--------------------------------------------------------------------------------
/src/_includes/head.jade:
--------------------------------------------------------------------------------
 1 | meta(charset="utf-8")
 2 | 
 3 | title Angular Code Review
 4 | 
 5 | base(href="/")
 6 | meta(name="viewport", content="width=device-width, initial-scale=1.0")
 7 | 
 8 | link(rel="stylesheet", type="text/css", href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css")
 9 | link(rel="stylesheet", type="text/css", href="/app.css")
10 | link(rel="icon", type="image/x-icon", href="/favicon.ico")
11 | 
12 | script(src="//code.jquery.com/jquery-2.2.4.min.js", integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=", crossorigin="anonymous")
13 | script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS", crossorigin="anonymous")
14 | 


--------------------------------------------------------------------------------
/src/_includes/site-footer.jade:
--------------------------------------------------------------------------------
1 | .site-footer
2 |     h2 Looking for someone who can review your AngularJS application?
3 | 


--------------------------------------------------------------------------------
/src/_karma-before-each.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 | import mocks from 'angular-mocks';
3 | 
4 | beforeEach(angular.mock.module('app'));
5 | 


--------------------------------------------------------------------------------
/src/_layout.jade:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | html
 3 |     head
 4 | 
 5 |         include ./_includes/head
 6 | 
 7 |     body
 8 | 
 9 |         include ./components/site-header/site-header
10 | 
11 |         .site-main
12 |             != yield
13 | 
14 |         include ./components/site-footer/site-footer
15 | 
16 |         script(src="https://use.typekit.net/wik5qpy.js")
17 |         script.
18 |             try{Typekit.load({ async: true });}catch(e){}
19 | 
20 |         script.
21 |             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject'] = r;i[r]=i[r]||function(){
22 |             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
23 |             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
24 |             })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
25 | 
26 |             ga('create', 'UA-78731194-1', 'auto');
27 |             ga('send', 'pageview');
28 | 


--------------------------------------------------------------------------------
/src/angular-2/_build/angular-2.less:
--------------------------------------------------------------------------------
 1 | @import "../../_build/variables.less";
 2 | 
 3 | .page.page--angular-2{
 4 | 
 5 |   .page-header{
 6 |     img{
 7 |       width: 240px;
 8 |     }
 9 |   }
10 | 
11 |   .page-header__signup-form{
12 |     .btn{
13 |       text-transform: uppercase;
14 |       font-weight: 700;
15 |     }
16 |     i.fa{
17 |       margin-left: 8px;
18 |     }
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/src/angular-2/img/angular.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 5 | 
10 | 
11 | 	
12 | 	
13 | 	
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/src/angular-2/index.jade:
--------------------------------------------------------------------------------
 1 | .page.page--angular-2
 2 | 
 3 |     .page-header
 4 |         img(src="/angular-2/img/angular.svg")
 5 |         h1 Angular 2
 6 |         h2 Code Review Checklist
 7 |         p Coming soon
 8 |         p Want to receive a notification when the Angular 2 checklist is available?
 9 | 
10 |         .row
11 |             .col-sm-4.col-sm-offset-4
12 |                 .page-header__signup-form
13 |                     form(
14 |                     action="//jvandemo.us7.list-manage.com/subscribe/post?u=f5d2e64a1e160cafcc91f74a8&id=0c91c917e9",
15 |                     method="post",
16 |                     class="validate",
17 |                     target="_blank",
18 |                     novalidate="")
19 |                         .form-group
20 |                             input.form-control(type="email", value="", placeholder="Your email address", required="", name="EMAIL")
21 |                         button.btn.btn-danger(type="submit", name="subscribe")
22 |                             | Yes, please notify me
23 |                             i.fa.fa-long-arrow-right
24 | 


--------------------------------------------------------------------------------
/src/angularjs/_build/angularjs.less:
--------------------------------------------------------------------------------
 1 | @import "../../_build/variables.less";
 2 | @import "../../_build/mixins.less";
 3 | 
 4 | .page.page--angularjs{
 5 | 
 6 |   .page-header{
 7 |     img{
 8 |       width: 240px;
 9 |     }
10 |   }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/src/angularjs/img/angularjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/src/angularjs/img/angularjs.png


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/src/app.js


--------------------------------------------------------------------------------
/src/app.less:
--------------------------------------------------------------------------------
 1 | @import "_build/variables.less";
 2 | @import "_build/bootstrap";
 3 | @import "_build/cards.less";
 4 | @import "_build/lists.less";
 5 | @import "_build/homepage.less";
 6 | @import "_build/page-header.less";
 7 | @import "_build/sections.less";
 8 | @import "components/site-header/_build/site-header.less";
 9 | @import "components/site-footer/_build/site-footer.less";
10 | @import "angularjs/_build/angularjs.less";
11 | @import "angular-2/_build/angular-2.less";
12 | 
13 | /**************************************************************************
14 |  * This is the main stylesheet referenced from index.jade
15 |  *
16 |  * This LESS file is automatically compiled to a CSS file.
17 |  *
18 |  * Use @import to import component specific styles or includes, for example:
19 |  * @import "components/_less/variables.less";
20 |  * @import "components/some-component/_build/styles.less";
21 |  *
22 |  * Delete this file and use app.scss or app.css if you prefer
23 |  * SCSS or plain CSS.
24 |  *
25 |  * When using LESS or SCSS, the resulting CSS is automatically
26 |  * minified and autprefixed.
27 |  *************************************************************************/
28 | 
29 | /**************************************************************************
30 |  * Sample styles for index.jade, feel free to delete everything below
31 |  * this line and add your own styles...
32 |  *************************************************************************/
33 | 
34 | html{
35 |   font-size: @font-size-base;
36 | }
37 | 
38 | body{
39 |   font-size: 100%;
40 |   -webkit-font-smoothing: antialiased;
41 |   -moz-osx-font-smoothing: grayscale;
42 |   -webkit-text-size-adjust: none;
43 |   font-weight: 300;
44 |   background: #efefef;
45 | }
46 | 
47 | a{
48 |   cursor: pointer;
49 | }
50 | 
51 | a.btn{
52 |   text-transform: uppercase;
53 | }
54 | 


--------------------------------------------------------------------------------
/src/assets/img/angular.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 5 | 
10 | 
11 | 	
12 | 	
13 | 	
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/src/assets/img/angularjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jvandemo/angularcodereview-com/2f87a6e47d588b004bc504669f038794cbbc0990/src/assets/img/angularjs.png


--------------------------------------------------------------------------------
/src/build.js:
--------------------------------------------------------------------------------
1 | !function(e){function r(e){for(var r=[],t=0,n=e.length;n>t;t++)-1==f.call(r,e[t])&&r.push(e[t]);return r}function t(e,t,n,o){if("string"!=typeof e)throw"System.register provided no module name";var l;l="boolean"==typeof n?{declarative:!1,deps:t,execute:o,executingRequire:n}:{declarative:!0,deps:t,declare:n},l.name=e,e in p||(p[e]=l),l.deps=r(l.deps),l.normalizedDeps=l.deps}function n(e,r){if(r[e.groupIndex]=r[e.groupIndex]||[],-1==f.call(r[e.groupIndex],e)){r[e.groupIndex].push(e);for(var t=0,o=e.normalizedDeps.length;o>t;t++){var l=e.normalizedDeps[t],a=p[l];if(a&&!a.evaluated){var i=e.groupIndex+(a.declarative!=e.declarative);if(void 0===a.groupIndex||a.groupIndex=0;l--){for(var i=t[l],u=0;uo;o++){var a=t.importers[o];if(!a.locked){var i=f.call(a.dependencies,t);a.setters[i](n)}}return t.locked=!1,r});if(t.setters=o.setters,t.execute=o.execute,!t.setters||!t.execute)throw new TypeError("Invalid System.register form for "+r.name);for(var i=0,d=r.normalizedDeps.length;d>i;i++){var u,v=r.normalizedDeps[i],g=p[v],m=c[v];m?u=m.exports:g&&!g.declarative?u=g.module.exports&&g.module.exports.__esModule?g.module.exports:{"default":g.module.exports,__useDefault:!0}:g?(a(g),m=g.module,u=m.exports):u=s(v),m&&m.importers?(m.importers.push(t),t.dependencies.push(m)):t.dependencies.push(null),t.setters[i]&&t.setters[i](u)}}}function i(e){var r,t=p[e];if(t)t.declarative?u(e,[]):t.evaluated||d(t),r=t.module.exports;else if(r=s(e),!r)throw new Error("Unable to load dependency "+e+".");return(!t||t.declarative)&&r&&r.__useDefault?r["default"]:r}function d(r){if(!r.module){var t={},n=r.module={exports:t,id:r.name};if(!r.executingRequire)for(var o=0,l=r.normalizedDeps.length;l>o;o++){var a=r.normalizedDeps[o],u=p[a];u&&d(u)}r.evaluated=!0;var s=r.execute.call(e,function(e){for(var t=0,n=r.deps.length;n>t;t++)if(r.deps[t]==e)return i(r.normalizedDeps[t]);throw new TypeError("Module "+e+" not declared as a dependency.")},t,n);s&&(n.exports=s)}}function u(r,t){var n=p[r];if(n&&!n.evaluated&&n.declarative){t.push(r);for(var o=0,l=n.normalizedDeps.length;l>o;o++){var a=n.normalizedDeps[o];-1==f.call(t,a)&&(p[a]?u(a,t):s(a))}n.evaluated||(n.evaluated=!0,n.module.execute.call(e))}}function s(e){if(v[e])return v[e];var r=p[e];if(!r)throw"Module "+e+" not present.";o(e),u(e,[]),p[e]=void 0;var t=r.module.exports;return(!t||!r.declarative&&t.__esModule!==!0)&&(t={"default":t,__useDefault:!0}),v[e]=t}var p={},f=Array.prototype.indexOf||function(e){for(var r=0,t=this.length;t>r;r++)if(this[r]===e)return r;return-1},c={},v={};return function(r,n){var o,o={register:t,get:s,set:function(e,r){v[e]=r},newModule:function(e){return e},global:e};o.set("@empty",{}),n(o);for(var l=0;l