Work flow of angularJS with stateprovider

Question

Below is my project structure:

-modules
  --> mymodule
     -->controllers
     -->services
     -->views
     -->mymod.js
-app-route.js
-index.html

where

mymod.js:

'use strict';
angular.module('mymodule',[
   'myController.controllers',
   'myController.services'
]);

and app-route.js:

var myApp = angular.module('myApp', ['ngRoute', 'ui.router' ,'ngCookies', 'myModule', 'homeModule', 'app-custom-filters'
    ,'interceptor-ctrl', 'config'
    ]);

$urlRouterProvider.otherwise('/login');

        $stateProvider

            .state("addition", {
                url: "/addition",
                templateUrl: 'modules/views/show.html',
                controller: 'demoCtrl'
            })

Now what I want is:

I want to add a link in index.html like below

<li> <a href="/#/demourl"> <span>Link Test</span></a> </li>

and on clicking Link Test some operation will be done and shown on a html page view.html (present in views folder.)

I am confused how to do this step wise, I want to follow the structure defined above.

Please ask or edit the question if needed, I am already messed.

What specific part are you confused with? You already have one route set up, why would adding another be any different? — charlietfl, Jun 01 '16 at 12:44
Routing is just an example, I want this to be modified based on the structure. + I am confused with the working flow, after adding the link what are things I need to do with these controller,services and views via route. @charlietfl — MonsterJava, Jun 01 '16 at 12:50
Do you mean how to structure project in file directory? Still not clear what you are asking. Most prefer one file per component. Then use build tools to concatenate the js into one file for production — charlietfl, Jun 01 '16 at 12:56

Reshma Reghunatha Panicker · Answer 1 · 2016-06-01T12:43:00.497

Add new state demourl

$stateProvider

            .state("addition", {
                url: "/addition",
                templateUrl: 'modules/views/show.html',
                controller: 'demoCtrl'
            })
            .state("demourl", {
                url: "/demourl",
                templateUrl: 'modules/views/view.html',
                controller: 'viewCtrl'
            });

In index.html,

<li> <a ui-sref="demourl"> <span>Link Test</span></a> </li>

ui-sref="demourl" it will redirect user to demourl state.

demourl state will show the view.html

Refer this link for more details

Work flow of angularJS with stateprovider

1 Answers1