How to Install on Ng1 #4

Millen31 · 2017-03-03T22:42:03Z

Hello,

can you please provide more information about how to install the sticky-states for Angular 1. I'm using bower instead of NPM. How about the ui-router-core on bower?

How should I import the required files? Usually I'm using the <script> tag to import files.
The Import-Function doesn't work on the Client-Side (or require).

import {StickyStatesPlugin} from "ui-router-sticky-states";

angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {
$uiRouterProvider.plugin(StickyStatesPlugin);
});

Best Regards

bennettatoms · 2017-03-08T14:29:16Z

I am running into the same issue. I just upgraded to 1.0.0-rc.1 from 0.3.x and reworked a lot of my application in the process, primarily in order to be able to take advantage of sticky states, but it's not clear how to configure them. Any advice would be much appreciated!

christopherthielen · 2017-03-08T14:33:27Z

I know that this is an issue today. I'll write up some instructions when I get back from vacation.

hinet2013 · 2017-03-08T14:45:53Z

Thank you Chris. In the meanwhile i tried to compile by myself the .ts files...

After npm run build i don't know how to handle the index.js & stickyStates.js that got generated in lib and lib-esm directories

Can we get a quick advice on how to proceed to obtain a single js file to be referenced in html file via <script src='..> and then configure the plugin retrieving the instance from window (like what we already do for visualizer plugin..)

christopherthielen · 2017-03-08T15:13:05Z

Sticky states imports ui-router-core but angular-ui-router doesn't have that. If using UMD bundles, we will need a shim that re-exposes angular-ui-router as ui-router-core. Then you can get the window['ui-router-sticky-states'] and find the plugin class to register with the router

hinet2013 · 2017-03-08T15:33:41Z

I tried the howto at the end of the page https://ui-router.github.io/ng1/ but with ui-router-core and sticky-states instead of angular-ui-router.
Ended up with a huge file of 8k LOC (feeling to having duplicated inside of plugin something that was already present in aungular-ui-router)
The file exposes the plugin instance through window object but when loaded an error raised about 'stateDeclaration params is not a function'

Is this attempt totally random?

dsills22 · 2017-03-20T20:38:37Z

I am also caught in between upgrading to ui-router 1.0.0-beta.3 and wanting a sticky states feature, but this port (of the sticky states feature on the legacy ui-router) is not providing a simple js release file. @christopherthielen, can you please provide one?

dsills22 · 2017-03-28T22:27:23Z

Hi all (@witoldszpur, @hinet2013), I ended up writing a migration of the typescript code to js, which works for me. The code can be found here:

https://stackoverflow.com/questions/42914806/ui-router-state-change-keep-controller-and-scope-but-destroy-dom/

Hopefully this helps you :)

pamo · 2017-04-18T01:52:32Z

is porting from TS to JS the only option at this point?

Aduer · 2017-04-18T09:49:00Z

Hi Chris, what do you mean with

shim that re-exposes angular-ui-router as ui-router-core
??

I tried to mimic the way the Visualizer bundle is generated

`
git clone --branch 3.0.0 https://github.com/ui-router/core.git ui-router-core
cd ui-router-core
npm install
npm link
npm run build

cd ..

#Building Visualizer plugin from sources: the bundle built by me works in my application...
git clone --branch 3.1.1 https://github.com/ui-router/visualizer.git
cd visualizer
move bundles bundles.ORIG
npm install
npm link ui-router-core
npm run build

cd ..

git clone --branch 1.2.0 https://github.com/ui-router/sticky-states.git
cd sticky-states

//1 - Edited package.json to add 'bundle' commands ispired by Visualizer plugin
//2 - Edited tsconfig.json to mimic Visualizer's configuration
//3 - Copied webpack.config.js from Visualizer and adapted naming

npm install
npm link ui-router-core
npm run build
`

I was able to load the plugin at config time and get the StickyStatesPlugin instance but it crashes in attempting to use some 'core' API (seems that he uses a bundled copy of it instead of the one provided by anular-ui-router)

Can you provide some hints?

PS. the solution proposed by dsills22 based on decoration approach does not worked for me..

dsills22 · 2017-04-18T21:32:33Z

@Aduer, I updated with a plunker in case it might help you or others: http://plnkr.co/edit/JD9fEVnjvFMJmnmRIM2v?p=preview

Aduer · 2017-04-27T07:38:42Z

