Coder Social home page Coder Social logo
quickstart-ng2

ui-router / quickstart-ng2 Goto Github PK

View Code? Open in 1sVSCode Editor NEW
65.0 12.0 20.0 1.84 MB

DEPRECATED -- See https://github.com/ui-router/quickstart-angular

Home Page: https://github.com/ui-router/quickstart-angular

License: MIT License

TypeScript 44.83% HTML 2.51% CSS 6.92% JavaScript 45.74%

quickstart-ng2's Introduction

Deprecated in favor of Angular-CLI starter: https://github.com/ui-router/quickstart-angular

UI-Router for Angular 2 QuickStart Source

Start development

Install the npm packages described in the package.json and verify that it works:

git clone https://github.com/ui-router/quickstart-ng2.git
cd quickstart-ng2
npm install
npm run tsc
npm start

UI-Router for NG2 quickstart highlights:

Foo module

  • Simple nested views
  • Update browser hash value

Bar module

  • Resolve data from server (bar list)
  • Query parameter
  • Nested view (bar detail renders inside bar list)

Baz module

  • This module is lazy loaded using a "Future State" with a lazyLoad function
  • Resolve data from server (baz list)
  • Path parameter
  • View targeting (baz detail replaces the baz list)

You're ready to write your application.

Remember the npm scripts in package.json:

  • npm start - runs the compiler and a server at the same time, both in "watch mode".
  • npm run tsc - runs the TypeScript compiler once.
  • npm run tsc:w - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
  • npm run lite - runs the lite-server, a light-weight, static file server, written and maintained by John Papa and Christopher Martin with excellent support for Angular apps that use routing.
  • npm run typings - runs the typings tool.
  • npm run postinstall - called by npm automatically after it successfully completes package installation. This script installs the TypeScript definition files this app requires.

