Giter Site home page Giter Site logo

ui-router / quickstart-ng2 Goto Github PK

View Code? Open in Web Editor NEW
64.0 64.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 People

Contributors

cgmartin avatar christopherthielen avatar davideast avatar deborahk avatar filipesilva avatar foxandxss avatar johnjacobkenny avatar kahlil avatar reyramos avatar rkirov avatar surmacz avatar vdmt avatar wardbell avatar zurie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

quickstart-ng2's Issues

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

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.

running

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

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.

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.

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.

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

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.

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: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN [email protected] requires a peer of @angular/core@^2.0.0 but none
was installed.
npm WARN [email protected] requires a peer of @angular/platform-browser@^2.
0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/http@^2.0.0 but none
was installed.
npm WARN @angular/[email protected] requires a peer of zone.js@^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/common@^2.3.1 bu
t none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.3.1 but
none was installed.
npm WARN [email protected] requires a peer of @angular/router@^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

Beta.3?

npm install can't find [email protected],

npm ERR! No compatible version found: ui-router-ng2@^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]?

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

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]

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

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

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

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},
            'help@app': {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},
            'help@app': {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},
            'help@app': {component: ProfileHelpComponent},
        },
    },
];

this way I could replace help@app view as well, because it is static text at bottom of the page.

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.