Thank you @dsills22 . Your solution works in general, but i encounter a crash when a redirect happens with options 'reload: true'

TypeError: P(...) is undefined Stack trace: e@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:7:29510 on</e.prototype.hookBuilder@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:17593 e@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:12970 jr</e.prototype.create@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:8:25409 StickyStatesUtilFactory/SERVICE.calculateStickyTreeChanges@http://xxxxxxxxxxxxx/vendor/static/sticky-states-dsills2/sticky-states-util.js:205:43 $delegate.create@http://xxxxxxxxxxxxx/resources/js/app.min.js:2:22176 Br</e.prototype.transitionTo@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:7485 $delegate.transitionTo@http://xxxxxxxxxxxxx/resources/js/app.min.js:2:23177 Br</e.prototype.go@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:6134 <here $state.go(stateObject, params, {reload: true}

voltechs · 2017-05-18T16:46:31Z

@dsills22 Thank you so much for your work on this!

Has anyone gotten this to work with modals? I want modals to pop up via deep linking, with a default view in a different state/view. For example, a dashboard.

Aduer · 2017-05-19T06:14:16Z

After recent updates by the author no more workaround are required!
I managed to make everything working by

Stopped using the full angular-ui-router bundle in favor to the plugin version (ui-router-angularjs.min.js) available in the same bower package "angular-ui-router": "^1.0.3"
Using ui-router-core v5.0.3 compiled & bundled by me from sources by using the npm scripts that are shipped with the source code (again: thank you chris!)
Using ui-router-sticky-states v1.3.0 compiled & bundled by me from sources using the npm scripts that have been recenlty added to the source code

With this stuff i got the full-functionality on Angular 1 with plain JS, so in my point of view this issue can be closed

edit by cthielen: do not use angular-ui-router package. instead, use @uirouter/angularjs

pamo · 2017-05-19T11:14:21Z

@Aduer, thank you for posting these steps! It would be very helpful if these steps were documented with explicit examples somewhere in the documentation for getting started in this repo/project before the issue is closed. 😅
I'm sure the people in this thread (including my team and me) would be able to verify them.

Aduer · 2017-05-20T09:23:14Z

@pamo In order to use sticky-states you need to make it running beside the ui-router-core host. In case your application already uses a bundle that includes the angular 1 stuff+core you have to replace that bundle with a ui-router-core 'standalone' pluginhost and a angular 1 plugin, otherwise you will end up with two instances of the ui-router-core running in your app.