(This repo is forked from https://github.com/angular/quickstart)

quickstart-ng2's People

Contributors

christopherthielen avatar wardbell avatar davideast avatar kahlil avatar cgmartin avatar DeborahK avatar filipesilva avatar Foxandxss avatar johnjacobkenny avatar rkirov avatar reyramos avatar VDMT avatar surmacz avatar zurie avatar

Stargazers

JMV avatar  avatar David avatar Rainey avatar Jianyi Liu avatar Ryan Luton avatar Ogun avatar Ken Takagiwa avatar 金飞 avatar Roy Ling avatar timelyxyz avatar Dan Jarvis avatar Charandas avatar o(mar)²zougui avatar Craig C. avatar Ajit Singh avatar ing avatar Shahzad Nawaz avatar  avatar Daniel Comas Fernández avatar Cat like fish avatar Matheus Machado avatar Brian Frichette avatar Karol Wójcik avatar Andrew Solovev avatar Josivan de Souza avatar Markus Ahonen avatar Rajan Rastogi avatar Jade avatar ZeTek avatar Funk avatar Viacheslav Shabelnyk avatar dreamapple avatar Stephen Knutter avatar Huanfeng Chen avatar Dmitri avatar  avatar Park Sang kil avatar Stefan Meschke avatar Yiling Lu avatar Andrey Kolkov avatar Darryl Porter avatar  avatar Alain Viret avatar Julián Gutiérrez avatar Jon Concepcion avatar Alex Bennett avatar  avatar Alexander Torres avatar Werner Echezuría avatar Kamil Dąbrowski avatar Bernardo Simoes avatar Wojciech Polak avatar Austin avatar Anthony avatar Brady avatar Jake Niemiec avatar PatrickJS avatar Nathan Walker avatar Somkiat Puisungnoen avatar Alexander Mikuta avatar Chris Witko avatar Matthew McLeod avatar Jens Krause avatar Olivier Combe avatar

Watchers

Nate Abele avatar Eddie Monge Jr avatar Julian Hu avatar James Cloos avatar Viacheslav Shabelnyk avatar Wesley Cho avatar Chris Thielen avatar Andrey Kolkov avatar Park Sang kil avatar  avatar Eric Martinez avatar  avatar

quickstart-ng2's Issues

Beta.3?

npm install can't find [email protected],

npm ERR! No compatible version found: [email protected]^1.0.0-beta.3
npm ERR! Valid install targets:
npm ERR! 1.0.0-beta.2, 1.0.0-beta.1, 1.0.0-alpha.5, 1.0.0-alpha.4, 1.0.0-alpha.3, 1.0.0-alpha.2, 0.1.0-preview.0

and npm tsc fails to compile with [email protected]

node_modules/ui-router-ng2/ng2/uiRouterNgModule.d.ts(3,10): error TS2305: Module '"/home/scott/Doozee/Web/rates2/node_modules/@angular/core/index"' has no exported member 'NgModuleMetadataType'.
src/app.module.ts(25,3): error TS2345: Argument of type '{ imports: typeof BrowserModule[]; providers: ((TypeProvider | ValueProvider | ClassProvider | Ex...' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/bar/bar.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/baz/baz.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/foo/foo.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.

Where do we find [email protected]?

Trouble getting start with repo

Did a fresh install and cant get it to load anything on the page, node 8.9.1 and npm 5.5.1. Just trying to get started here. I blew away my node modules and reinstalled as well with no success.

screen shot 2017-12-01 at 6 56 32 pm

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Simplified state definition

If I have a state definition like this (shortened for readibility):

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {component: ProfileComponent},  //  <--- this 
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

and a ProfileComponent that only has a template with no logic:

@Component({
    template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
})
export class ProfileComponent { }

can I define this state without creating ProfileComponent so state definition becomes something like this:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
        views: {
            // <--- removed ProfileComponent was here
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

Is it possible to do something like this?

EDITED:
This is probably even better:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`},
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

this way I could replace [email protected] view as well, because it is static text at bottom of the page.

Lite server could not start

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm update
[email protected] D:\!Projects\TypeScript\ui-router\quickstart-ng2
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]0-beta.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm start

> [email protected] start D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc && npm run watch


> [email protected] tsc D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc


> [email protected] watch D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc:w & npm run lite


> [email protected] tsc:w D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc -w

00:06:46 - Compilation complete. Watching for file changes.

When I change this line:
"watch": "npm run tsc:w & npm run lite",
to
"watch": "npm run lite & npm run tsc:w",
It's run as expected.

00:06:46 - Compilation complete. Watching for file changes.
Terminate batch job (Y/N)? y

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm start

> [email protected] start D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc && npm run watch


> [email protected] tsc D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc


> [email protected] watch D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run lite & npm run tsc:w


> [email protected] lite D:\!Projects\TypeScript\ui-router\quickstart-ng2
> lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.119:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.119:3001
 --------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
16.09.06 00:10:58 200 GET /index.html
16.09.06 00:10:58 200 GET /node_modules/es6-shim/es6-shim.min.js
16.09.06 00:10:58 200 GET /node_modules/zone.js/dist/zone.js
16.09.06 00:10:58 200 GET /systemjs.config.js
16.09.06 00:10:58 200 GET /styles.css
16.09.06 00:10:58 200 GET /node_modules/reflect-metad

UI router ng2 not working for ng4 - which is backward compatible?!

"dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/compiler-cli": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/platform-server": "^4.0.2",
    "@angular/router": "^4.0.2",
    "typescript": "^2.2.2",
    "ui-router-ng2": "^1.0.0-beta.4",
    "zone.js": "^0.8.5"

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]
1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN [email protected] requires a peer of @angular/[email protected]^2.0.0 but none
was installed.
npm WARN [email protected] requires a peer of @angular/[email protected]^2.
0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected]^2.0.0 but none
was installed.
npm WARN @angular/[email protected] requires a peer of [email protected]^0.7.2 but none was ins
talled.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
.10 but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected]^2.3.1 bu
t none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected]^2.3.1 but
none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected]^3.3.1 bu
t none was installed.
.....................................

ERROR in Error encountered resolving symbol values statically. Only initialized variables
and constants can be referenced because the value of this variable is needed by the templa
te compiler (position 15:22 in the original .ts file), resolving symbol ROUTES in D:/.............s/node_modules/@angular/router/src/router_config_loader.d.ts, resolving sy
mbol makeRootProviders in D:/..............s/node_modules/ui-router-ng2/lib/uiRoute
rNgModule.d.ts, resolving symbol UIRouterModule.forRoot in D:/...................s/node_
modules/ui-router-ng2/lib/uiRouterNgModule.d.ts, resolving symbol AppModule in D:/................s/src/app/app.module.ts, resolving symbol AppModule in D:/..............s/src/app/app.module.ts

ERROR in .//ui-router-ng2/lib/uiRouterNgModule.js
Module not found: Error: Can't resolve '@angular/router/src/router_config_loader' in 'D:,,,,,,s\node_modules\ui-router-ng2\lib'
@ ./
/ui-router-ng2/lib/uiRouterNgModule.js 6:0-66
@ ./~/ui-router-ng2/lib/index.js
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.ts

Async loader

Hi,

I'm looking for a way to Async load routes on parent route activation. I know in v1 we could split the main application in multiple app modules. Now with v2, it seems more complex...

Thanks,

Jean

What is this error(Uncaught (in promise):, EXCEPTION: No provider for UISref!)?

Hi!
I try to use this template for my own project, and I get this error:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <div class="container">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" (init)="isCollapsed = true" (click)="isCollapsed = !isCollapsed">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="navbar-header" [ngbCollapse]="!isCollapsed && 'in'">
      <a class="navbar-brand" href="#">inFrame</a>
      <ul class="nav navbar-nav">
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.home">Главная <span class="sr-only">(current)</span></a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.about">О нас</a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.user.signup">Регистрация</a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-item nav-link" href>Вход</a>
        </li>
      </ul>
      <form class="form-inline pull-xs-right">
        <input class="form-control" type="text" placeholder="Искать...">
        <button class="btn btn-outline-success" type="submit">Поиск</button>
      </form>
    </div><!-- /.navbar-header -->
  </div><!-- /.container -->
</nav><!-- /.navbar -->

What this?

image

upgrade to use ng2.rc1

I tried to upgrade to RC1 but looks like ui-router version 1.0.0-alpha.5 is not out yet

multiple ui-views in default component?

is it possible to replicate multiple views in the default app state like we could do in angular 1.x?

e.g.

            .state('root', {
                url: '',
                abstract: true,
                views: {
                    'nav': {
                        templateUrl: 'app/core/views/navbar/navbar.html',
                        controller: 'navbarCtrl',
                        controllerAs: 'nav'
                    },
                    'footer': {
                        templateUrl: 'app/core/views/footer/footer.html',
                        controllerAs: 'footer'
                    }
                }
            })

for ng2 i now kinda hacked it and defined a app.home state which maps to /

let MAIN_STATES:Ng2StateDeclaration[] = [
  {
    name: 'app',
    url: '',
    component:AppComponent
  }
];
export let HOME_STATES: Ng2StateDeclaration = [
  {
    name: 'app.home',
    url: '/',
    views: {
      header:{component: NavComponent},
      $default: {component: MainComponent},
      footer: {component: FooterComponent}
    }
  }
];

all tries with abstract and directly defining the app main state failed

Update with ^4.0.0 Angular 2 version

Check possibility for updating the demo with the latest release of Angular 2?

I'll update comment step by step, yet for now, using the last version doesn't spit any error but the view after init does not update.

Angular-CLI and The future of quickstart-ng2 repository

I'd think I'd like the ui-router-ng2 quickstart to be Angular-CLI based. This might mean we no longer maintain this repository. Instead we may provide instructions for bootstrapping a new app using the CLI, then adding the few ui-router specific changes that are necessary.

This should also help future proof the quickstart.

Nested Views As Home "/" Route

Hi There,

I have a small question which I can't resolve.
How can I defined several routes and make them abstract and set the "/" of the application to be some nested route.
Example:
This is the ui-view that I want to return from index.html
''

Now I want that this ui-view will have a route which expose 3-4 more ui-views and this will be the "/" root url.

{
    name: "root", // This should take the above ui-view.
    views: {
        root: { component: LayoutComponent }
    }
},
{
    name: "root.layout",
    url: "/",
    views: {
        header: { component: HeaderComponent },
        sidebar: { component: SidebarComponent },
        content: { component: ContentComponent },
        footer: { component: FooterComponent }
    }
},

LayoutComponent - has 4 ui-views with the header/sidebar,etc...
So the application should start from root.layout.

Thanks, I will really appreciate help in this matter.

Upgrade to Angular 2 rc.5

Angular 2 RC.5 has changed a few things around introducing a bunch of breaking changes. Currently, it represents the expected public API of the 2.0 release according to the Angular dev team. Would be very helpful to have this Quickstart UI Router app upgraded to support the ngModule based rc.5 release.

running

does it open a tab automatically? or should i open it at specific port? could fine it in the docs either.

ui-router ng2 and Angular 4: almost got lazy loading working...need help

Hi

I am working my way through the angular 4 tutorial NgModules (https://angular.io/docs/ts/latest/guide/ngmodule.html#!#root-module) and I am implementing this in my Meteor App. This all works fine, I just ran into an issue converting the Lazy Load as featured in the Quickstart (https://github.com/ui-router/quickstart-ng2/blob/master/src/bootstrap.ts).

I think the culprit is the

 { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader 

where my browser is complaining

modules.js?hash=40a315e…:75443 ReferenceError: System is not defined

when I try to transition to my lazy loaded Crisis component.
I am following the BAZ example combined with Angular 4 Crisis example.

Should I just add SystemJS (why would this be necessary for lazy loading anyway).

You can see my app.module at
https://bitbucket.org/mattijsspierings/angular4-meteor/src/7a318d1b910576f7d81ed8bdf8466fa9371d89ca/client/imports/?at=router. Is should be publicly available.

Hope anyone can point me in the right direction.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.