current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

Edit: Here is the complete code at Plunker. Though I can not c anything in execution but same code working at local. However gives a console error though

It all works perfect. But due to :id in /news/:id/, i am getting jquery/angular errors in console which can not be tracked anywhere in my code

I can not c What i am doing wrong.

Edit: Solved plunker https://plnkr.co/edit/FWcuBgGpVdMj3CroFrYJ

share|improve this question
    
What would you like to achieve? Can you create plunker? – krutkowski86 Jul 19 at 12:07
    
@irhabi.. Plunker is out there. Achievement is off-course running the app error free with that minimal; structure. Along with headers and dynamic values for news/id – Sami Jul 21 at 15:40
up vote 2 down vote accepted

First of all you are trying to use ui-router but you're including ngRoute script in your plunker. Change it to

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

Then everything should work fine!

I suggest you a few changes...

1. Use ui-sref instead of href because it's much easier to define

ui-sref="post({id:1})" which turns into href="#/news/1"

If you would like to change url some day, then you will have to just change your route file, not each href.

$stateProvider .state('post', { url: "news/:id"

or

$stateProvider .state('post', { url: "archive/:id"

or

$stateProvider .state('post', { url: "whatever/:id"

2. Use abstract state

In your example it's a way better to define abstract state which holds header, content and footer - it's a typical use case.

ui-router Abstract States

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

Some examples of how you might use an abstract state are:

To prepend a url to all child state urls. To insert a template with its own ui-view(s) that its child states will populate. Optionally assign a controller to the template. The controller must pair to a template. Additionally, inherit $scope objects down to children, just understand that this happens via the view hierarchy, not the state hierarchy. To provide resolved dependencies via resolve for use by child states. To provide inherited custom data via data for use by child states or an event listener. To run an onEnter or onExit function that may modify the application in someway. Any combination of the above. Remember: Abstract states still need their own for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "".

Here's a plunker which shows how I would do it.

https://plnkr.co/edit/5FvJaelyxdl5MuALt5VY?p=preview

Hope it helps.

share|improve this answer
up vote 1 down vote

Look at the documentation for ui router named views,

You can use following syntax for using multiple views

$stateProvider
  .state('state',{
    url: '',
    views: {
      'header': {
        templateUrl: 'views/header.html',
        controller: 'headerCtrl'
      },
      'content': {
        template: '<div ui-view=" "></div>',  //<-- child templates loaded to here
      },
      'footer': {
        templateUrl: 'views/footer.html',
        controller: 'footerCtrl'
      }
    }
  })
  .state('state.post', {
    url: 'news/:id/:KeyWords'
    templateUrl: 'views/post.html'   //<-- This goes into content's ui-view
  });

I'm guessing you want to keep the header and footer and change content views.

You can achieve this by making this state as parent to all other states

suppose 

.state('main',{
  abstract: true,
  views: {
    'header': ... ,
    'content': {
       template: '<ui-view></ui-view>',
    }
    'footer': ...
  }
})

then all the child views will load their views in the , ex: in main.child etc, your template will load in the content's <ui-view></ui-view> tag

share|improve this answer
    
I am already using this – Rashid Javed Jul 19 at 13:09
    
check the syntax properly, you are using val key. where does it fit? – Vamsi Jul 19 at 13:12
    
I have edited the code opease chek it – Rashid Javed Jul 19 at 13:23
    
see my edit, using content view as placeholder you can load child route's templates in <ui-view> – Vamsi Jul 19 at 13:24
    
@Vamsi can you plz run recently edited code in plunker for him. Its complete code.. – Sami Jul 19 at 14:46
up vote 0 down vote

If you need to use a custom template depending on keywords you can do the following:

.config(['$routeProvider', function($routeProvider, $routeParams) { $routeProvider .when('/news/:id/:keyWords', { template: '<div ng-include="url"></div>', controller: "exampleController" })

then in the exampleController

function($routeParams, $scope) { $scope.url = $routeParams.keyWords; }

share|improve this answer
    
It's not a good approach. – krutkowski86 Jul 19 at 12:29
    
I want to use state – Rashid Javed Jul 19 at 13:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.