The angular 1 router plugin is already available on bower and i used that. The other components (core & sticky state) are not availabe so you have to build them from sources (but it's quite easy because the author has already provided the scripts to do that beside the code)

The script that follow can be launched in a directory outside you project (in order to not pollute everything) and then you can copy & paste only the built libraries inside your project where do you prefer

mkdir WORKSPACE
cd WORKSPACE

git clone --branch 5.0.3 https://github.com/ui-router/core.git ui-router-core
cd ui-router-core
npm install
npm run build
echo "now you can deploy the file WORKSPACE/ui-router-core/_bundles/ui-router-core.min.js and include int in your html file"

cd ..
git clone --branch 1.3.0 https://github.com/ui-router/sticky-states.git
cd sticky-states
npm install
echo "WORKSPACE/sticky-states/bundles/ui-router-sticky-states.js should have been already generated as a post install script.. deploy it in your app and include it in your html file"

cd ..
bower init (you can provide meaningless info to the question asked by the wizard)
bower install angular-ui-router
echo "Grab only the file  bower_components/angular-ui-router/release/ui-router-angularjs.min.js and deploy it to your app and include it in your html file"

Hope this works, i'm not at work now and i'm not able to check if this was the routine that i really did

jfoo1984 · 2017-05-20T16:10:06Z

Thanks @Aduer! I'll be trying those instructions out, and let you know if i find anything different!

christopherthielen · 2017-05-30T03:05:22Z

New release of sticky states 1.4.1 should address many problems from this thread.

For webpack + (ES6 or Typescript) users:

import { StickyStatesPlugin } from '@uirouter/sticky-states';
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

For webpack + ES6 users:

var StickyStatesPlugin = require('@uirouter/sticky-states').StickyStatesPlugin;
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

For UMD bundle <script> tag users:

var StickyStatesPlugin = window['@uirouter/sticky-states'].StickyStatesPlugin;
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

jfoo1984 · 2017-05-30T16:27:51Z

Thanks @christopherthielen ! will give it a shot soon.

killersite · 2017-06-12T18:59:44Z

@christopherthielen when I try to follow your instructions above I get a build error like - "invalid expression export' or similar.
My webpack babel loader is ignoring everything in 'node_modules' so I think it does not recognize the ES6 code I am referencing with @uirouter/sticky-states...
Any helpful ideas would be appreciated. Is there a demo NG1 app that shows the usage?
Thanks

mohanrao · 2017-06-22T14:58:16Z

@christopherthielen Can you provide any example If my project is using bower and old vanilla js without any js module loaders, then how to use sticky-state?

mathiasmoeller · 2017-06-27T08:02:43Z

@mohanrao I have exactly the same structure. Did you find a solution yet?

mohanrao · 2017-06-27T18:35:05Z

Right now I did what @Aduer suggested. No other options

cesiya23 · 2017-08-31T06:00:16Z

import {StickyStatesPlugin} from '@uirouter/sticky-states';

Codes above will reach webpack compile errors:

WARNING in ./~/@uirouter/sticky-states/lib/stickyStates.d.ts
    Module parse failed: /Users/Cynn/project/node_modules/@uirouter/sticky-states/lib/stickyStates.d.ts Unexpected token (2:8)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:8)
        at Parser.pp$4.raise (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:2221:15)
        at Parser.pp.unexpected (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:603:10)
        at Parser.pp.semicolon (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:581:61)
        at Parser.pp$1.parseExpressionStatement (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:966:10)
        at Parser.pp$1.parseStatement (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:730:24)
        at Parser.pp$1.parseTopLevel (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:638:25)
        at Parser.parse (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:516:17)
        at Object.parse (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:3098:39)
        at Parser.parse (/Users/Cynn/project/node_modules/webpack/lib/Parser.js:902:15)
        at DependenciesBlock.<anonymous> (/Users/Cynn/project/node_modules/webpack/lib/NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (/Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
        at nextLoader (/Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
        at /Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
        at Storage.finished (/Users/Cynn/project/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
        at /Users/Cynn/project/node_modules/graceful-fs/graceful-fs.js:78:16
        at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
     @ ./~/@uirouter/sticky-states/lib ^\.\/.*$

I use webpack + ts-loader + babel to compile (code transform), here goes my webpack loader configuration:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'ng-annotate!babel?' + JSON.stringify({
          presets: ['es2015', 'stage-3'],
          plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
        }) + '!ts-loader?allowJsEntry=true' // plugins here is not necessary for everyone
      }
    ]
  }
};

I excluded node_modules directory in configuration of ts-loader, so modules in node_modules will not be parsed by webpack. There's a directory called _bundles includes compiled codes.

Thanks @christopherthielen .

🍨 Solution:

import uiRouter from 'angular-ui-router';
import {StickyStatesPlugin} from '@uirouter/sticky-states/_bundles/ui-router-sticky-states';
export default angular
  .module('router', [
    uiRouter
  ])
  .config(['$uiRouterProvider', function ($uiRouterProvider) {
    $uiRouterProvider.plugin(StickyStatesPlugin);
  }])
  .config(['$stateProvider', function ($stateProvider) {
    // states ...
    $stateProvider.state('app', {});
  }])
  .name;

devDependencies:

├── [email protected]
├─┬ @uirouter/[email protected]
├─┬ [email protected]
│ └── @uirouter/[email protected]

molehillrocker · 2017-09-07T12:05:16Z

In case anyone comes here that uses no bundler at all (like me), here is my approach:

Hit npm install @uirouter/core @uirouter/sticky-states @uirouter/angularjs.
Copy ui-router-core[.min].js, ui-router-sticks-states[.min].js and ui-router-angularjs[.min].js to a directory where you can load it from, e.g. your dist directory.
Include the scripts in your index.html:

<script src="/deps/angular-ui-router/release/ui-router-core.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-sticky-states.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-angularjs.js"></script>

Add the following code to your app.module.js (or similar):

angular.module('app.state', ['ui.router']).config([
  '$uiRouterProvider',
  function($uiRouterProvider) {
    var StickyStates = window['@uirouter/sticky-states'];
    $uiRouterProvider.plugin(StickyStates.StickyStatesPlugin);
  }
]);

ghost · 2017-12-20T15:14:33Z

This should definitely be put on the front README

buksy90 · 2018-01-09T09:35:12Z

What if copying files is not a possibility? Is it possible to create ng1-sticky-states github project that would be prebuild for ng1? Unfortunately, I need it to work with simple bower install.

christopherthielen · 2018-01-14T00:40:29Z

I added 5 example sticky-states projects:

AngularJS + npm + webpack
AngularJS + bower + script tags
AngularJS + npm + script tags
Angular CLI
Create React App

christopherthielen · 2018-01-14T00:41:24Z

What if copying files is not a possibility? Is it possible to create ng1-sticky-states github project that would be prebuild for ng1? Unfortunately, I need it to work with simple bower install.

Sticky states will not be published on bower. Bower is deprecated. You'll have to find some way to copy files from node_modules.

soroushNeshat · 2018-01-14T10:01:53Z

@christopherthielen Thank u very much for AngularJS + npm + script tags example . it worked for me

brazorf · 2018-04-03T15:29:36Z

This #4 (comment) worked for me.
Thanks @molehillrocker @Aduer @christopherthielen

manishb-socialcurry · 2018-10-01T15:24:51Z

In case anyone comes here that uses no bundler at all (like me), here is my approach:

Hit npm install @uirouter/core @uirouter/sticky-states @uirouter/angularjs.

Copy ui-router-core[.min].js, ui-router-sticks-states[.min].js and ui-router-angularjs[.min].js to a directory where you can load it from, e.g. your dist directory.

Include the scripts in your index.html:
<script src="/deps/angular-ui-router/release/ui-router-core.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-sticky-states.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-angularjs.js"></script>
Add the following code to your app.module.js (or similar):
angular.module('app.state', ['ui.router']).config([
  '$uiRouterProvider',
  function($uiRouterProvider) {
    var StickyStates = window['@uirouter/sticky-states'];
    $uiRouterProvider.plugin(StickyStates.StickyStatesPlugin);
  }
]);

@molehillrocker, I tried your solution. It somehow did not work for me. I then printed out the variable
StickyStates which prints an empty object "{ }" and when I print out StickyStates.StickyStatesPlugin, it tells me that it is undefined!

Where am I making a mistake?

Here is the stub from my index.html:

` <script src="scripts/plugins/angular-ui-router/release/ui-router-core.min.js" ></script>

  <script src="scripts/plugins/angular-ui-router/release/ui-router-angularjs.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/angular-ui-router.min.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/resolveService.min.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/stateEvents.min.js" ></script>

  <script src="scripts/plugins/angular-ui-router/release/ui-router-sticky-states.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/ui-router-dsr.min.js" ></script>

`
And, here is my app.js:

.config(['$uiRouterProvider', function($uiRouterProvider) { var StickyStates = window['@uirouter/sticky-states']; console.log("StickyStates: " + JSON.stringify(StickyStates)); console.log("StickyStatesPlugin: " + JSON.stringify(StickyStates.StickyStatesPlugin)); //$uiRouterProvider.plugin(StickyStatesPlugin); }]);

Please help.

manishb-socialcurry · 2018-10-01T15:38:35Z

Also, do you have to add all states using stateRegistry of $uiRouteProvider like @christopherthielen has done in his angularjs + npm + scripts example:

`var stateRegistry = $uiRouterProvider.stateRegistry;

stateRegistry.register({
name: 'home',
url: '/home',
sticky: true,
views: {
home: 'generic',
},
});`

Can I not add states the following way?:

`$stateProvider

        // setup an abstract state for the tabs directive
        .state('welcome', {
            url: '/',
            templateUrl: 'views/welcome-screen/welcome.html',
            controller: "authController"
        })
        .state('enterphonenumber', {
            url: '/enterphonenumber',
            templateUrl: 'views/signup/enterphonenumber.html',
            controller: "signupController"

        })
        .state('enterotp', {
            url: '/enterotp',
            templateUrl: 'views/signup/enterotp.html',
            controller: "signupController"
        })`

Millen31 changed the title ~~How to Install with Ng1~~ How to Install on Ng1 Mar 3, 2017

jfoo1984 mentioned this issue May 20, 2017

NPM Package? ui-router/dsr#1

Closed

mevludin90 mentioned this issue Jul 5, 2017

Resolves not working when enabling the sticky states plugin #3

Closed

mikeg0184 mentioned this issue Aug 7, 2017

Bug with dynamic parameters #13

Closed

christopherthielen closed this as completed Jan 14, 2018

manishb-socialcurry mentioned this issue Oct 2, 2018

Trouble using angularjs + npm + scripts solution #175

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to Install on Ng1 #4

How to Install on Ng1 #4

Millen31 commented Mar 3, 2017

bennettatoms commented Mar 8, 2017

christopherthielen commented Mar 8, 2017

hinet2013 commented Mar 8, 2017

christopherthielen commented Mar 8, 2017

hinet2013 commented Mar 8, 2017 •

edited

Loading

dsills22 commented Mar 20, 2017 •

edited

Loading

dsills22 commented Mar 28, 2017 •

edited

Loading

pamo commented Apr 18, 2017

Aduer commented Apr 18, 2017 •

edited

Loading

dsills22 commented Apr 18, 2017

Aduer commented Apr 27, 2017

voltechs commented May 18, 2017

Aduer commented May 19, 2017 •

edited by christopherthielen

Loading

pamo commented May 19, 2017

Aduer commented May 20, 2017 •

edited by christopherthielen

Loading

jfoo1984 commented May 20, 2017

christopherthielen commented May 30, 2017

jfoo1984 commented May 30, 2017

killersite commented Jun 12, 2017 •

edited

Loading

mohanrao commented Jun 22, 2017

mathiasmoeller commented Jun 27, 2017

mohanrao commented Jun 27, 2017

cesiya23 commented Aug 31, 2017 •

edited

Loading

molehillrocker commented Sep 7, 2017 •

edited

Loading

ghost commented Dec 20, 2017 •

edited by ghost

Loading

buksy90 commented Jan 9, 2018

christopherthielen commented Jan 14, 2018

christopherthielen commented Jan 14, 2018

soroushNeshat commented Jan 14, 2018

brazorf commented Apr 3, 2018

manishb-socialcurry commented Oct 1, 2018

manishb-socialcurry commented Oct 1, 2018

How to Install on Ng1 #4

How to Install on Ng1 #4

Comments

Millen31 commented Mar 3, 2017

bennettatoms commented Mar 8, 2017

christopherthielen commented Mar 8, 2017

hinet2013 commented Mar 8, 2017

christopherthielen commented Mar 8, 2017

hinet2013 commented Mar 8, 2017 • edited Loading

dsills22 commented Mar 20, 2017 • edited Loading

dsills22 commented Mar 28, 2017 • edited Loading

pamo commented Apr 18, 2017

Aduer commented Apr 18, 2017 • edited Loading

dsills22 commented Apr 18, 2017

Aduer commented Apr 27, 2017

voltechs commented May 18, 2017

Aduer commented May 19, 2017 • edited by christopherthielen Loading

pamo commented May 19, 2017

Aduer commented May 20, 2017 • edited by christopherthielen Loading

jfoo1984 commented May 20, 2017

christopherthielen commented May 30, 2017

jfoo1984 commented May 30, 2017

killersite commented Jun 12, 2017 • edited Loading

mohanrao commented Jun 22, 2017

mathiasmoeller commented Jun 27, 2017

mohanrao commented Jun 27, 2017

cesiya23 commented Aug 31, 2017 • edited Loading

molehillrocker commented Sep 7, 2017 • edited Loading

ghost commented Dec 20, 2017 • edited by ghost Loading

buksy90 commented Jan 9, 2018

christopherthielen commented Jan 14, 2018

christopherthielen commented Jan 14, 2018

soroushNeshat commented Jan 14, 2018

brazorf commented Apr 3, 2018

manishb-socialcurry commented Oct 1, 2018

manishb-socialcurry commented Oct 1, 2018

hinet2013 commented Mar 8, 2017 •

edited

Loading

dsills22 commented Mar 20, 2017 •

edited

Loading

dsills22 commented Mar 28, 2017 •

edited

Loading

Aduer commented Apr 18, 2017 •

edited

Loading

Aduer commented May 19, 2017 •

edited by christopherthielen

Loading

Aduer commented May 20, 2017 •

edited by christopherthielen

Loading

killersite commented Jun 12, 2017 •

edited

Loading

cesiya23 commented Aug 31, 2017 •

edited

Loading

molehillrocker commented Sep 7, 2017 •

edited

Loading

ghost commented Dec 20, 2017 •

edited by ghost

Loading