Skip to content
Snippets Groups Projects
Commit 1539611e authored by naren makwana's avatar naren makwana
Browse files

initial version for feb

parents
No related branches found
No related tags found
No related merge requests found
Showing
with 586 additions and 0 deletions
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
#System Files
.DS_Store
Thumbs.db
README.md 0 → 100644
# CoreNG
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
For help with this theme, check out [Our Private Git Server](https://git.mediapixeldesign.com)!
To become part of the development team (or to report an issue or just follow along with development),
simply send an email to ["support@mediapixeldesign.com"](mailto:support@mediapixeldesign.com) with the following information:
* Your Name
* Desired Username
* Desired Email
* Your license code
An email will be sent to you to setup your Gitlab Account
####Scroll Down For Theme Use Information!
Before starting to use this project, you will need to run a few commands
This project uses [Yarn](yarnpkg.com) instead of npm to provide a more reliable development experience over traditional NPM
* `npm install -g angular-cli`
* `npm install -g yarn`
* `yarn install`
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Basic setup
Inside `src->app->app.module.ts`, you will a variable called `defaultOptions` near the top,
```
const defaultOptions: ICoreOptions = {
appTitle : 'CoreNG',
openSidenavStyle: 'side',
closedSidenavStyle: 'icon overlay'
};
```
This is where you'll modify default theme options including the app title which shows in the browser title and in the expanded sidenav along with other options:
* appTitle - Appears in browser tab/window title & next to icon in expanded sidenav
* openSidenavStyle - Dictates the sidenav style when 'open' ['side', 'icon', 'icon overlay', 'hidden', push', 'off'] (will default to 'hidden' on mobile, unless set to 'off')
* closedSidenavStyle - Dictates the sidenav style when 'closed'
* fixedNavbar - Allows making navbar to be fixed (doesn't work perfect yet, will be fixed on mobile soon)
* sidenavOpened - Which sidenav style to start with
* Last sidenav position is saved to the users localStorage and will be restored on refresh
* titleSeparator - Character(s) which seperate appTitle from pageTitle in tab/window title
## Setup menu
1. Go to `src -> navigation -> menu-setup.tx`
2. Remove and modify items as needed
3. You will see the different possibilities for creating a MenuItem there to serve as examples
## Creating Routes
In your modules routing file, you must have the following syntax:
```
export const exampleRouting = RouterModule.forChild([
{
path : 'my-top-level-url', component : DefaultLayoutComponent, children : [
{path : '', redirectTo : 'my-component', pathMatch: 'full'},
{path : 'my-component', component : MyComponent},
]}
]);
```
You must use the DefaultLayoutComponent as your main path, then all actual components be set as children underneath!!
This top level path does NOT need to have a path set! (It can be blank (i.e. `''`'))
To lazy load your module, instead of importing it directly into AppModule, simple add it to app.routing.ts using `loadChildren()`
`{path : 'my-lazy-module', loadChildren : './path/to/my/lazy.module#LazyModule'}`
### Removing Examples
1. Delete examples folder
2. Remove `ExamplesModule.forRoot()` import from app.module.ts imports array and remove `import {ExamplesModule} from './examples/examples.module';`
3. Remove `SampleDialogComponent, SampleMenuDialogComponent, CompletedDialogComponent` from `entryComponents` array
4. Done
## Creating your own theme
1. Pick your 2 (or 3 if you want to modify the "warn" palette) colors
2. Go to http://mcg.mbitson.com/ and color box in the top right of the palette and paste in your color code
3. Click on view code (the clipboard icon) and click on "Angular JS 2 (Material 2)" and copy the code between the parenthesises
4. Paste into the appriopriate palette (whether primary or accent color) into `src->assets->scss->_variables.scss` (you will see a similar format currently there)
5. Repeat for accent color and your theme will be live!
6. (You can also manually set the primary(background) and secondary(font) colors for the sidenav (`$sidenav-primary-color` & `$sidenav-secondary-color`))
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
For production, I recommend compiling using the aot flag as well
### ~~ng build --aot --prod~~ (AoT currently broken in angular-cli@1.0.0-beta.26)
### Use `ng build --prod`
## Further help
To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
{
"project": {
"version": "1.0.0-beta.26",
"name": "core"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "c",
"mobile": false,
"styles": [
"styles.scss",
"../node_modules/prismjs/themes/prism.css"
],
"scripts": [
"../node_modules/prismjs/prism.js",
"../node_modules/google-material-color/dist/palette.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
import { CorePage } from './app.po';
describe('core App', function() {
let page: CorePage;
beforeEach(() => {
page = new CorePage();
});
it('should display message saying app works', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('app works!');
});
});
import { browser, element, by } from 'protractor';
export class CorePage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc-e2e",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
{
"name": "core",
"version": "1.4.0",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"repository": {
"url": "https://git.mediapixeldesign.com/mediapixeldesigns/CoreNg.git",
"type": "git"
},
"author": "support@mediapixeldesign.com",
"private": true,
"dependencies": {
"@angular/common": "2.4.5",
"@angular/compiler": "2.4.5",
"@angular/core": "2.4.5",
"@angular/flex-layout": "2.0.0-beta.3",
"@angular/forms": "2.4.5",
"@angular/http": "2.4.5",
"@angular/material": "2.0.0-beta.1",
"@angular/platform-browser": "2.4.5",
"@angular/platform-browser-dynamic": "2.4.5",
"@angular/router": "^3.4.5",
"angular2-google-maps": "^0.17.0",
"angular2-highcharts": "^0.4.1",
"angulartics2": "1.6.3",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"google-material-color": "^1.3.1",
"hammerjs": "^2.0.8",
"prismjs": "^1.5.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.5",
"@types/chai": "^3.4.34",
"@types/hammerjs": "^2.0.33",
"@types/highcharts": "4.2.42",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"@types/prismjs": "^1.4.18",
"angular-cli": "1.0.0-beta.26",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.0.10"
}
}
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
useAllAngular2AppRoots: true,
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e'
});
},
onPrepare: function() {
jasmine.getEnv().addReporter(new SpecReporter());
}
};
<router-outlet></router-outlet>
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
});
TestBed.compileComponents();
});
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
});
import {Component, ElementRef, OnInit} from '@angular/core';
import {Angulartics2GoogleAnalytics} from 'angulartics2';
import {NavigationService} from './navigation/navigation.service';
import {HostListener} from '@angular/core/src/metadata/directives';
import {Router, Event, NavigationStart, NavigationEnd} from '@angular/router';
import 'hammerjs';
@Component({
selector : 'app-root',
templateUrl : './app.component.html',
styleUrls : ['./app.component.scss']
})
export class AppComponent implements OnInit {
private pageTitle: string;
constructor(private _navigation: NavigationService, private _router: Router, private _elementRef: ElementRef, _analytics: Angulartics2GoogleAnalytics) {
}
ngOnInit() {
this._router.events.subscribe((event: Event) => {
if(event instanceof NavigationStart) {
this._navigation.setIsRouteLoading(true);
this._navigation.setBreadcrumbs(null); // Reset breadcrumbs before route change
this._navigation.setPageTitle(null); // Reset page title before route change
} else if(event instanceof NavigationEnd) {
this._navigation.setCurrentRoute((<NavigationEnd>event).urlAfterRedirects);
this._navigation.setIsRouteLoading(false);
let routerOutletComponent: HTMLElement = this._elementRef.nativeElement.getElementsByTagName('app-topnav')[0];
if(routerOutletComponent) {
routerOutletComponent.scrollIntoView(); // Scroll back to top after route change
}
}
});
this._navigation.pageTitle.subscribe(pageTitle => {
this.pageTitle = pageTitle;
});
}
@HostListener('window:resize', ['$event'])
private resize($event) {
// Need this to trigger change detection for screen size changes!
this._navigation.updateViewport();
}
}
import {BrowserModule} from '@angular/platform-browser';
import {NgModule, OpaqueToken} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {FlexLayoutModule} from '@angular/flex-layout';
import {MaterialModule, MdSnackBar} from '@angular/material';
import {HttpModule} from '@angular/http';
import {AgmCoreModule} from 'angular2-google-maps/core';
import {Angulartics2Module, Angulartics2GoogleAnalytics} from 'angulartics2';
import {routing} from './app.routing';
import {AppComponent} from './app.component';
import {SharedModule} from './shared/shared.module';
import {NavigationModule} from './navigation/navigation.module';
import {BaseService} from './shared/services/base.service';
import {SampleDialogComponent} from './examples/dialog/sample-dialog/sample-dialog.component';
import {SampleMenuDialogComponent} from './examples/dialog/sample-menu-dialog/sample-menu-dialog.component';
import {CompletedDialogComponent} from './examples/wizard/completed-dialog/completed-dialog.component';
import {ExamplesModule} from './examples/examples.module';
import {ICoreOptions} from './navigation/navigation.service';
const defaultOptions: ICoreOptions = {
appTitle : 'CoreNG',
openSidenavStyle: 'side',
closedSidenavStyle: 'icon overlay'
};
@NgModule({
declarations : [
AppComponent, SampleDialogComponent, SampleMenuDialogComponent, CompletedDialogComponent
],
imports : [
NavigationModule.forRoot(defaultOptions),
SharedModule.forRoot(),
ExamplesModule,
routing,
MaterialModule.forRoot(),
FlexLayoutModule.forRoot(),
AgmCoreModule.forRoot({
apiKey : 'YOUR_API_KEY_HERE' // Enter your key here!
}),
Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
BrowserModule,
FormsModule,
HttpModule,
],
providers : [BaseService, MdSnackBar],
entryComponents : [AppComponent, SampleDialogComponent, SampleMenuDialogComponent, CompletedDialogComponent],
bootstrap : [AppComponent]
})
export class AppModule {
}
import {Routes, RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
const appRoutes: Routes = [
{
path : 'auth', loadChildren : './authentication/authentication.module#AuthenticationModule'
},
{path : '', redirectTo : '/examples/dashboard', pathMatch: 'full'},
{path : '**', redirectTo : '/examples/dashboard'}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {AuthenticationService} from './authentication.service';
import {LoginComponent} from './login/login.component';
import {routing} from './authentication.routing';
import {SharedModule} from '../shared/shared.module';
import {RegisterComponent} from './register/register.component';
import {MaterialModule} from '@angular/material';
@NgModule({
imports : [routing, RouterModule, FormsModule, CommonModule, SharedModule, MaterialModule],
declarations : [
LoginComponent, RegisterComponent
],
providers : [
AuthenticationService
]
})
export class AuthenticationModule {
constructor() {
console.log('loaded auth module');
}
}
import {RouterModule} from '@angular/router';
import {LoginComponent} from './login/login.component';
import {RegisterComponent} from './register/register.component';
export const routing = RouterModule.forChild([
{ path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent}
]);
/* tslint:disable:no-unused-variable */
import { addProviders, async, inject } from '@angular/core/testing';
import { AuthenticationService } from './authentication.service';
describe('Service: Login', () => {
beforeEach(() => {
addProviders([AuthenticationService]);
});
it('should ...',
inject([AuthenticationService],
(service: AuthenticationService) => {
expect(service).toBeTruthy();
}));
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment